/* © ONLINE NETWORK VISION S.L. — deine-neue-webseite.org — dnw-wz-fein-20261002
   FEIN · 02.10.2026 · Prüfung „Benutzerfreundlichkeit und Design“
   Additiv, wird als letztes Stylesheet geladen. Jede Regel steht hier mit Anlass.
   Gemessen vorher (Chromium + WebKit, 390/375/768/1440):
   · Frage-Knopf nie im Bild (position:relative durch Daumenregel in style.css → dort korrigiert)
   · iPhone: ab Bildschirm 2 keine Kontaktmöglichkeit mehr (Kopf scrollt weg, keine Leiste)
   · Rechner: Fuss 10 px, Feldhinweise 10 px, Kleinzeilen 9 px, „Live ansehen“ 11 px
   · Vorher/Nachher am Handy: Nachher-Schild von der Trennlinie angeschnitten
   · „Live ansehen“-Pille lag über dem Inhalt der Referenzbilder
   ──────────────────────────────────────────────────────────────── */

/* ── 1 · Kopfzeile klebt am Rechner (Glas kommt aus frisch.css) ──
   Damit „Entwurf anfordern“ auf 18 Bildschirmen Länge immer erreichbar ist.
   Die Wischreihe klebt darunter, nicht dahinter. */
@media (min-width:801px){
  .header{position:sticky;top:0;z-index:40}
  .motion-enabled .gallery-rail .project-pair{top:calc(96px + 2vh)}
  html{scroll-padding-top:116px}
}

/* ── 2 · Anrufleiste am Telefon ──
   Glas unten, drei Wege: Anrufen, WhatsApp, Entwurf. Erscheint, sobald der
   Auftakt vorbei ist (fein.js), und weicht Formular und Fuss aus.
   Solange die Einwilligungsleiste steht, bleibt sie weg. */
.anrufleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;isolation:isolate;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.anrufleiste::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,12,13,.94);
  border-top:1px solid rgba(239,183,76,.28);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
}
.anrufleiste .in{display:flex;gap:8px;max-width:560px;margin:0 auto}
.anrufleiste a{
  flex:1 1 0;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:12px;font:600 14px/1.1 var(--body);letter-spacing:-.015em;white-space:nowrap;padding:0 8px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.anrufleiste a svg{width:18px;height:18px;flex:none}
.anrufleiste a.gold{
  flex:1.7 1 0;color:#1a1507;border-color:rgba(255,215,125,.6);
  background:linear-gradient(180deg,#ffd77d,#efb74c 55%,#d99f33);
  background-color:#efb74c;box-shadow:0 6px 22px rgba(239,183,76,.28);
}
body.leiste-an .anrufleiste{display:block}
body.leiste-an.leiste-sichtbar .anrufleiste{transform:none}
body:has(#zust) .anrufleiste{display:none}
@media (min-width:801px){.anrufleiste{display:none!important}}
/* Frage-Knopf rückt über die Leiste */
@media (max-width:800px){
  body.leiste-an.leiste-sichtbar .assistant-launch{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.anrufleiste{transition:none}}

/* ── 3 · Mindestgrössen am Rechner (am Telefon regelt klar.css) ── */
@media (min-width:1025px){
  .footer-bottom,.footer-bottom span,.footer-bottom a{font-size:13px}
  .footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  label span{font-size:13px}
  .eyebrow,span.eyebrow.muted,.section-top .eyebrow{font-size:12px!important}
  .project-tags span{font-size:12px}
  .pill,.section-top .pill{font-size:11px}
  .price-card small{font-size:12.5px;line-height:1.5}
  .stage-controls small,.stage-controls > span{font-size:12px}
  .project-open{font-size:12.5px;padding:11px 16px}
}

/* ── 4 · „Live ansehen“ zeigt sich beim Zeigen, liegt sonst nicht auf dem Bild ──
   Der ganze Kasten ist der Link, der Pfeil im Titel sagt es. Beim Darüberfahren
   erscheint die Pille oben rechts, der Kasten hebt sich leicht. */
@media (min-width:801px) and (hover:hover){
  .project .project-open{
    right:16px;left:auto;top:16px;bottom:auto;
    opacity:0;
    background:rgba(238,238,236,.96);
    transition:opacity .25s var(--ease);
  }
  .project:hover .project-open,.project:focus-visible .project-open{opacity:1}
  .project-main .project-open{top:auto;bottom:16px;right:16px;left:auto}
}

/* ── 5 · Vorher/Nachher am Telefon: Schilder weg, der Satz darüber sagt es ── */
@media (max-width:760px){
  .compare-label{display:none!important}
  .header-cta{font-size:12.5px}
  .subtle-link{font-size:13px}
}

/* ── 6 · Fünf Kacheln statt sechs: Reihe von drei, darunter zwei mittig ── */
@media (min-width:761px){
  .ref-raster{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .ref-raster .ref{flex:0 1 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3)}
}

/* ── 7 · Funktionen am Rechner: die Vorschauen waren Briefmarken (300×180, Schrift 7–10 px).
   Jetzt 420 px breit, Schrift 11–14 px, Glas statt Pappe. Kein zoom (WebKit ignoriert es im Raster). */
@media (min-width:1100px){
  .feature-card{grid-template-columns:1fr 440px;gap:0 40px}
  .feature-card .calendar-preview,.feature-card .config-preview,.feature-card .chat-preview{
    width:420px;height:auto;min-height:230px;padding:26px 28px;
    background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.35);
  }
  .calendar-preview>div:first-child{font-size:14px}
  .calendar-days{gap:10px;margin:22px 0}
  .calendar-days span{font-size:11px}
  .calendar-days b{font-size:15px;padding:8px}
  .calendar-time span{font-size:13px;padding:8px 16px}
  .config-preview{gap:12px}
  .config-preview>div:first-child,.config-preview>div:first-child b{font-size:13px}
  .config-option{font-size:14px;padding:11px 14px;border-radius:8px}
  .chat-preview{gap:20px}
  .chat-preview>span{font-size:13px;padding:11px 16px;border-radius:12px 12px 3px 12px}
  .chat-preview p{font-size:14px!important}
  .chat-preview i{font-size:16px}
  .chat-preview small{font-size:12px;margin-top:8px}
}

/* ── 8 · Auftakt: die drei Telefone wechseln durch (02.10.2026, „Design, da geht noch was“) ──
   Neun echte Kundenseiten laufen als Stapel durch: vorn → hinten rechts → hinten links → vorn.
   Nur transform auf den Telefonrahmen (Bilder), nie auf Text. Position per JS in --xl/--xm/--xr.
   Steht still bei reduzierter Bewegung, ausserhalb des Bildes, beim Zeigen und im Hintergrund-Tab. */
.schau-reihe.laeuft .schau-handy{left:0!important;right:auto!important;transition:transform .95s cubic-bezier(.2,.7,.2,1),height .95s cubic-bezier(.2,.7,.2,1)}
.schau-reihe.laeuft .schau-handy[data-slot=links] {transform:translateX(var(--xl)) translateY(4%) rotate(-6deg);height:86%;z-index:1}
.schau-reihe.laeuft .schau-handy[data-slot=rechts]{transform:translateX(var(--xr)) translateY(4%) rotate(6deg); height:86%;z-index:1}
.schau-reihe.laeuft .schau-handy[data-slot=mitte] {transform:translateX(var(--xm));height:100%;z-index:2}
.schau-reihe.laeuft .schau-handy img{transition:opacity .35s}
.schau-reihe.laeuft .schau-handy.tauscht img{opacity:0}
.hero-schau:hover .schau-reihe.laeuft .schau-handy[data-slot=links] {transform:translateX(var(--xl)) translateY(2%) rotate(-8deg)}
.hero-schau:hover .schau-reihe.laeuft .schau-handy[data-slot=rechts]{transform:translateX(var(--xr)) translateY(2%) rotate(8deg)}
.schau-name{
  position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%);
  padding:7px 14px;border-radius:100px;font:600 12.5px/1.2 var(--body);letter-spacing:.01em;color:#f4f3ef;
  background:rgba(11,12,13,.78);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 24px rgba(0,0,0,.45);
  white-space:nowrap;pointer-events:none;transition:opacity .3s;
}
.schau-name.tauscht{opacity:0}
@media (prefers-reduced-motion:reduce){.schau-reihe.laeuft .schau-handy{transition:none}.schau-name{transition:none}}

/* ── 9 · 3D-Auftakt (hero3d.js, Three.js gebündelt): Leinwand über dem flachen Stapel ──
   Der flache Stapel bleibt im DOM (Rückfall ohne WebGL, bei „weniger Bewegung“ und für Suchmaschinen). */
.schau-3d{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:1;pointer-events:none}
.schau-reihe.hat-3d .schau-handy{visibility:hidden}
.schau-reihe.hat-3d .schau-name{z-index:3}