/* ============================================================
   assets/css/weg-1.css — el motor de las Konzeptstudien de zonot
   ------------------------------------------------------------
   Sale de la demo de Lumen («Der Weg», elegida por Jorge el 31 oct 2026):
   un camino en pasos y un teléfono que cambia lo que muestra en cada paso.
   Lo comparten las tres demos (Lumen, Alba, Lamella) en sus tres idiomas,
   nueve páginas. Antes de este archivo cada demo llevaba su copia entera, y
   una copia más es una copia que se desincroniza.

   Aquí va SOLO la estructura. La identidad de cada negocio inventado
   (colores, fuentes, fotos) la pone cada página en su :root:
     --g  fondo · --g2 tarjeta · --g3 banda oscura · --c acento
     --c2 papel del teléfono · --t texto · --tt texto del teléfono
     --sanft texto secundario · --linie líneas finas · --linie2 líneas marcadas
     --bub burbuja del otro · --klein texto pequeño del teléfono
     --rand-tel marco del teléfono · --ok-bg/--ok-t etiqueta verde
     --btn-hover · --schatten-text · --f-ser · --f-text
     --fett: el grosor de negrita; 500 si la fuente no trae 600 (Hanken), o el
       navegador la inventa y se ve borrosa
   El nombre lleva número: assets/ se cachea un día, y un cambio de motor
   con el mismo nombre dejaría páginas nuevas con la hoja vieja.
   ============================================================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--g);color:var(--t);font-family:var(--f-text);font-size:18px;line-height:1.55}
.ser{font-family:var(--f-ser);font-weight:var(--ser-w,500)}
.band{font-size:13px;line-height:1.4;padding:10px 16px;text-align:center;background:var(--g3);color:var(--band-t,var(--c))}
.band a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.btn{display:inline-block;background:var(--c);color:var(--btn-t,var(--g));font-weight:var(--fett,600);padding:16px 28px;border-radius:99px;text-decoration:none;transition:background .2s}
.btn:hover{background:var(--btn-hover)}
.btn:focus-visible,.chip:focus-visible,.knopf2:focus-visible,.regler input:focus-visible,.rechner input:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.rahmen2{max-width:1240px;margin:auto;padding-inline:48px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Portada */
.w-held{position:relative;padding:18px 0 0}
.w-held .rahmen2{position:relative}
.oben{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px;margin-bottom:10px}
.oben a{color:var(--t);text-decoration:none}
.oben strong{font-family:Safiro,sans-serif;font-size:21px;font-weight:700}
.wm{font-size:clamp(100px,17.5vw,265px);line-height:.86;letter-spacing:-.03em;color:var(--c);display:block;padding-bottom:8px}

/* El camino */
.weg{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start;position:relative;padding-top:26px;padding-bottom:30px}
.weg h1{font-size:clamp(32px,4vw,56px);line-height:1.08;margin-bottom:12px;max-width:640px}
.wm,.weg h1,.lede{text-shadow:var(--schatten-text,none)}
.lede{max-width:560px;color:var(--sanft);margin-bottom:10px}
.w-schritt{min-height:62vh;padding:28px 0 30px;border-top:1px solid var(--linie);display:grid;grid-template-columns:62px minmax(0,1fr);align-content:start;transition:opacity .3s}
.w-schritt b.nr{font-family:var(--f-ser);font-style:var(--nr-stil,italic);font-weight:500;font-size:46px;line-height:1;color:var(--c-text,var(--c))}
.w-schritt h2{font-size:clamp(26px,2.7vw,38px);line-height:1.12;margin-bottom:10px}
.w-schritt p{max-width:520px;color:var(--sanft)}
.zusatz{display:inline-block;margin-top:14px;font-size:14px;line-height:1.4;padding:7px 12px;border:1px solid var(--linie2);border-radius:10px;color:var(--c-text,var(--c))}
.zusatz a{color:inherit}
.js .weg.breit .w-schritt{opacity:.42}.js .weg.breit .w-schritt.an{opacity:1}
.js .weg.breit .w-schritt .bild{display:none}
.w-foto{grid-column:2;margin:20px 0 0;max-width:640px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--linie)}
.w-foto img{display:block;width:100%;height:auto}

