/*! NEXTARI · Author: Marvin Slotta · Build 2026.10.13 */
/* ERKLAERSEITEN · How it works, Guide, Support us, Become a partner.

  Neu gebaut am 13.10.2026 nach dem Seitenbriefing: jede Seite EINE Aufgabe
  und EINE Hauptaktion, ein echtes Produktbild statt einer Liste von
  Versprechen, Verfuegbarkeit sichtbar (verfuegbar / zum Launch / spaeter).
  Diese Datei traegt nur Bloecke, die auf allen vier Seiten stehen: Kopf,
  Abschnitt, Knopfgruppe, Bild, Stand-Marke. Was nur eine Seite braucht,
  steht in ihrer Seitendatei.

  Werte nur aus Tokens: drei Grautoene (Seite, Flaeche, Flaeche 2), ein Lila
  nur als Flaeche (der eine gefuellte Knopf), Farbe sonst nur im Punkt der
  Stand-Marke. Am Telefon 44er Knoepfe, eine Spalte. */

.nxi{max-width:1120px;margin:0 auto;padding:0 var(--nx-rand);position:relative;z-index:1;
  width:var(--nx-breite);color:var(--txt);font-family:var(--nx-f-text)}

/* KOPF · Augenbraue, ein Satz als Titel, ein Satz darunter, eine Knopfgruppe */
.nxi-kopf{padding:72px 0 40px;text-align:center}
.nxi-ey{font:800 var(--nx-typo-klein) var(--nx-f-text);letter-spacing:var(--nx-sperrung);
  text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.nxi-h1{font:800 60px/1.06 var(--nx-f-titel);letter-spacing:-1.5px;color:var(--nx-weiss);
  margin:0 auto 18px;max-width:880px}
.nxi-lead{font:400 var(--nx-typo-kartenkopf)/1.6 var(--nx-f-text);color:var(--dim);
  margin:0 auto 28px;max-width:640px}
.nxi-knoepfe{display:flex;flex-wrap:wrap;gap:var(--nx-luecke-knopf);align-items:center}
.nxi-kopf .nxi-knoepfe{justify-content:center}
.nxi-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--nx-h-bedien);min-width:var(--nx-h-bedien);padding:0 18px;box-sizing:border-box;
  border-radius:var(--nx-r-bedien);font:800 var(--nx-typo-text) var(--nx-f-text);
  color:var(--nx-weiss);background:var(--nx-flaeche-2);text-decoration:none;border:0;cursor:pointer}
.nxi-b1{background:var(--accent)}
@media (hover:hover){.nxi-b:hover{background:var(--nx-hebung-2)}.nxi-b1:hover{background:var(--accent);filter:brightness(1.12)}}
.nxi-link{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--nx-linie)}
@media (hover:hover){.nxi-link:hover{color:var(--nx-weiss)}}

/* ABSCHNITT · Luft zwischen den Teilen, ein Kopf, ein Satz */
.nxi-ab{padding:56px 0}
.nxi-ab + .nxi-ab{border-top:1px solid var(--nx-linie-subtle)}
.nxi-h2{font:800 var(--nx-typo-seite)/1.15 var(--nx-f-titel);letter-spacing:-.4px;
  color:var(--nx-weiss);margin:0 0 10px}
.nxi-ab-sub{font:400 var(--nx-typo-kartenkopf)/1.6 var(--nx-f-text);color:var(--dim);
  margin:0 0 28px;max-width:680px}
.nxi-h3{font:800 var(--nx-typo-kartenkopf)/1.35 var(--nx-f-text);color:var(--nx-weiss);margin:0 0 6px}
.nxi-p{font:400 var(--nx-typo-text)/1.6 var(--nx-f-text);color:var(--dim);margin:0}

/* BILD · ein echtes Produktbild, Flaeche statt Rahmen, Unterzeile leise */
.nxi-bild{margin:0;border-radius:var(--nx-r-block);overflow:hidden;background:var(--nx-flaeche)}
.nxi-bild img{display:block;width:100%;height:auto}
.nxi-bild-unter{font:400 var(--nx-typo-meta)/1.5 var(--nx-f-text);color:var(--nx-leise);
  margin:12px 0 0;text-align:left}

/* KARTEN · Flaeche, eine Rundung, gleiche Hoehe je Reihe */
.nxi-raster{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.nxi-raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.nxi-karte{background:var(--nx-flaeche);border-radius:var(--nx-r-tafel);padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:6px;text-align:left}

/* STAND · verfuegbar, zum Launch, spaeter. Farbe nur im Punkt. */
.nxi-st{display:inline-flex;align-items:center;gap:8px;font:700 var(--nx-typo-meta) var(--nx-f-text);
  color:var(--dim);margin:0 0 6px}
.nxi-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nx-leise);flex:none}
.nxi-st.jetzt::before{background:var(--nx-gut)}
.nxi-st.spaeter::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--nx-leise)}

/* SCHLUSS · ein Einstieg */
.nxi-schluss{padding:64px 0 96px;text-align:center}
.nxi-schluss .nxi-knoepfe{justify-content:center}
.nxi-schluss .nxi-p{margin-top:20px}

@media(max-width:1080px){
  .nxi-h1{font-size:44px;letter-spacing:-1px}
  .nxi-raster,.nxi-raster.zwei{grid-template-columns:1fr}
  /* Seitenteile, die am Rechner nebeneinander stehen (Schritte, Kopf mit
     Betrag, Rollenkarten). Hier statt in den Seitendateien: zwei Schwellen
     fuer die Familie, keine je Seite. */
  .nxi-schritte{grid-template-columns:1fr}
  .nxi-sup-kopf{grid-template-columns:1fr;gap:28px}
  .nxi-pt-wahl,.nxi-pt-vier{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .nxi-kopf{padding:40px 0 28px;text-align:left}
  .nxi-kopf .nxi-knoepfe{justify-content:flex-start}
  .nxi-h1{font-size:var(--nx-typo-seite);letter-spacing:-.5px;margin-left:0}
  .nxi-lead{margin-left:0}
  .nxi-ab{padding:40px 0}
  .nxi-h2{font-size:var(--nx-typo-abschnitt)}
  .nxi-ab-sub{margin-bottom:20px}
  .nxi-karte{padding:18px}
  .nxi-bild{border-radius:var(--nx-r-tafel)}
  .nxi-schluss{padding:40px 0 64px;text-align:left}
  .nxi-schluss .nxi-knoepfe{justify-content:flex-start}
  .nxi-b{padding:0 16px}
  html body .nxi-sup .nx-supp-box.nx-supp-box{padding:20px;border-radius:var(--nx-r-tafel)}
  .nxi-sup-kurz{grid-template-columns:1fr}
  .nxi-sup-bed > div{grid-template-columns:1fr;gap:4px}
  .nxi-pt-wahl{grid-template-columns:1fr 1fr;gap:8px}
  .nxi-pt-wahl [role="tab"]{padding:14px}
  .nxi-pt-vier{grid-template-columns:1fr}
  .nxi-pt-tafel{padding-top:32px}
}