/* © ONLINE NETWORK VISION S.L. — deine-neue-webseite.org — dnw-wz-klar-20260928
   ════════════════════════════════════════════════════════════════════
   KLAR · 28.09.2026
   Anlass: „Am Handy zu unübersichtlich, versteht kein Mensch.
   Am PC ruckelt die Seite."

   GEMESSEN VORHER (iPhone 13, WebKit):
   · Auftakt 3,1 Bildschirme lang, 30 antippbare Elemente, 282 Wörter
   · 54 Textstellen unter 12 px im Auftakt, Kleinstes 6–8 px
   · Einwilligungsleiste deckte 40 % des ersten Bildschirms
   GEMESSEN VORHER (Rechner, 1440×900, CPU vierfach gedrosselt):
   · Mittlere Bildzeit 50–67 ms (15–20 Bilder/s), 70–80 % der Bilder zu langsam
   · Ursache 1: body::before animierte background-position über den
     ganzen Schirm (fünf Verläufe) — der Browser malt in JEDEM Bild die
     komplette Fläche neu. Glanz aus: Mittel 17 ms.
   · Ursache 2: filter:drop-shadow auf den 13 Handy-Rahmen. Durch
     box-shadow ersetzt, sieht gleich aus, kostet fast nichts.

   Regel: Oben auf dem Handy steht nur, was man zum Verstehen braucht —
   Überschrift, ein Satz, EIN Knopf, drei Fakten. Danach das Beispiel.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Rechner: Ruckeln weg ──────────────────────────────────────── */
body::before{animation:none!important}
.ref-handy{filter:none}
.ref-handy-rahmen{
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.6),
             0 26px 40px -8px rgba(0,0,0,.6);
}

/* ── 2 · Handy: aufräumen ──────────────────────────────────────────── */
@media (max-width:760px){

  /* Auftakt: nur noch Aussage, Knopf, Fakten, Beispielseiten */
  .hero-copy > .hero-promise{order:3}
  .hero-text,
  .hero-actions .text-link:not(.hero-wa),
  .stage-caption,
  .device-controls,
  .wow-pfuetze,
  .wow-link,
  #wow-teilen-hinweis,
  .stage-controls small,
  .stage-controls > span,
  .hero-bottom{display:none!important}

  .hero-actions{margin-top:26px}
  .hero-actions .button{width:100%;justify-content:space-between;min-height:56px;font-size:17px}
  .hero-actions .hero-wa{width:100%;justify-content:center;min-height:44px}

  /* drei Fakten als drei gleich breite Felder, ohne hängende Trennstriche */
  .hero-proof{margin-top:16px;display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px}
  .hero-proof i{display:none}
  .hero-proof span{font-size:13px;line-height:1.3;text-align:center;padding:10px 6px;
    border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.03)}
  .hero-proof b{display:block;font-size:15px}

  .hero-try label{font-size:13px;letter-spacing:.06em}

  /* „Nur eine Kostprobe" bleibt — aber als eine Zeile, nicht als Kasten */
  .wow-kostprobe{padding:10px 12px;font-size:13px;line-height:1.45}
  .wow-kostprobe-zeichen{display:none}

  /* Branchen: eine Zeile zum Wischen statt einer Wand aus 19 Knöpfen */
  .stage-controls{margin-top:14px}
  .industry-switch{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .industry-switch::-webkit-scrollbar{display:none}
  .industry-switch button{flex:none;font-size:14px;min-height:44px}

  /* Überschriften-Zeilen der Abschnitte lesbar */
  .eyebrow,.section-top .eyebrow,span.eyebrow.muted{font-size:12px!important;letter-spacing:.08em}
  .project-tags span{font-size:12px}
  .compare-label{font-size:10px;padding:5px 8px}
  .compare-label.after-label{top:auto!important;bottom:10px!important}
  .price-card-top span{font-size:12px}
  .price-card small,.contact-copy small,label span{font-size:12.5px}

  /* Vergleich: die Linie fährt von selbst — drei Modus-Knöpfe braucht es hier nicht */
  .reveal-controls{display:none!important}

  /* Ablauf stand doppelt da (3 Schritte + Zeitachse). Die Schritte bleiben. */
  .zeitachse{display:none!important}

  /* Einwilligungsleiste: kleiner, Knöpfe bleiben gross genug für den Daumen */
  .zust{padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px))!important}
  .zust p{font-size:13px;line-height:1.45;min-width:0}
  .zust .in{gap:10px}
  .zust .kn{min-height:48px!important;font-size:15px!important}

  /* Fuss: Rechtliches lesbar und antippbar */
  .footer-bottom span,.footer-bottom a{font-size:13px}
  .footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  .back-top{font-size:13px}

  /* Leuchten im Auftakt steht still — spart Akku */
  .hero-glow{animation:none}
}

/* Referenz-Wischreihe ragte mit negativem Rand 1–6 px über den Schirm
   (auch auf live). Der Abschnitt schneidet jetzt seitlich ab. */
@media (max-width:760px){ .work-section{overflow-x:clip} }

