/* Startseite (bananacrm.de, ab 02.11.2026). Nur von index.html geladen; css/style.css bleibt Grundlage. */
.neu h2::before,.n-claim::before{content:"";display:block;width:44px;height:6px;border-radius:3px;background:var(--bar);margin-bottom:22px}
.neu h2{text-wrap:balance;max-width:22ch}
.neu p{font-size:17px;max-width:640px}

/* Einstieg */
.n-hero{padding:clamp(56px,8vw,104px) 0 clamp(56px,7vw,96px)}
.n-claim{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.n-claim::before{margin:0 0 26px}
/* Ruhiger Kopf (10.11.2026): dunkle Vorzeile in Fließtextgröße, Überschrift am Computer etwa 52 px (seit 10.11.2026, vorher 40 px). */
.neu .n-vor{font-size:clamp(19px,1.6vw,22px);line-height:1.4;font-weight:500;color:var(--ink);margin:0 0 10px}
.n-hero h1{margin:0 0 28px;max-width:24ch;text-align:left;font-size:clamp(30px,3.7vw,52px);line-height:1.12;letter-spacing:-.025em}
.neu .n-lead{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:#333;max-width:620px;margin-bottom:18px}
.neu .n-kurz{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:34px}

/* Abschnitte */
.n-sec{padding:var(--sec) 0}
.n-grau{background:var(--soft)}
.n-schmal>*{max-width:780px}
.neu .n-gross{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#333}
.neu .n-satz{font-size:clamp(20px,1.8vw,24px);font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-top:28px}

/* So funktioniert Banana */
/* Drei gleich große Geräte: bei voller Breite (1208 px) je 299 px, dazwischen 116 px Weißraum, außen je 39,5 px. */
.n-schritte{list-style:none;margin:48px 0 0;padding:0 3.27%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10.275%}
.n-schritte li{position:relative}
/* iPhone-Rahmen nur aus CSS, Vorlage vorlage-handys-titan.jpg. Maße in cqw, also Anteile der Gerätebreite. */
.n-bild{position:relative;margin:0 0 32px;container-type:inline-size}
/* Seitentasten: links Stummschalter und Lautstärke, rechts Ein/Aus. */
.n-bild::before,.n-bild::after{content:"";position:absolute;top:0;bottom:0;width:1.4cqw;z-index:-1}
.n-bild::before{left:-.7cqw;background:linear-gradient(90deg,#c9d8e8,#9fb4cb) no-repeat 0 16.67%/100% 4%,linear-gradient(90deg,#c9d8e8,#9fb4cb) no-repeat 0 25.65%/100% 8%,linear-gradient(90deg,#c9d8e8,#9fb4cb) no-repeat 0 36.2%/100% 8%}
.n-bild::after{right:-.7cqw;background:linear-gradient(270deg,#c9d8e8,#9fb4cb) no-repeat 0 31.09%/100% 12.5%}
/* Kante silbern-metallisch mit leichtem Hellblau, helle und dunklere Stellen wechseln wie bei Glas; feine helle Innenkante; darin der dünne schwarze Displayrand. */
.n-geraet{--rand:3.6cqw;position:relative;padding:var(--rand);background:conic-gradient(from 215deg at 50% 50%,#f7fafd 0%,#aec2d8 7%,#eef4fa 14%,#94adc8 24%,#f2f7fb 33%,#b9cbdd 42%,#fafcfe 50%,#9cb3cc 58%,#ecf2f8 66%,#a5bad1 76%,#f5f9fc 86%,#b4c7da 93%,#f7fafd 100%);border-radius:16cqw;box-shadow:0 0 0 .5px rgba(72,96,126,.5),0 2px 5px rgba(0,0,0,.08),0 16px 32px -14px rgba(0,0,0,.2),0 34px 60px -30px rgba(0,0,0,.2)}
.n-geraet::before{content:"";position:absolute;inset:1.25cqw;border-radius:14.9cqw;background:#050505;box-shadow:0 0 0 .5px rgba(255,255,255,.95)}
/* Dynamic Island mit angedeuteter Kamera. */
.n-geraet::after{content:"";position:absolute;left:50%;top:calc(var(--rand) + (100% - 2*var(--rand))*.019);width:29.3cqw;height:8.4cqw;transform:translateX(-50%);border-radius:99px;background:radial-gradient(circle at 78% 50%,#33466f 0,#18233f .6cqw,#0a0e1a 1.2cqw,#000 1.45cqw);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
.n-screen{position:relative;overflow:hidden;aspect-ratio:780/1688;border-radius:12.4cqw;background:#fff}
/* Lichtschimmer auf dem Glas: nur in der oberen linken Ecke, er reicht nicht bis zu den gelben Karten. */
.n-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.1) 0,rgba(255,255,255,0) 14%)}
.n-screen img{width:100%;height:auto;margin:0}
/* Bild 3: echte Statusleiste aus Bild 1 darüber, die Mail bleibt vollständig sichtbar und steht unten bündig. */
.n-screen-mail img{position:absolute}
.n-screen-mail .n-status{left:0;top:0}
.n-screen-mail .n-mail{left:2.5%;bottom:0;width:95%}
.n-nr{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-weight:700;font-size:9.5px;line-height:1;margin-bottom:10px}
.n-schritte h3{font-size:clamp(20px,1.7vw,23px);line-height:1.25;letter-spacing:-.02em;margin:0 0 8px}
.n-schritte p{font-size:16.5px;color:#444;margin:0}

/* Pfeil vom Mail-Knopf (Bild 2) zur Mail (Bild 3). Maße in Anteilen des Handybilds (390 x 844),
   helle Bilder seit 06.11.2026: Mail-Knopf Mitte x 13,3 %, Oberkante y 58,1 %; Pfeil im freien Streifen darüber bei y 53,7 %. */
.n-pfeil{position:absolute;pointer-events:none;z-index:1}
.n-pfeil svg{position:absolute;display:block;overflow:visible}
.n-pfeil svg:first-child{inset:0;width:100%;height:100%}
.n-pfeil path{fill:none;stroke:var(--bar);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.n-pfeil path.halo{stroke:#fff;stroke-width:6;opacity:.9}
.n-pfeil .spitze{width:11px;height:12px}
.n-pfeil .spitze path{fill:var(--bar);stroke:none}
.n-pfeil-quer{left:calc(var(--rand) + (100% - 2*var(--rand))*.133);right:calc(3px - 38.8cqw);top:calc(var(--rand) + (100% - 2*var(--rand))*.537);bottom:calc(var(--rand) + (100% - 2*var(--rand))*.419)}
.n-pfeil-quer .spitze{right:0;top:-6px}
/* Nur am Computer: Das mittlere Gerät steht 48 px höher als die beiden äußeren; der Text wandert mit. */
@media (min-width:901px){
  .n-schritte{align-items:start}
  .n-schritte li:nth-child(odd){margin-top:48px}
  .n-nr,.n-schritte h3,.n-schritte p{margin-left:6px}
}
#so-gehts .n-satz{margin-top:56px}

/* Drei Gründe */
.neu .n-fiktiv{font-size:15px;color:var(--muted);margin:-8px 0 40px}
.n-gruende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,56px)}
.n-grund{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.n-grund h3{font-size:clamp(20px,1.7vw,23px);letter-spacing:-.02em;margin:0 0 10px}
.n-grund>p{font-size:16.5px;color:#444;margin-bottom:24px}

/* Grund und Mail: zwei versetzte Karten, jede mit eigenem Kopf (06.11.2026, am Computer und am Handy). */
.karte{font-size:14px;line-height:1.45}
.k-grund,.k-mailkarte{display:block;border:1px solid #e6e6e6;border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px -14px rgba(0,0,0,.18)}
/* Grund gelb; unten mehr Luft, damit die überlappende Mail-Karte keinen Text verdeckt. */
.k-grund{background:var(--gold);border-color:#dca022;margin-right:12%;padding-bottom:34px}
.neu .karte .k-grund p,.karte .k-grund .k-kopf{color:var(--gold-ink)}
.k-mailkarte{position:relative;background:#fff;margin:-20px 0 0 12%;box-shadow:0 2px 6px rgba(0,0,0,.06),0 16px 34px -14px rgba(0,0,0,.30)}
/* Mail wie eine Mail: Anrede und Gruß je in eigener Zeile, ohne Leerzeilen. */
.k-mail .k-zeile{display:block}
.neu .karte p{font-size:14px;margin:0;max-width:none}
.karte .k-kopf{display:flex;align-items:center;gap:6px;color:#8a8a8a;font-size:12.5px;margin-bottom:10px}
.k-banane{width:19px;height:19px;margin:3px 0;background:url(../assets/banana.svg) center/contain no-repeat}
.k-zeit{margin-left:auto}
.neu .karte .k-firma{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:3px}
.neu .karte .k-text{color:#333}
.neu .karte .k-teil{font-size:12.5px;font-weight:600;color:var(--ink);margin:4px 0 2px}
.neu .karte .k-teil-mail{margin-top:0}

/* Zwei Fälle (05.11.2026) */
.n-faelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);margin-top:40px}
.n-fall h3{font-size:clamp(20px,1.7vw,23px);line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.n-fall p{font-size:16.5px;color:#444;margin:0}

.n-liste{list-style:none;margin:0 0 28px;padding:0}
.n-liste li{padding:11px 0;border-top:1px solid #e2e2e0;font-size:17px;font-weight:600;color:var(--ink)}
.n-liste li:last-child{border-bottom:1px solid #e2e2e0}

/* Preis */
.neu .n-preis{font-size:20px;color:var(--ink);margin:0 0 26px}
.n-preis b{display:block;font-size:clamp(48px,5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.n-preis span{display:block;color:var(--muted);font-size:17px;margin-top:6px}
.n-bed{list-style:none;margin:0 0 20px;padding:0}
.n-bed li{position:relative;padding:8px 0 8px 26px;font-size:16.5px;color:#333;max-width:640px}
.n-bed li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:10px;border-radius:50%;background:var(--bar)}

/* Einrichtung */
.neu .n-dach{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 18px}
#einrichtung .btns{align-items:center;margin-top:28px;gap:24px}

/* Gründer */
.n-gruender{display:grid;grid-template-columns:184px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.n-gruender .unterschrift{margin-top:26px}
.n-gruender .kontakt{font-size:15px;color:var(--muted);margin-top:12px}

/* Fragen */
.neu .fragen{margin-top:16px}
.neu .fragen p{font-size:16.5px;color:#444;margin:-4px 0 0;padding:0 0 20px;max-width:720px}
.neu .fragen p a{text-underline-offset:3px}

/* Abschluss */
.abschluss h2::before{margin-inline:auto}
.neu .abschluss h2{max-width:22ch;margin:0 auto 36px}
/* Satz unter der Abschluss-Überschrift (10.11.2026), mittig wie die Überschrift. */
.neu .abschluss .zusatz{margin:-14px auto 32px;max-width:560px}

@media (max-width:900px){
  .n-schritte{padding:0}
  .n-schritte,.n-gruende{grid-template-columns:minmax(0,1fr);gap:56px}
  .n-faelle{grid-template-columns:minmax(0,1fr);row-gap:40px}
  /* Handy: Screenshots aus, nur die Texte der drei Schritte (02.11.2026). */
  .n-bild{display:none}
  .n-schritte li{display:block}
  .n-grund{display:block;grid-row:auto}
  .n-pfeil-quer{display:none}
  .n-gruender{grid-template-columns:minmax(0,1fr)}
  .n-gruender .gruender-bild{width:120px;height:120px}
}
@media (max-width:480px){
  /* Fußzeile: die Links brechen um, statt bei 320 px über den Rand zu laufen (06.11.2026). */
  footer .fl{flex-wrap:wrap}
  .n-hero h1{font-size:31px}
}