/* ===========================================================================
   NovaBooth — site.css
   Dichte und Geruest der oeffentlichen Website. Ladereihenfolge Nummer 4.

   Laedt NIE gemeinsam mit app.css. Fluide Schrift, grosszuegige Abstaende —
   hier waere Dichte Geiz, im Portal waere Grosszuegigkeit Verschwendung.

   KEIN HEXWERT IN DIESER DATEI.
   =========================================================================== */

html {
  font-size: 17px;
  scroll-padding-top: calc(var(--nb-h-kopf-site) + var(--nb-a-3));
}

body {
  background: var(--nb-grund);
  color: var(--nb-text);
  line-height: 1.65;
}

/* --- Schriftleiter, fluid ------------------------------------------------
   Kein Hero ueber 50px. Grosse Zahlen wirken wie Werbung, und die
   Zielgruppe kauft keine Werbung — sie kauft Verlaesslichkeit. */
:root {
  --nb-t-xs:   .8125rem;
  --nb-t-sm:   .875rem;
  --nb-t-base: 1rem;
  --nb-t-lg:   1.125rem;
  --nb-t-xl:   clamp(1.25rem, 1.15rem + .45vw, 1.4rem);
  --nb-t-2xl:  clamp(1.5rem, 1.3rem + .9vw, 1.85rem);
  --nb-t-3xl:  clamp(1.85rem, 1.5rem + 1.5vw, 2.4rem);
  --nb-t-hero: clamp(2.2rem, 1.7rem + 2.4vw, 3.1rem);
}

h1 { font-size: var(--nb-t-3xl); line-height: 1.2; letter-spacing: -.011em; }
h2 { font-size: var(--nb-t-2xl); line-height: 1.25; letter-spacing: -.011em; }
h3 { font-size: var(--nb-t-xl);  line-height: 1.35; letter-spacing: -.006em; }
p  { max-width: var(--nb-breite-text); }

/* --- Geruest -------------------------------------------------------------- */

.nb-band { padding-block: clamp(56px, 7vw, 96px); }
.nb-band--tief { background: var(--nb-flaeche-tief); }

.nb-inhalt {
  width: min(var(--nb-breite), 100% - 2 * clamp(20px, 4vw, 32px));
  margin-inline: auto;
}

.nb-kopfleiste--site {
  height: var(--nb-h-kopf-site);
  padding-inline: clamp(20px, 4vw, 32px);
  /* Keine Transparenz: eine durchscheinende Leiste ueber wechselnden
     Inhalten hat keinen berechenbaren Kontrast. */
  background: var(--nb-flaeche);
}
.nb-kopfleiste--site nav { display: flex; gap: var(--nb-a-5); margin-inline: auto; }
.nb-kopfleiste--site nav a { font-size: var(--nb-t-sm); font-weight: 500; }
.nb-kopfleiste--site nav a:hover { color: var(--nb-primaer-lesbar); }

/* --- Hero ----------------------------------------------------------------
   Der zweite von genau drei erlaubten Orten fuer den Lichtschein. */
.nb-hero { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.nb-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: var(--nb-lichtschein);
  pointer-events: none;
  z-index: -1;
}
.nb-hero h1 { font-size: var(--nb-t-hero); font-weight: 700; letter-spacing: -.011em; }
.nb-hero p  { font-size: var(--nb-t-lg); color: var(--nb-text-leise); margin-block-start: var(--nb-a-4); }

.nb-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-a-3);
  margin-block-start: var(--nb-a-6);
}
.nb-hero__aktionen .nb-knopf { height: var(--nb-h-bedien-touch); padding-inline: var(--nb-a-5); }

/* --- Preistabelle --------------------------------------------------------
   Der Akzent liegt NIE als Flaeche hinter einem Tarif. Der hervorgehobene
   Tarif traegt eine kraeftigere Linie, keinen Farbblock — sonst wirkt die
   Seite wie ein Sonderangebot statt wie ein Werkzeug. */
.nb-tarife { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             gap: var(--nb-a-4); align-items: start; }
.nb-tarif { padding: var(--nb-a-6); border: var(--nb-rahmen); border-radius: var(--nb-r);
            background: var(--nb-flaeche); }
