/* NoBricks Webseite — Seitenlayout.
   Ergänzt brand/nobricks.css. Nur Tokens verwenden, keine eigenen Farben, Schriften oder Abstände.
   Bewegung nur unter .motion (wird im <head> gesetzt, wenn „Bewegung reduzieren“ aus ist). */

h1, h2, h3, p, ul, dl, dd { margin: 0; }
/* Lange deutsche Wörter in der großen Schrift notfalls umbrechen, statt über den Rand zu laufen (Handy).
   Für saubere Trennstriche im Text &shy; setzen. */
.display { overflow-wrap: break-word; }

/* ---------- Kopf ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.site-head.is-scrolled { background: var(--surface); border-bottom-color: var(--brick); }
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.site-head__logo { display: block; }
.site-head__logo img { display: block; height: 24px; width: auto; }
/* Lesefortschritt als Sage-Fuge unter dem Kopf */
.site-head__fortschritt {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--sage);
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.site-head.is-scrolled .site-head__fortschritt { opacity: 1; }
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a { font-size: 14px; line-height: 20px; font-weight: 500; }
.site-nav__extra { display: none; }
@media (min-width: 768px) { .site-nav__extra { display: inline; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-6) var(--space-7); }
.hero .nb-mauerband { margin-bottom: var(--space-6); }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 760px; }
.hero__lead { max-width: 60ch; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Abschnitte ---------- */
.section { border-top: 1px solid var(--brick); }
.section__head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); max-width: 760px; }
.section__head p { color: var(--muted); max-width: 60ch; }

/* Leitsatz: Wörter leuchten beim Scrollen von Stein-Grau zu Weiß auf */
.leitsatz { max-width: 1000px; }
.leitsatz__wort { color: color-mix(in srgb, var(--ink) calc(var(--an, 1) * 100%), var(--brick)); }

.cols { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cols__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); max-width: 60ch; padding-top: var(--space-4); }
.cols__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--brick);
  transform-origin: left;
}
.cols__item p { color: var(--muted); }

.cards { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.card p { color: var(--muted); }

/* ---------- Verkaufskanäle: große Namen in Zeilen, getrennt wie Steinreihen ---------- */
.kanaele { list-style: none; padding: 0; border-top: 1px solid var(--brick); }
.kanal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--brick);
}
.kanal__name { overflow-wrap: anywhere; }
.kanaele__frueher { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); color: var(--muted); }

/* ---------- Mauer, die sich beim Scrollen aufbaut ----------
   Gleiches Raster wie Logo und Mauerband (Stein 29 × 12, Fuge 4, Versatz 16,5), nur größer.
   Sechs Reihen, das Logo sitzt als Ausschnitt in Reihe 3 und 4. */
