/* Trevera — Grundlagen: Tokens, Reset, Schale, Typografie, Bewegung.
   Leitidee: EINE Schrift, weisser Grund, ein dunkler Saal fuer die Clips, ein
   Blau, das nur Knoepfe und Verweise traegt. Der Beweis bekommt Dunkelheit,
   alles andere steht im Tageslicht.

   WAS AM 28.08.2026 ABENDS RAUSGEFLOGEN IST — und warum es hier steht, damit
   es niemand aus Versehen zurueckbaut:
   1. Das blaue Quadrat vor jedem Etikett samt der Versalzeile dahinter
      („CREATOR CAMPAIGNS", „THE WORK", „NEXT", „SITE"). Gedacht als Faden,
      der die Seite zusammennaeht. Gelesen wurde es als Baukasten: dasselbe
      Zeichen auf jedem Abschnitt, das nichts sagt und nichts tut. Eine
      Ueberschrift, die ihren Abschnitt benennt, braucht keine Vorankuendigung.
   2. Das warme Papier. Weiss ist die Ansage. */

@font-face {
  font-family: "Archivo";
  src: url(/assets/fonts/archivo-variable.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund:        #FFFFFF;
  --grund-leise:  #F7F8FA;
  --tinte:        #0B0E12;
  --tinte-karte:  #151A20;

  --text-hell:    #0B0E12;
  --text-leise:   #5A5F66;
  --text-dunkel:  #FFFFFF;
  --text-dunkel-leise: #A2A9B3;

  /* Ein Akzent, zwei Helligkeiten, umgeschaltet vom Grund und nicht vom
     Geschmack: Blau auf Tinte hat nur 3,0:1 und ist als Text verboten,
     Blau-hell auf Weiss 2,7:1 und ebenso. */
  /* DIE MARKENFARBE, entschieden von Max am 29.08.2026 nach einem Vergleich
     von vier Kandidaten am laufenden Stand (Blau, Orange, Navy, Magenta).

     WARUM ORANGE UND NICHT DAS BISHERIGE BLAU: Influvera hat seit heute seine
     echte Markenfarbe, und die ist blau (#4A9DF0, aus Logo und Instagram).
     Zwei blaue Marken verschwimmen — ausgerechnet im Schwester-Streifen, der
     sagen soll, dass hier die andere anfaengt. Blau und Orange sind
     Gegenfarben: nebeneinander liest sich das als EIN bewusstes Paar statt als
     zwei Zufaelle.

     Zwei Helligkeiten, umgeschaltet vom Grund: #C2410C traegt auf Weiss
     weisse Knopfschrift (5,1:1); auf Tinte waere es zu dunkel, dort steht
     #FF7A29 (7,3:1). */
  --orange:       #C2410C;
  --orange-hell:  #FF7A29;

  --linie-hell:   rgba(11, 14, 18, 0.10);
  --linie-dunkel: rgba(255, 255, 255, 0.14);

  /* Kundenfarben sind Zitate, keine Markenfarben. Sie sind ausschliesslich
     Kachelgrund und enden exakt am Radius ihrer Kachel. */
  --k-saily: #FFF500;
  --k-plaud: #30D462;
  --k-gamba: #0C0E16;

  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-riese: clamp(3rem, 0.60rem + 9.8vw, 9rem);
  --t-h1:    clamp(2.75rem, 0.90rem + 7.6vw, 7.5rem);
  --t-h2:    clamp(2rem, 1.05rem + 3.9vw, 4.5rem);
  --t-h3:    clamp(1.375rem, 1.14rem + 0.95vw, 2rem);
  --t-lead:  clamp(1.125rem, 0.99rem + 0.57vw, 1.5rem);
  --t-body:  clamp(1.0625rem, 1.04rem + 0.10vw, 1.125rem);
  --t-knopf: 0.8125rem;
  --t-nav:   0.9375rem;
  --t-meta:  0.875rem;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;

  --rand: clamp(20px, 5vw, 64px);
  --breite: 84rem;
  --takt: clamp(80px, 8vw, 140px);
  --kopfhoehe: 68px;

  --r-klein: 4px;
  --r-gross: 16px;
  --r-pille: 999px;

  --schwung: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* Weicher Sprung zu einem Abschnitt, und der Halt liegt unter der klebenden
     Kopfleiste statt darunter. Dasselbe Paar wie auf hhv-berlin.de. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--t-body);
  font-stretch: 100%;
  line-height: 1.6;
  color: var(--text-hell);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, figcaption { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- Die drei Gruende ----------
   Jede Sektion traegt genau eine dieser Klassen. Alles darin greift auf
   --akzent und --linie zu. Damit kann kein Bauteil je auf dem falschen
   Grund landen und dort unlesbar werden. */
.grund-hell {
  background: var(--grund);
  color: var(--text-hell);
  --akzent: var(--orange);
  --linie: var(--linie-hell);
  --leise: var(--text-leise);
}
.grund-dunkel {
  background: var(--tinte);
  color: var(--text-dunkel);
  --akzent: var(--orange-hell);
  --linie: var(--linie-dunkel);
  --leise: var(--text-dunkel-leise);
}
.grund-orange {
  background: var(--orange);
  color: #FFFFFF;
  --akzent: #FFFFFF;
  --linie: rgba(255, 255, 255, 0.30);
  --leise: rgba(255, 255, 255, 0.88);
}

.band { padding-block: var(--takt); }
.band--kurzunten { padding-bottom: clamp(48px, 5vw, 72px); }
.band--linie { border-top: 1px solid var(--linie); }

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-stretch: 86%;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.04em;  line-height: 0.90; }
h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.2; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 46ch;
  color: var(--leise, var(--text-leise));
}