/* El teléfono: sticky en escritorio. En móvil cada paso lleva su pantalla debajo. */
.telspalte{position:sticky;top:34px;margin-top:var(--tel-hoch,-210px);z-index:2}
.tel{width:320px;height:640px;margin:auto;border-radius:46px;background:var(--c2);color:var(--tt);box-shadow:0 0 0 10px var(--rand-tel),var(--tel-tiefe,0 40px 80px rgba(0,0,0,.45));overflow:hidden;padding:46px 20px 20px;font-size:15px;line-height:1.42;position:relative}
.tel .bild{display:none;height:100%;margin:0;background:none;box-shadow:none;padding:0;border-radius:0;overflow:hidden}
.tel .bild.an{display:block}
.bild{grid-column:2;margin-top:20px;background:var(--c2);color:var(--tt);border-radius:26px;padding:20px;font-size:15px;line-height:1.42;box-shadow:var(--bild-tiefe,0 20px 50px rgba(0,0,0,.28));max-width:420px}
.bild h3{font-family:var(--f-ser);font-weight:var(--ser-w,500);font-size:29px;line-height:1.08;margin-bottom:10px;color:var(--tt)}
.app{font-size:12px;font-weight:var(--fett,600);opacity:.65;margin-bottom:12px}
.bub{padding:11px 13px;border-radius:15px;background:var(--bub);margin-bottom:9px}
.bub.ich{background:var(--bub-ich,var(--g));color:var(--bub-ich-t,var(--t));margin-left:26px}
.feld{border-bottom:1px solid var(--feld-linie,rgba(34,48,42,.35));padding:9px 0;font-size:14.5px;display:flex;justify-content:space-between;gap:14px}
.feld b{font-weight:var(--fett,600)}.feld span{text-align:right}
.kn{display:block;text-align:center;background:var(--bub-ich,var(--g));color:var(--bub-ich-t,var(--t));border-radius:99px;padding:13px;margin-top:16px;font-weight:var(--fett,600)}
.bild small{display:block;font-size:12.5px;line-height:1.4;color:var(--klein);margin-top:8px}
.chips{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.chip{font:inherit;font-size:14px;font-weight:var(--fett,600);text-align:left;padding:10px 13px;border-radius:13px;background:#fff;border:1.5px solid var(--bub-ich,var(--g));color:var(--bub-ich,var(--g));cursor:pointer}
.chip[aria-pressed="true"]{background:var(--bub-ich,var(--g));color:var(--bub-ich-t,var(--t))}
.w-chat{min-height:150px}
.ok{display:inline-block;font-size:12.5px;font-weight:var(--fett,600);padding:4px 10px;border-radius:99px;background:var(--ok-bg,#DDE8CF);color:var(--ok-t,#20442B);margin-bottom:12px}
.ok.warten{background:#F3E2C0;color:#6B4A0E}

/* Llamada: la transcripción entra línea a línea cuando el paso se activa. */
.anruf__kopf{text-align:center;margin-bottom:14px}
.anruf__kopf b{display:block;font-size:17px}
.anruf__uhr{font-variant-numeric:tabular-nums;font-size:13px;opacity:.7}
.welle{display:flex;justify-content:center;align-items:center;gap:3px;height:26px;margin:8px 0 2px}
.welle i{display:block;width:3px;border-radius:2px;background:var(--bub-ich,var(--g));height:30%}
.laeuft .welle i{animation:welle 1.1s ease-in-out infinite}
.welle i:nth-child(2n){animation-delay:-.3s}.welle i:nth-child(3n){animation-delay:-.6s}.welle i:nth-child(5n){animation-delay:-.85s}
@keyframes welle{0%,100%{height:25%}50%{height:95%}}
.zeile{font-size:14px;margin-bottom:8px;padding:9px 12px;border-radius:13px;background:var(--bub)}
.zeile b{display:block;font-size:11.5px;font-weight:var(--fett,600);opacity:.65;margin-bottom:1px}
.zeile.ich{background:var(--bub-ich,var(--g));color:var(--bub-ich-t,var(--t));margin-left:22px}
.js .tel [data-anruf] .zeile{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.js .tel [data-anruf] .zeile.da{opacity:1;transform:none}

/* Entwurf con botón de liberar: [data-umschalten] alterna .frei en su .bild */
.knopf2{font:inherit;font-size:14px;font-weight:var(--fett,600);padding:11px 16px;border-radius:99px;border:1.5px solid var(--bub-ich,var(--g));background:var(--bub-ich,var(--g));color:var(--bub-ich-t,var(--t));cursor:pointer}
.knopf2.leise{background:transparent;color:var(--bub-ich,var(--g))}
.knoepfe{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bild .nachher{display:none}
.bild.frei .nachher{display:block}.bild.frei .vorher{display:none}

/* Rechner: un control de rango con su valor al lado */
.rechner label{display:block;font-size:13px;font-weight:var(--fett,600);margin-top:10px}
.rechner .wert{float:right;font-variant-numeric:tabular-nums}
.rechner input[type=range]{width:100%;accent-color:var(--bub-ich,var(--g));margin-top:4px}

/* Oferta */
.ang{position:relative;padding:76px 0 84px}
.ang .rahmen2{position:relative}
.ang h2,.leser h2,.probe h2{font-size:clamp(34px,4.4vw,62px);line-height:1.05}
.ang .kopf2{max-width:620px;margin-bottom:30px}
.ang .sub{max-width:620px;margin-top:12px;color:var(--sanft)}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:38px;list-style:none;padding:0}
.drei li{border-top:1px solid var(--linie2);padding-top:14px;font-size:16px;line-height:1.5}
.drei strong{display:block;font-size:18px}
.drei em{display:block;font-style:normal;color:var(--c-text,var(--c));font-size:14px;margin:2px 0 6px}
.w-karte{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;background:var(--g2);border-radius:26px;padding:40px;box-shadow:0 0 0 1px var(--linie)}
.preis{font-family:var(--f-ser);font-size:clamp(58px,7vw,96px);line-height:1;color:var(--c-text,var(--c));font-weight:500}
.w-karte h3{font-size:22px;font-weight:var(--fett,600);margin-bottom:8px}
.w-karte .w-plan{font-size:15.5px;margin-top:10px;color:var(--sanft)}
.w-karte .btn{margin-top:20px}
.klein{font-size:14px;margin-top:10px;color:var(--sanft)}
.w-karte ul{list-style:none;padding:0;margin:0}
.w-karte li{padding:11px 0 11px 26px;border-top:1px solid var(--linie);position:relative;font-size:16.5px;line-height:1.4}
.w-karte li::before{content:"→";position:absolute;left:0;color:var(--c-text,var(--c))}
.ehrlich{margin-top:26px;font-size:16px;max-width:760px;color:var(--sanft)}
.ehrlich a{color:var(--c-text,var(--c))}
footer.fuss a{text-decoration:none}

@media (max-width:959px){
  body{font-size:17px}
  .rahmen2{padding-inline:16px}
  .weg{grid-template-columns:minmax(0,1fr);gap:0}
  .telspalte{display:none}
  .w-schritt{min-height:0;grid-template-columns:44px minmax(0,1fr);padding:22px 0 28px}
  .w-schritt b.nr{font-size:34px}
  .bild,.w-foto{grid-column:1 / -1;max-width:none}
  .ang{padding:50px 0}
  .drei{grid-template-columns:1fr}
  .w-karte{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .w-karte .btn{display:block;text-align:center}
}
@media (prefers-reduced-motion:reduce){.laeuft .welle i{animation:none;height:60%}}