/* Strecken-Rahmen der Verkaufen-Seite im JTL-Shop.
 *
 * Portiert aus assets/nb-strecke-kopf.css und layout/nb-strecke.liquid des
 * Shopify-Themes. Daniel am 21.09.2026, Vorbild Back Market: auf einer Seite,
 * die eine Strecke fuehrt, steht kein Shop-Kopf mit Suche, Menue und Warenkorb.
 * Nur eine weisse Leiste mit der Wortmarke in der Mitte.
 *
 * Diese Datei laedt ausschliesslich auf der Verkaufen-Seite, siehe
 * layout/header.tpl. Sie fasst kein NOVA-Stylesheet an.
 *
 * Die Hoehe 64 px steht auch in --header-height, damit die Regel fuer den
 * festen Viewport in nb-tradein.css Zeile 32 unveraendert weiterrechnet.
 * Wer hier die Hoehe aendert, aendert sie dort mit.
 */

:root { --header-height: 64px; }

/* Klebt oben wie der Kopf jeder anderen Seite und wie bei Back Market (Daniel
   24.09.2026). Ohne das rutschte das Logo beim Scrollen unter die Kamera-Insel.
   Safari am iPhone faerbt ausserdem den Bereich um die Uhrzeit nach einem festen
   Element am oberen Rand. Steht dort keins, nimmt er die Seitenfarbe, und die
   ist hier Grau. Mit dem klebenden Kopf wird der Bereich weiss wie der Kopf. */
.nb-strecke-kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-bottom: 1px solid var(--nb-border-hairline, #E3E6EC);
}

.nb-strecke-kopf__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--nb-radius-input, 12px);
}

.nb-strecke-kopf__logo img {
  display: block;
  width: auto;
  height: 30px;
}

/* Eine Hoehe auf allen Bildschirmen, mit Absicht. Eine Media-Abfrage waere hier
   nur an den drei Schwellen 768, 1100 und 1400 erlaubt (Grammatik G2), und eine
   flachere Leiste am Handy wuerde --header-height auseinanderlaufen lassen.
   64 px stehen ueberall. */

/* NOVA setzt auf #content-wrapper und #content die Bootstrap-Abstaende des
   Shops. Der Rechner traegt seine Breite und seine Abstaende selbst, deshalb
   wird der Rahmen hier auf null gesetzt. Beide IDs gehoeren zu NOVA, die
   Regeln stehen aber in unserer Datei und laden nur auf dieser einen Seite. */
.nb-strecke-rahmen,
.nb-strecke-rahmen #content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Seitengrund der Strecke bis zum Rand. Safari am iPhone zeigt hinter seiner
   Adressleiste und beim Ueberscrollen die Farbe von html und body, und die war
   weiss, waehrend die Strecke auf surface-secondary steht (Daniel 24.09.2026,
   "das Ende der Seite hat eine falsche Farbe"). */
html:has(body.nb-ist-strecke),
body.nb-ist-strecke { background: var(--nb-surface-secondary, #F6F7FB); }

/* Sprungziele und die klebende Fragen-Ueberschrift (ab 1100 px) enden unter
   dem klebenden Kopf, nicht dahinter. */
html:has(body.nb-ist-strecke) { scroll-padding-top: var(--header-height); }
@media (min-width: 1100px) {
  .nb-ist-strecke .nb-fragen-karte__kopf { top: calc(var(--header-height) + var(--nb-space-m)); }
}