/* ==========================================================================
   the u:lab, gemeinsame Bausteine beider Prototypen
   Baut ausschliesslich auf tokens.css auf.
   Regeln: keine Verlaeufe, keine Schatten, keine Transparenzen auf Flaechen.
   ========================================================================== */

/* --- Grundlage ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--gewicht-normal);
  font-size: var(--grad-m);
  line-height: var(--zeilen-text);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

a { color: var(--interaktion); text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--interaktion);
  outline-offset: 4px;
}

.bahn {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Raster-Spalten duerfen nie breiter werden als ihr Platz, egal was drin
   steht. Sonst laesst sich die Seite seitlich verschieben. */
.bahn > * > * { min-width: 0; }

.sektion { padding-block: var(--sektion); }

/* Nur fuer Screenreader */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprung-Link fuer Tastaturbedienung */
.sprung {
  position: absolute; left: var(--r-2); top: -4rem;
  background: var(--schwarz); color: var(--sand);
  padding: var(--r-2) var(--r-3); z-index: 100;
  transition: top var(--zeit-kurz) var(--kurve);
}
.sprung:focus { top: var(--r-2); }

/* --- Typografie ---------------------------------------------------------
   Lautstaerke entsteht aus Groesse, Gewicht und Raum. Keine Serifen ausser
   bei Namen (.wortmarke, .signatur-titel).
   ------------------------------------------------------------------------ */

.mega, .xxl, .xl {
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilen-eng);
  letter-spacing: var(--track-mega);
  text-wrap: balance;
}
.mega { font-size: var(--grad-mega); }
.xxl  { font-size: var(--grad-xxl); }
.xl   { font-size: var(--grad-xl); line-height: var(--zeilen-mid); }

.lead {
  font-size: var(--grad-l);
  line-height: var(--zeilen-mid);
  max-width: var(--mass);
}

.text { max-width: var(--mass); }

.label {
  font-size: var(--grad-mini);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
}

/* Abril Fatface: ausschliesslich Namen. */
.wortmarke, .signatur-titel {
  font-family: var(--font-namen);
  font-weight: 400;
  letter-spacing: 0;
}
.wortmarke { font-size: 1.5rem; line-height: 1; color: var(--text); }
.signatur-titel { font-size: var(--grad-xl); line-height: 1.1; }

/* --- Das Punkt-Element --------------------------------------------------
   Der Doppelpunkt der Wortmarke als durchgaengiges Gestaltungselement.
   Maximal drei pro Layout (CD-Regel).
   ------------------------------------------------------------------------ */

.punkt {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: var(--radius-knopf);
  background: var(--interaktion);
  vertical-align: baseline;
  flex: none;
}
.punkt--gross { width: 1rem; height: 1rem; }
.punkt--royal { background: var(--royal); }
.punkt--emerald { background: var(--emerald); }
.punkt--sand { background: var(--sand); }
.punkt--schwarz { background: var(--schwarz); }

/* Abschnitts-Marker: Punkt plus kurzes Versalien-Label */
.marker {
  display: flex; align-items: center; gap: var(--r-2);
  margin-bottom: var(--r-4);
}

/* --- Der atmende Punkt --------------------------------------------------
   Sechs-Sekunden-Zyklus: vier Sekunden weiten, zwei schliessen faellt
   unruhig aus. Deshalb symmetrisch und sehr langsam.
   Bei prefers-reduced-motion steht er still.
   ------------------------------------------------------------------------ */

.atem {
  width: clamp(11rem, 26vw, 20rem);
  aspect-ratio: 1;
  border-radius: var(--radius-knopf);
  background: var(--pink);
  animation: atmen var(--atem-zyklus) ease-in-out infinite;
  transform-origin: center;
  flex: none;
}
.atem--royal { background: var(--royal); }
.atem--tomato { background: var(--tomato); }
.atem--emerald { background: var(--emerald); }

@keyframes atmen {
  0%, 100% { transform: scale(0.82); }
  50%      { transform: scale(1); }
}

/* --- Knoepfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; gap: var(--r-2);
  padding: 1rem 1.75rem;
  border: var(--haarlinie) solid transparent;
  border-radius: var(--radius-knopf);
  font-size: var(--grad-s);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--zeit-kurz) var(--kurve),
              color var(--zeit-kurz) var(--kurve),
              border-color var(--zeit-kurz) var(--kurve);
}

/* Tomato ist Interaktionsfarbe. Der Hauptknopf traegt sie.
   Die Schrift steht schwarz darauf, nicht weiss: Weiss auf Tomato erreicht
   nur einen Kontrast von 3.8, Schwarz auf Tomato 5.5. Legibility first,
   so steht es auch im CD. */