.nb-tarif.is-hervor { border-color: var(--nb-primaer-lesbar); border-width: 2px; }
.nb-tarif__preis { font-size: var(--nb-t-3xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.nb-tarif__einheit { font-size: var(--nb-t-sm); color: var(--nb-text-leise); }
.nb-tarif ul { display: flex; flex-direction: column; gap: var(--nb-a-2);
               margin-block: var(--nb-a-5); font-size: var(--nb-t-sm); }
.nb-tarif li { display: flex; align-items: flex-start; gap: var(--nb-a-2); }

/* Nicht enthalten: durchgestrichen waere Haeme. Leise und ohne Haken. */
.nb-tarif li.is-fehlt { color: var(--nb-text-leise); }

/* --- Merkmalskarten ------------------------------------------------------- */
.nb-merkmale { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
               gap: var(--nb-a-5); }
.nb-merkmal__titel { font-size: var(--nb-t-lg); margin-block: var(--nb-a-3) var(--nb-a-2); }
.nb-merkmal p { font-size: var(--nb-t-sm); color: var(--nb-text-leise); }

/* --- Fragen --------------------------------------------------------------- */
.nb-frage { border-block-end: var(--nb-rahmen); }
.nb-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-a-3);
  padding-block: var(--nb-a-4); font-weight: 600; cursor: pointer; list-style: none;
}
.nb-frage summary::-webkit-details-marker { display: none; }
.nb-frage[open] summary { color: var(--nb-primaer-lesbar); }
.nb-frage__text { padding-block-end: var(--nb-a-4); font-size: var(--nb-t-sm);
                  color: var(--nb-text-leise); }

/* --- Fussbereich ---------------------------------------------------------- */
.nb-fuss { padding-block: var(--nb-a-9); border-block-start: var(--nb-rahmen);
           background: var(--nb-flaeche); font-size: var(--nb-t-sm); }
.nb-fuss h4 { font-size: var(--nb-t-xs); text-transform: uppercase; letter-spacing: .06em;
              line-height: 1.35; color: var(--nb-text-leise); margin-block-end: var(--nb-a-3); }
.nb-fuss a { color: var(--nb-text-leise); }
.nb-fuss a:hover { color: var(--nb-text); text-decoration: underline; }

/* --- Erscheinen ----------------------------------------------------------
   Hoechstens vier Elemente je Abschnitt, Staffelung hoechstens 60ms.
   Auf der Website erlaubt, im Portal nie: dort sollen Listen sofort da sein. */
@media (prefers-reduced-motion: no-preference) {
  .nb-auf { opacity: 0; translate: 0 12px; animation: nb-auf 320ms var(--nb-ease-aus) forwards; }
  .nb-auf:nth-child(2) { animation-delay: 60ms; }
  .nb-auf:nth-child(3) { animation-delay: 120ms; }
  .nb-auf:nth-child(4) { animation-delay: 180ms; }
}
@keyframes nb-auf { to { opacity: 1; translate: 0 0; } }

/* --- Software-Ansichten (stilisierte Mockups, keine Fotos) ----------------
   Reines CSS/SVG in Marken-Tokens: der Markenwechsel faerbt sie automatisch
   mit. KEIN Lichtschein hier — der bleibt dem Hero vorbehalten. Der Rahmen
   traegt den Kontrast, nicht eine Fuellung. */
.nb-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.nb-schau { display: grid; grid-template-columns: 1fr 1fr;
            gap: clamp(32px, 5vw, 72px); align-items: center; }
.nb-schau + .nb-schau { margin-block-start: clamp(48px, 6vw, 88px); }
.nb-schau h2 { font-size: var(--nb-t-2xl); font-weight: 600; }
.nb-schau > div > p { color: var(--nb-text-leise); margin-block-start: var(--nb-a-3);
                      line-height: 1.7; font-size: var(--nb-t-sm); }
.nb-schau__liste { display: flex; flex-direction: column; gap: var(--nb-a-2);
                   margin-block-start: var(--nb-a-4); font-size: var(--nb-t-sm); }
