/* ===========================================================================
   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; } }