.mauer-bau { --u: 3px; overflow: hidden; padding-block: var(--space-7); background: var(--surface); }
@media (min-width: 768px) { .mauer-bau { --u: 4px; } }
.mauer-bau__wand { position: relative; height: calc(92 * var(--u)); }
.mauer-bau__stein { position: absolute; background: var(--brick); }
.mauer-bau__logo { position: absolute; display: block; width: calc(62 * var(--u)); height: calc(28 * var(--u)); }
.motion .mauer-bau__stein {
  opacity: 0;
  transform: translateY(calc(-20 * var(--u)));
  transition: opacity 0.25s ease-out, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.motion .mauer-bau__stein.liegt { opacity: 1; transform: none; }
.motion .mauer-bau__logo { opacity: 0; transition: opacity 0.6s ease-out; }
.motion .mauer-bau__logo.liegt { opacity: 1; }

/* ---------- Laufband: zwei versetzte Wortreihen wie eine Mauer ---------- */
.laufband {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-top: 1px solid var(--brick);
  overflow: hidden;
}
.laufband__reihe {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  white-space: nowrap;
  transform: translateX(calc(var(--versatz, 0.5) * -25%));
}
.laufband__reihe--versetzt { transform: translateX(calc(-30% + var(--versatz, 0.5) * 20%)); }
/* Offene Wörter wie der offene Stein im Logo */
.laufband__offen { color: transparent; -webkit-text-stroke: 1.5px var(--sage); }

/* ---------- Kontakt ---------- */
/* Kontakt als einzige große Farbfläche in Sage: Schrift, Linien und Button in --on-sage */
.kontakt { background: var(--sage); color: var(--on-sage); }
.kontakt .nb-label,
.kontakt .section__head p,
.kontakt .kontakt__daten dt { color: var(--on-sage); }
.kontakt .nb-label--strich::before { background: var(--on-sage); }
.kontakt .nb-link { color: var(--on-sage); text-decoration-color: var(--on-sage); }
.kontakt .nb-link:hover { color: var(--on-sage); text-decoration-thickness: 3px; }
.kontakt .nb-btn--secondary { color: var(--on-sage); border-color: var(--on-sage); }
.kontakt .nb-btn--secondary:hover { background: var(--on-sage); color: var(--sage); }
.kontakt :focus-visible { outline-color: var(--on-sage); }
.kontakt__grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .kontakt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.kontakt__person { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.kontakt__daten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
}
.kontakt__daten dt { color: var(--muted); }
.kontakt__actions { margin-top: var(--space-5); }

/* ---------- Rechtsseiten ---------- */
.legal { display: flex; flex-direction: column; gap: var(--space-5); max-width: 760px; }
.legal section { display: flex; flex-direction: column; gap: var(--space-2); }
.legal p, .legal li { max-width: 70ch; }
.legal ul { padding-left: 1.2em; }

/* ---------- Fuß ---------- */
.site-foot { border-top: 1px solid var(--brick); padding-top: var(--space-6); color: var(--muted); overflow: hidden; }
.site-foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--brick);
}
.site-foot__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); }
.site-foot__links { display: flex; gap: var(--space-4); }

/* Versandetikett mit der USt-IdNr. als Barcode */
.etikett {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
.etikett__code { position: relative; height: 56px; }
.etikett__code:empty { display: none; }
.etikett__code svg { display: block; width: 100%; height: 100%; }
.etikett__text {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Wortmarke ganz unten, steigt beim Erreichen des Seitenendes auf */
.schlusswort { padding: var(--space-5) var(--space-4); }
@media (min-width: 768px) { .schlusswort { padding-inline: var(--space-5); } }
.schlusswort img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-inline: auto;
  transform: translateY(calc((1 - var(--schluss, 1)) * 40%));
}

/* ---------- Bewegung ---------- */
.motion .hero__text {
  transform: translateY(calc(var(--hero, 0) * -64px));
  opacity: calc(1 - var(--hero, 0) * 0.9);
}
.motion .leitsatz__wort { --an: 0; }

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Akzentstrich wächst, wenn der Abschnitt erscheint */
.motion [data-reveal] .nb-label--strich::before,
.motion .nb-label--strich[data-reveal]::before {
  width: 0;
  margin-right: 0;
  transition: width 0.5s ease 0.3s, margin-right 0.5s ease 0.3s;
}
.motion [data-reveal].is-in .nb-label--strich::before,
.motion .nb-label--strich[data-reveal].is-in::before { width: 0.875em; margin-right: 0.75em; }

/* Trennlinie über den Leistungen zieht sich auf */
.motion .cols__item::before { transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.motion .cols__item.is-in::before { transform: none; }

/* Barcode wird wie beim Scannen von links aufgebaut */
.motion .etikett__code svg { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.motion .etikett.is-in .etikett__code svg { clip-path: inset(0 0 0 0); }
.motion .etikett__code::after {
  content: "";
  position: absolute;
  top: calc(var(--space-1) * -1);
  bottom: calc(var(--space-1) * -1);
  left: 0;
  width: 2px;
  background: var(--sage);
  opacity: 0;
}
.motion .etikett.is-in .etikett__code::after { animation: scan 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
@keyframes scan {
  0% { left: 0; opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}