.zahl {
  font-stretch: 82%;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
  line-height: 0.84;
}
.zahl__einheit {
  font-size: 0.42em;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.01em;
  margin-left: 0.1em;
}

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--akzent, var(--orange));
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--rand); top: 0;
  transform: translateY(-120%);
  z-index: 60;
  padding: var(--s-1) var(--s-2);
  background: var(--tinte);
  color: #FFFFFF;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ---------- Wortmarke ---------- */
.wortmarke {
  display: inline-block;
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  font-size: 1.375rem;
}

/* ---------- Kopfleiste ----------
   Milchglas statt Deckfarbe: Unter der Leiste laufen Clips und farbige
   Baender durch, und eine deckende Leiste schneidet sie hart ab. Wo der
   Weichzeichner fehlt, greift die deckende Ersatzfarbe. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--schwung), background-color 0.25s var(--schwung);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kopf {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
            backdrop-filter: saturate(180%) blur(18px);
  }
}
.kopf.abgesetzt { border-bottom-color: var(--linie-hell); }
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  min-height: var(--kopfhoehe);
  /* OHNE DIESES POLSTER STAND DIE PILLE AUF NULL. Bei umbrechender Leiste
     beginnt die erste Zeile buendig an der Oberkante — gemessen: Luft ueber
     dem Knopf 0 px, der Knopf schnitt oben an der Fensterkante ab. */
  padding-block: 10px;
  flex-wrap: wrap;
}
.kopf__nav { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.kopf__link {
  font-size: var(--t-nav);
  font-weight: 500;
  color: var(--text-leise);
  text-decoration: none;
}
.kopf__link:hover { color: var(--text-hell); }
.kopf__knopf { padding: 14px 20px 12px; }

/* AM TELEFON EINE ZEILE, NICHT ZWEI. Zweizeilig war die klebende Leiste
   104 px hoch — ein Achtel des Bildschirms, dauerhaft belegt, damit drei
   Sprungmarken mitfahren, die auf einer einseitigen Seite ohnehin nur
   weiterscrollen. Wortmarke und der eine Knopf, der etwas ausloest, passen
   nebeneinander; die drei Marken stehen weiterhin in der Fusszeile.
   Rechnung bei 390 px: Wortmarke 90 + Knopf 140 + Raender 40 = 270. Passt.
   Mit den drei Verweisen waeren es ueber 400 gewesen, also Umbruch. */
@media (max-width: 33.75rem) {
  :root { --kopfhoehe: 56px; }
  .kopf__nav { display: none; }
  .kopf__knopf { padding: 12px 18px 10px; }
}

/* ---------- Knoepfe ----------
   Das Polster ist oben zwei Pixel groesser: Versalien ohne Unterlaengen
   sitzen sonst zu tief. */
.knopf {
  position: relative;
  display: inline-block;
  padding: 19px 28px 17px;
  border: 1px solid var(--akzent, var(--orange));
  border-radius: var(--r-pille);
  background: var(--akzent, var(--orange));
  color: #FFFFFF;
  font-size: var(--t-knopf);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.22s var(--schwung), background-color 0.22s var(--schwung), border-color 0.22s var(--schwung);
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: #FFFFFF; transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }
.grund-dunkel .knopf { color: var(--tinte); }
.grund-dunkel .knopf:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--tinte); }
.grund-orange .knopf { background: var(--tinte); border-color: var(--tinte); color: #FFFFFF; }

.knopf--leise {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.knopf--leise:hover { background: var(--tinte); border-color: var(--tinte); color: #FFFFFF; }
.grund-dunkel .knopf--leise { color: var(--text-dunkel); }
.grund-dunkel .knopf--leise:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--tinte); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------- Sektionskopf ----------
   Ueberschrift und Beisatz stehen UNTEREINANDER, linksbuendig. Vorher stand
   der Beisatz weit rechts daneben, und dazwischen klaffte auf breiten
   Schirmen ein halber Bildschirm Leere. */
.kopfzeile { margin-bottom: clamp(32px, 4vw, 56px); max-width: 54rem; }
.kopfzeile .lead { margin-top: var(--s-3); }

/* ---------- Fusszeile ---------- */
.fuss { padding-block: var(--s-8); }
.fuss__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr; } }
.fuss__titel {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dunkel-leise);
  margin-bottom: var(--s-2);
}
.fuss__liste li + li { margin-top: 0.5rem; }
.fuss a { color: var(--text-dunkel-leise); text-decoration: none; }
.fuss a:hover { color: var(--text-dunkel); text-decoration: underline; }
.fuss__recht { margin-top: var(--s-6); font-size: var(--t-meta); color: var(--text-dunkel-leise); max-width: 70ch; }

