/* Deutsche Startseite (bananacrm.de, 10.11.2026). Nur von index.html geladen — css/style.css und
   css/startseite.css bleiben unverändert, weil auch bananacrm.pl sie lädt. */

/* ---------- Buttons ohne Umrandung (hellgrau gefüllt, dunkle Schrift) ---------- */
.neu .btn.alt,.neu .cta .btn.alt{background:#ececec;color:var(--ink);box-shadow:none}
.neu .btn.alt:hover,.neu .cta .btn.alt:hover{background:#e0e0e0;color:var(--ink)}

/* ---------- Scrollytelling „Ein paar Minuten …“ ----------
   Mechanik (sticky Handy, Texte, Fortschritt, Handy-Ansicht): css/story.css + js/scrolly.js, gemeinsam
   mit bananacrm.pl. Hier nur das Aussehen der deutschen Fassung: Texte und die Ebenen im Handy. */
.n-story-handy .n-bild{margin:0}
.n-story-schritte li{max-width:520px}
/* Über jedem Schritt eine kleine Banane statt der Zahl (10.11.2026), so groß wie die Zahl war. */
.n-story-nr{display:block;width:17px;height:17px;margin:0 0 10px}
.n-story-schritte h3{font-size:clamp(22px,2vw,28px);line-height:1.22;letter-spacing:-.02em;margin:0 0 10px}
.n-story-schritte p{font-size:17px;line-height:1.55;color:#444;margin:0}

/* Ebenen im Handy: Bild 1, Bild 2, die fertige Mail — übereinander, die aktive blendet ein. */
.n-story-screen{--px:calc(92.8cqw / 390)}
.n-story-screen::after{pointer-events:none}
.n-story-screen .n-story-ebene{position:absolute;inset:0;width:100%;height:100%}
.n-story-screen img.n-story-ebene,.n-story-ebene[data-ebene="2"]>img{object-fit:cover}
.n-story-ebene[data-ebene="2"]>img{position:absolute;inset:0;width:100%;height:100%;margin:0}

/* Die Mail im Handy — genau wie die Vorlage (vorschau-einstieg/signatur-rademacher-vorlage.jpg):
   weißes Fenster auf hellem Grau; oben die Empfängerin und der Betreff, der Text, die Signatur des Malerbetriebs. */
.n-story-mail{background:#ececec;font-family:inherit;color:#1d1d1f}
.n-story-status{position:absolute;left:0;top:0;width:100%;height:auto;margin:0;z-index:1}
.n-story-fenster{position:absolute;left:calc(10*var(--px));right:calc(10*var(--px));top:calc(52*var(--px));bottom:calc(12*var(--px));background:#fff;border-radius:calc(14*var(--px));padding:calc(18*var(--px)) calc(18*var(--px)) calc(16*var(--px));display:flex;flex-direction:column}
/* Empfängerin als kleiner Kasten (13.11.2026): Initialen-Kreis in Logo-Gold, Name fett, Firma grau. */
.neu .n-story-an{display:flex;align-items:center;gap:calc(10*var(--px));margin:0 0 calc(16*var(--px));padding:calc(9*var(--px)) calc(12*var(--px));background:#f6f6f6;border-radius:calc(12*var(--px));line-height:1.3;color:#1d1d1f}
.n-story-kreis{flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(34*var(--px));height:calc(34*var(--px));border-radius:50%;background:#CCA63F;color:#fff;font-size:calc(12.5*var(--px));font-weight:600;letter-spacing:.02em}
.n-story-name{display:block;font-weight:600;font-size:calc(14*var(--px))}
.n-story-firma{display:block;font-size:calc(12.5*var(--px));color:#8a8a8a}
.n-story-feld{position:relative;flex:1;overflow:hidden}
.neu .n-story-text p{margin:0 0 calc(12*var(--px));font-size:calc(14*var(--px));line-height:1.55;color:#1d1d1f;max-width:none}
/* Betreff ohne Beschriftung als fette Überschrift über der Nachricht (13.11.2026). */
.neu .n-story-text p.n-story-betreff{font-size:calc(17*var(--px));font-weight:700;line-height:1.3;margin-bottom:calc(18*var(--px));color:#1d1d1f}
/* Signatur: die Zeilen mit etwas Luft wie in der Vorlage. */
.n-story-signatur{margin-top:calc(6*var(--px))}
.n-story-screen img.n-story-logo{display:block;width:calc(130*var(--px));height:auto;margin:0 0 calc(8*var(--px))}
.neu .n-story-signatur p{margin:0 0 calc(3*var(--px));font-size:calc(12.5*var(--px));line-height:1.45;color:#555;max-width:none}
.neu .n-story-signatur p.n-story-slogan{font-style:italic;font-weight:600;color:#17705f;margin-bottom:calc(8*var(--px))}
.n-story-signatur b{color:#111;font-weight:600}
.neu .n-story-signatur p.n-story-link{color:#1c5bc4}
.n-story-xi{display:inline-flex;align-items:center;justify-content:center;width:calc(26*var(--px));height:calc(26*var(--px));margin-top:calc(8*var(--px));border-radius:calc(5*var(--px));background:#1c5bc4;color:#fff;font-weight:700;font-size:calc(12.5*var(--px));line-height:1}
.neu .n-story-punkte{position:absolute;left:0;top:calc(4*var(--px));margin:0;font-size:calc(22*var(--px));line-height:1;color:#555;opacity:0;letter-spacing:.06em}
.neu .n-story-senden{margin:calc(10*var(--px)) 0 0;text-align:right}
/* „Senden“ in der fertigen Mail. */
.n-story-senden button{display:inline-block;border:0;margin:0;font:inherit;font-weight:600;cursor:pointer;background:var(--sb,#111);color:#fff;font-size:calc(14*var(--px));line-height:1;padding:calc(11*var(--px)) calc(22*var(--px));border-radius:999px;transform:scale(var(--ss,1));transform-origin:center}
.neu .sc p.n-story-an,.neu .sc p.n-story-senden,.neu .sc p.n-story-punkte{max-width:none}
@media (max-width:767.98px){
  .n-story-schritte h3{font-size:21px}
  .n-story-schritte p{font-size:16px}
}