.nb-schau__liste li { display: flex; gap: var(--nb-a-2); align-items: flex-start; }
.nb-schau__liste li > span { color: var(--nb-ok-vg); flex: 0 0 auto; }
@media (max-width: 860px) {
  .nb-hero__grid { grid-template-columns: 1fr; }
  .nb-schau { grid-template-columns: 1fr; }
  .nb-schau__bild { order: -1; }
}

/* Geraeterahmen */
.nb-geraet { border: var(--nb-rahmen); border-radius: 16px; background: var(--nb-flaeche);
             box-shadow: var(--nb-schatten-3); overflow: hidden; }
.nb-geraet--tablet  { max-width: 540px; margin-inline: auto; }
.nb-geraet--phone   { max-width: 236px; margin-inline: auto; border-radius: 28px; padding: 8px; }
.nb-geraet--browser { max-width: 560px; margin-inline: auto; }

/* Browserleiste */
.nb-chrom { display: flex; align-items: center; gap: var(--nb-a-2);
            padding: var(--nb-a-2) var(--nb-a-3); border-block-end: var(--nb-rahmen);
            background: var(--nb-flaeche-tief); }
.nb-chrom i { width: 9px; height: 9px; border-radius: 999px; background: var(--nb-linie); }
.nb-chrom__adresse { flex: 1; margin-inline-start: var(--nb-a-2); height: 22px; border-radius: 999px;
                     border: var(--nb-rahmen); background: var(--nb-flaeche);
                     display: flex; align-items: center; padding-inline: var(--nb-a-3);
                     font-size: 11px; color: var(--nb-text-leise); }

/* Bildschirmflaeche */
.nb-screen { position: relative; background: var(--nb-flaeche-tief); padding: var(--nb-a-4); }
.nb-screen--kamera { aspect-ratio: 4/3; display: grid; place-items: center; }
.nb-phone-screen { border-radius: 20px; overflow: hidden; border: var(--nb-rahmen);
                   background: var(--nb-flaeche-tief); }
.nb-phone-kerbe { height: 18px; display: flex; justify-content: center; }
.nb-phone-kerbe::before { content: ""; width: 84px; height: 6px; border-radius: 999px;
                          background: var(--nb-linie); align-self: center; }

/* Countdown-Ring */
.nb-ring text { fill: var(--nb-text); }

/* Kacheln / Fotostreifen (abstrakte Platzhalter, keine echten Bilder) */
.nb-kacheln { display: grid; gap: 6px; }
.nb-kacheln--strip { grid-template-columns: repeat(4, 1fr); }
.nb-kacheln--zwei  { grid-template-columns: repeat(2, 1fr); }
.nb-kachel { aspect-ratio: 1/1; border-radius: 8px; border: var(--nb-rahmen);
             background: linear-gradient(135deg, var(--nb-flaeche-hover), var(--nb-flaeche)); }
.nb-kachel--quer { aspect-ratio: 3/2; }

/* Kleine UI-Bausteine im Screen */
.nb-ui-titel { font-size: 12px; font-weight: 600; color: var(--nb-text); margin-block-end: var(--nb-a-2); }
.nb-ui-zeile { height: 30px; border-radius: var(--nb-r-sm); border: var(--nb-rahmen);
               background: var(--nb-flaeche); display: flex; align-items: center;
               padding-inline: var(--nb-a-3); font-size: 11px; color: var(--nb-text-leise);
               margin-block-end: 6px; }
.nb-ui-knopf { height: 32px; border-radius: var(--nb-r-sm); border: 2px solid var(--nb-primaer-lesbar);
               color: var(--nb-primaer-lesbar); display: flex; align-items: center;
               justify-content: center; font-size: 12px; font-weight: 600; }
.nb-ui-preis { font-size: 18px; font-weight: 700; color: var(--nb-text); font-variant-numeric: tabular-nums; }
.nb-ui-qr { border: var(--nb-rahmen); border-radius: 8px; padding: 4px; background: var(--nb-flaeche); }