/* ---------- Trefflaechen am Telefon ----------
   GEMESSEN, nicht geschaetzt (29.08.2026, Playwright auf 320, 390 und 430 px):
   Die Wortmarke im Kopf war 22 px hoch, die Verweise in der Fusszeile 19 px,
   der Sprunglink 43 px. Ein Finger trifft zuverlaessig ab etwa 44 px — darunter
   tippt man daneben, und zwar genau bei den Verweisen, die jemand am Telefon
   wirklich braucht (Impressum, Kontakt, die andere Marke).

   DER TRICK MIT DEM NEGATIVEN AUSSENABSTAND ist Absicht: Das Polster
   vergroessert die Trefflaeche, der gleich grosse negative Aussenabstand nimmt
   sie aus dem Layout wieder heraus. Die Leiste bleibt also genau so hoch wie
   vorher — nur der Finger hat mehr Platz.

   FLIESSTEXT-VERWEISE bleiben ausgenommen. Ein Verweis mitten im Satz laesst
   sich nicht vergroessern, ohne die Zeile auseinanderzureissen; dafuer gibt es
   in den Richtlinien ausdruecklich die Ausnahme fuer eingebettete Verweise. */
@media (max-width: 47.99rem) {
  .kopf__innen .wortmarke,
  .fuss__liste a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
  /* Ohne das stuenden die Zeilen nach dem Polster doppelt so weit auseinander. */
  .fuss__liste li + li { margin-top: 0.125rem; }

  .skip { padding: 12px var(--s-2); }
}

/* ---------- Auftritt beim Scrollen ----------
   Zwei Wege, ein Ergebnis. Wo der Browser `animation-timeline: view()` kennt,
   steuert der Scrollstand die Blende ganz ohne Skript. Wo nicht, faellt die
   Animation auf Dauer 0 mit `both` zurueck — das Element steht dann einfach
   fertig da. Nichts wartet auf JavaScript, nichts bleibt unsichtbar liegen. */
@keyframes auftritt { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  .auf {
    animation: auftritt linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 42%;
  }
  .auf--2 { animation-range: entry 10% entry 48%; }
  .auf--3 { animation-range: entry 16% entry 54%; }
  .auf--4 { animation-range: entry 22% entry 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .auf { animation: none; }
  * { scroll-behavior: auto !important; }
}