.knopf--haupt {
  background: var(--tomato); color: var(--schwarz);
  border-color: var(--tomato);
}
.knopf--haupt:hover { background: var(--schwarz); border-color: var(--schwarz); }

.knopf--linie {
  background: transparent; color: var(--text);
  border-color: currentColor;
}
.knopf--linie:hover { background: var(--schwarz); color: var(--sand); border-color: var(--schwarz); }

/* Auf lauten Farbflaechen wird nicht mit Tomato gearbeitet, sonst stehen
   zwei laute Farben nebeneinander. Dort traegt Sand die Interaktion. */
.knopf--auf-farbe {
  background: var(--sand); color: var(--schwarz); border-color: var(--sand);
}
.knopf--auf-farbe:hover { background: var(--weiss); border-color: var(--weiss); }

.knopf--linie-hell { background: transparent; color: var(--sand); border-color: var(--sand); }
.knopf--linie-hell:hover { background: var(--sand); color: var(--schwarz); }

/* Micro-Button aus dem CD: ein Punkt plus ein bis drei Worte */
.mikro {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--grad-s); font-weight: var(--gewicht-halbfett);
  color: var(--text);
  border-bottom: var(--haarlinie) solid transparent;
  transition: border-color var(--zeit-kurz) var(--kurve);
}
.mikro:hover { border-bottom-color: currentColor; }
.mikro--hell { color: var(--sand); }

/* --- Text-Highlights ----------------------------------------------------
   Zwei Systeme, je Prototyp eines. Kein Verlauf, keine Transparenz.
   ------------------------------------------------------------------------ */

/* Variante A: praeziser Marker-Block hinter dem Wort */
.hl-block {
  background: var(--tomato);
  color: var(--weiss);
  padding: 0.04em 0.22em 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-block--royal { background: var(--royal); color: var(--sand); }

/* Variante B: dicke Unterstreichung.
   Das Polster unten schiebt die Linie unter die Unterlaengen, sonst
   schneidet sie bei grossen Graden durch das g und das p. */
.hl-strich {
  box-shadow: inset 0 -0.13em 0 0 var(--tomato);
  padding-bottom: 0.16em;
}
.hl-strich--pink { box-shadow: inset 0 -0.16em 0 0 var(--pink); }
.hl-strich--sand { box-shadow: inset 0 -0.16em 0 0 var(--sand); }

/* --- Kopf- und Fusszeile ------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--grund);
  border-bottom: var(--haarlinie) solid var(--sand-tief);
}
.kopf__inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-4);
  padding-block: var(--r-3);
}
.kopf__nav {
  display: flex; align-items: center; gap: var(--r-4);
  font-size: var(--grad-s);
}
.kopf__nav a { color: var(--text); border-bottom: var(--haarlinie) solid transparent; }
/* Der Hover arbeitet mit einer Linie statt mit Tomato-Schrift: kleiner
   Tomato-Text auf Sand kaeme nur auf Kontrast 3.1. */
.kopf__nav a:hover { border-bottom-color: currentColor; }
.kopf__rechts { display: flex; align-items: center; gap: var(--r-3); }

.sprachwahl {
  display: flex; gap: 0.4rem;
  font-size: var(--grad-mini); font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--track-versal);
}
/* Die aktive Sprache wird ueber Gewicht und Linie markiert, nicht ueber
   Farbe allein. Das bleibt auch fuer Farbfehlsichtige erkennbar. */
.sprachwahl span, .sprachwahl a { color: var(--text); }
.sprachwahl [aria-current] {
  font-weight: var(--gewicht-fett);
  border-bottom: 2px solid currentColor;
}