/* Tablet 761–1024: dieselben Mindestgrössen für Beschriftungen */
@media (min-width:761px) and (max-width:1024px){
  .eyebrow,span.eyebrow.muted{font-size:12px!important}
  .stage-caption span,.hero-bottom span,.hero-bottom a,.stage-controls small,.stage-controls > span,
  .hero-proof,.hero-proof b,.device-controls button,.footer-bottom span,.footer-bottom a,
  .browser-address,.section-top .pill,.section-top .text-link,.footer-top p{font-size:12px!important}
}

/* Sehr kleine Telefone (iPhone SE 1. Gen., 320 px): Überschrift etwas
   kleiner, damit der Anfrageknopf über der Einwilligungsleiste steht */
@media (max-width:360px){
  .hero h1{font-size:40px!important}
  .hero-promise{margin-top:18px!important}
  .hero-promise{font-size:17px}
}
@media (max-width:760px){
  .footer-bottom,.footer-bottom > div{flex-wrap:wrap;column-gap:18px;row-gap:0}
}
@media (max-width:360px){
  .hero-copy > .eyebrow{display:none}
  .hero-actions .button{font-size:16px}
  .zust p{font-size:12.5px}
}


/* ════════════════════════════════════════════════════════════════════
   NEUE REIHENFOLGE · 29.09.2026
   Anlass: „Ich finde mich nicht zurecht — würdest du da durchsehen?"
   Ein Besucher aus der Werbung muss in dieser Reihenfolge verstehen:
   1 Was ist das? (Webseite, Entwurf gratis, 690 € fest)
   2 Können die das? (echte Seiten)  3 Wie läuft es ab?  4 Was kostet es?
   Erst danach kommen die Spielereien (Ausprobieren, Vorher/Nachher,
   Zusatzfunktionen), dann Fragen und Anfrage.
   ════════════════════════════════════════════════════════════════════ */

/* Auftakt-Text */
.hero-promise{font-family:var(--body);font-size:clamp(17px,1.35vw,20px);line-height:1.55;
  color:#cfcfcd;max-width:560px;padding-left:0;border:0;letter-spacing:0}
.hero-promise::before{display:none}
.hero-promise b{color:var(--ink);font-weight:600}
.hero-actions .hero-wa{color:var(--ink);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.3);display:inline-flex;align-items:center;min-height:44px}

/* Drei echte Seiten als Blickfang */
.hero-schau{position:relative;align-self:center;display:flex;flex-direction:column;align-items:center;
  gap:22px;padding:30px 0 60px;color:inherit;text-decoration:none}
.schau-reihe{position:relative;display:block;width:min(520px,100%);height:clamp(380px,38vw,540px)}
.schau-handy{position:absolute;bottom:0;display:block;aspect-ratio:600/1022;height:86%;
  border-radius:12% / 7%;border:3px solid #2b2c2e;background:#0b0c0d;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 50px -12px rgba(0,0,0,.7);
  transition:transform .5s var(--ease)}
.schau-handy img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.schau-kerbe{position:absolute;top:5px;left:50%;width:34%;height:7px;margin-left:-17%;
  border-radius:6px;background:#0b0c0d;z-index:2}
.schau-links {left:2%; transform:rotate(-6deg) translateY(4%)}
.schau-rechts{right:2%;transform:rotate(6deg) translateY(4%)}
.schau-mitte {left:50%;height:100%;transform:translateX(-50%);z-index:2}
.hero-schau:hover .schau-links {transform:rotate(-8deg) translate(-4%,2%)}
.hero-schau:hover .schau-rechts{transform:rotate(8deg) translate(4%,2%)}
.schau-text{font-size:15px;color:#cfcfcd;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}

/* Ausprobieren: links erklären und eintippen, rechts das Beispiel */
.probier-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 5%;align-items:center}
.probier-kopf h2{margin:18px 0 20px}
.probier-kopf > p{color:var(--muted);font-size:17px;line-height:1.6;max-width:520px;margin-bottom:26px}
.probier-section .hero-stage{animation:none}

@media (max-width:900px){
  .probier-section{grid-template-columns:1fr;gap:34px}
  .probier-section .hero-stage{width:100%;max-width:580px;justify-self:center}
}
@media (max-width:760px){
  .hero-schau{padding:6px 0 36px;gap:16px}
  .schau-reihe{height:300px;width:100%}
  .schau-handy{height:88%}
  .schau-mitte{height:100%}
  .schau-links{left:0}
  .schau-rechts{right:0}
  .hero-promise{font-size:17px;margin-top:4px}
  .probier-kopf > p{font-size:16px}
  .hero-try small{display:none}
}
@media (prefers-reduced-motion:reduce){ .schau-handy{transition:none} }
@media (max-width:760px){ .hero + .section{padding-top:44px} }
@media (min-width:901px){ .probier-section{align-items:start} .probier-kopf{padding-top:110px} }
@media (max-width:360px){
  .hero h1{font-size:36px!important}
  .hero-promise{font-size:15px!important;line-height:1.45}
  .hero-actions{margin-top:16px}
}