.fuss {
  background: var(--schwarz); color: var(--sand);
  padding-block: var(--r-6) var(--r-4);
}
.fuss a { color: var(--sand); }
.fuss a:hover { color: var(--pink); }
.fuss__spalten {
  display: grid; gap: var(--r-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.fuss__titel {
  font-size: var(--grad-mini); font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--track-versal); text-transform: uppercase;
  margin-bottom: var(--r-2);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.55rem; font-size: var(--grad-s); }
.fuss__unten {
  margin-top: var(--r-6); padding-top: var(--r-3);
  border-top: var(--haarlinie) solid #3a3a3a;
  font-size: var(--grad-mini);
  display: flex; flex-wrap: wrap; gap: var(--r-3); justify-content: space-between;
}

/* --- Zahlenband ---------------------------------------------------------- */

.zahlen {
  display: grid; gap: var(--r-5);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.zahl__wert {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: var(--gewicht-fett);
  line-height: 1;
  letter-spacing: var(--track-mega);
  display: flex; align-items: baseline; gap: 0.3rem;
}
.zahl__text {
  margin-top: var(--r-2);
  font-size: var(--grad-s);
  line-height: 1.45;
  max-width: 15rem;
}

/* --- Platzhalter-Kennzeichnung ------------------------------------------
   Muss auffallen. Nichts soll versehentlich als fertig durchgehen.
   ------------------------------------------------------------------------ */

.ph {
  font-size: var(--grad-mini);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  border: var(--haarlinie) dashed currentColor;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-knopf);
  vertical-align: middle;
  /* Muss umbrechen duerfen. Ohne das sprengen die langen Hinweise auf
     schmalen Bildschirmen das Raster und die Seite laesst sich seitlich
     verschieben. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Scroll-Reveal -------------------------------------------------------
   Nur wenn JavaScript laeuft, wird ueberhaupt versteckt. Sonst waeren die
   Sektionen bei einem Skript-Fehler dauerhaft unsichtbar.
   ------------------------------------------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--zeit-lang) var(--kurve),
              transform var(--zeit-lang) var(--kurve);
}
.js .reveal.ist-da { opacity: 1; transform: none; }

/* --- Punkt-Cursor mit Spotlight (nur Desktop, nur Zeigegeraet) ----------- */

/* Gefuellter, weicher Punkt wie eine Textmarker-Spitze. Kein Ring: der
   Punkt soll ueber den Text fahren und ihn kurz einfaerben, nicht ihn
   umkreisen. Die Transparenz ist hier bewusst erlaubt, weil das Element
   kein Gestaltungselement der Flaeche ist, sondern der Zeiger selbst.
   Briefing Abschnitt 11: ein weicher Punkt als dezenter Spotlight. */
.cursor-punkt {
  position: fixed; top: 0; left: 0;
  width: 2.75rem; height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border-radius: var(--radius-knopf);
  background: var(--tomato);
  opacity: 0.22;
  pointer-events: none;
  z-index: 90;
  display: none;
  transition: width var(--zeit-kurz) var(--kurve),
              height var(--zeit-kurz) var(--kurve),
              margin var(--zeit-kurz) var(--kurve),
              opacity var(--zeit-kurz) var(--kurve);
}
/* Ueber Klickbarem wird er groesser und eine Spur satter. */
.cursor-punkt.aktiv {
  width: 4.25rem; height: 4.25rem;
  margin: -2.125rem 0 0 -2.125rem;
  opacity: 0.32;
}

@media (hover: hover) and (pointer: fine) and (min-width: 62rem) {
  .cursor-punkt { display: block; }
}

/* --- Laufband ------------------------------------------------------------ */

.laufband {
  overflow: hidden;
  border-block: var(--haarlinie) solid currentColor;
  padding-block: var(--r-3);
}
.laufband__spur {
  display: flex; gap: var(--r-4); width: max-content;
  animation: laufen 38s linear infinite;
}
.laufband__spur > span {
  display: flex; align-items: center; gap: var(--r-4);
  font-size: var(--grad-xl);
  font-weight: var(--gewicht-fett);
  letter-spacing: var(--track-mega);
  white-space: nowrap;
}
@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Logo-Wall -----------------------------------------------------------
   Dasselbe durchlaufende Prinzip wie das Laufband, aber statt Claims
   laufen hier Kundenlogos. Ruhig gehalten: gleiche Hoehe, ein Ton, damit
   die Wand als Beweisband wirkt und nicht als Jahrmarkt.
   Nur echte Kunden mit Verwendungserlaubnis. Im Prototyp Platzhalter.
   ------------------------------------------------------------------------ */

.logowall {
  overflow: hidden;
  border-block: var(--haarlinie) solid var(--sand-tief);
  padding-block: var(--r-4);
}
.logowall__spur {
  display: flex; align-items: center; gap: var(--r-6);
  width: max-content;
  animation: laufen 42s linear infinite;
}
.logowall__spur > span {
  display: flex; align-items: center; gap: var(--r-6);
}
/* Ein Platzhalter-Logo: neutrale Wortmarke, einheitliche Hoehe.
   Echte Logos ersetzen das als SVG oder PNG. */
.logo-ph {
  display: flex; align-items: center; justify-content: center;
  height: 2.25rem;
  padding-inline: var(--r-2);
  font-size: 1.1rem;
  font-weight: var(--gewicht-fett);
  letter-spacing: 0.02em;
  color: #9a9080;                 /* gedaempft, damit die Wand ruhig bleibt */
  white-space: nowrap;
  flex: none;
}
.logowall__label {
  display: block;
  text-align: center;
  margin-bottom: var(--r-3);
}

/* --- Bewegungsreduktion --------------------------------------------------
   Alles steht still. Nichts wird dadurch unbrauchbar.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .atem { animation: none; transform: scale(0.92); }
  .laufband__spur, .logowall__spur { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cursor-punkt { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 61.9375rem) {
  .kopf__nav { display: none; }
}