/* ============================================================
   Olevon Studio — Bausteine
   Navigation · Buttons · Menü · Intro · Karten · Chips · Footer
   ============================================================ */

/* --- Schwebende Navigation -------------------------------------
   Zwei Elemente: die Leiste als Pille und der Menü-Kreis daneben.
   Die Farbgebung wechselt, sobald ein heller Abschnitt darunter
   liegt (JS setzt .nav--ink).                                    */

.nav {
  position: fixed;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - var(--gutter) * 2);
  max-width: 46rem;
}

.nav__bar {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--nav-h);
  padding: 0.375rem 0.375rem 0.375rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}

.nav__bar .label,
.footer__item,
.work__cell dt { white-space: nowrap; }

.nav__brand {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--c-ink-invert);
  transition: color var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}

@media (hover: hover) {
  .nav__brand:hover { opacity: 0.7; }
}

/* Feste Masse und currentColor halten die neue Vektor-Wortmarke auf
   hellen wie dunklen Abschnitten und beim direkten Datei-Aufruf lesbar. */
.nav__brand svg { display: block; width: 5rem; height: auto; fill: currentColor; }

/* Geometrischer OLEVON-Schriftzug ohne Unterzeile. */
.nav__wortmarke {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

@media (max-width: 40rem) {
  .nav__brand svg { width: 4.375rem; }
}

.nav__toggle {
  flex: none;
  width: var(--nav-h);
  height: var(--nav-h);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: var(--c-ink-invert);
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease);
}

.nav__toggle-icon {
  position: relative;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: background var(--t-fast) var(--ease);
}

.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: top var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.nav__toggle-icon::before { top: -0.3125rem; }
.nav__toggle-icon::after { top: 0.3125rem; }

/* Ohne Akzentfarbe muss der Kontakt-Knopf immer die Umkehrung
   seines Untergrunds sein — sonst verschwindet er über dunklen
   Stellen des Hero-Videos. Grundfall: heller Knopf auf Dunkel.

   (Am 15. Oktober 2026 kurz durch eine Akzentfarbe ersetzt und
   wieder zurückgedreht. Wer es erneut versucht, ändert hier die
   drei `background`-Zeilen auf var(--c-accent).) */
.nav .pill--accent {
  background: var(--c-paper);
  color: var(--c-ink);
  --pill-ink-aktiv: var(--c-ink-invert);
}
.nav .pill--accent .pill__fill { background: var(--c-ink); }

/* Über weißem Grund dreht er um. */
.nav--ink .pill--accent {
  background: var(--c-ink);
  color: var(--c-ink-invert);
  --pill-ink-aktiv: var(--c-ink);
}
.nav--ink .pill--accent .pill__fill { background: var(--c-paper); }

/* Bei offenem Menü liegt immer Schwarz darunter. */
.nav.is-open .pill--accent {
  background: var(--c-paper);
  color: var(--c-ink);
  --pill-ink-aktiv: var(--c-ink-invert);
}
.nav.is-open .pill--accent .pill__fill { background: var(--c-ink); }

/* Helle Variante — über weißem Grund */
.nav--ink .nav__bar,
.nav--ink .nav__toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.nav--ink .nav__brand,
.nav--ink .nav__toggle { color: var(--c-ink); }

/* Menü offen: drei Striche werden zum ×. */
.nav.is-open .nav__toggle-icon { background: transparent; }
.nav.is-open .nav__toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__toggle-icon::after { top: 0; transform: rotate(-45deg); }

.nav.is-open .nav__bar,
.nav.is-open .nav__toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

.nav.is-open .nav__brand,
.nav.is-open .nav__toggle { color: var(--c-ink-invert); }

/* --- Suche in der Navigation ----------------------------------
   Wird von main.js lokal ergänzt. Das Trefferfeld übernimmt immer
   das aktuelle helle oder dunkle Thema der schwebenden Leiste.    */

.nav-suche {
  position: relative;
  flex: 1;
  min-width: 0;
  height: calc(var(--nav-h) - 0.75rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  color: var(--c-ink-invert);
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.nav-suche:focus-within {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
}

.nav-suche__symbol {
  position: relative;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.6;
}

.nav-suche__symbol::after {
  content: '';
  position: absolute;
  width: 0.3rem;
  height: 1px;
  right: -0.22rem;
  bottom: -0.08rem;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.nav-suche__eingabe-rahmen {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.nav-suche__eingabe {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  line-height: 1;
  letter-spacing: var(--ls-mono);
  text-transform: none;
}

.nav-suche__eingabe::-webkit-search-cancel-button { display: none; }
.nav-suche__eingabe::placeholder { color: currentColor; opacity: 0.55; }

.nav-suche__ergebnisse {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  max-height: min(27rem, calc(100vh - var(--nav-top) - var(--nav-h) - 2rem));
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-card);
  background: rgba(8, 8, 8, 0.92);
  color: var(--c-ink-invert);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition: opacity var(--t-fast) var(--ease),
              visibility var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.nav__bar.is-suche-offen .nav-suche__ergebnisse {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-suche__kopf,
.nav-suche__leer {
  display: block;
  padding: 0.65rem 0.75rem;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  line-height: 1.3;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-grey-invert-60);
}

.nav-suche__treffer {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.6rem 0.75rem;
  border-radius: calc(var(--r-card) - 6px);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  line-height: 1.2;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.nav-suche__treffer.is-aktiv,
.nav-suche__treffer:focus-visible {
  outline: 0;
  background: var(--c-paper);
  color: var(--c-ink);
}

.nav-suche__nummer,
.nav-suche__art { opacity: 0.5; }

.nav-suche__titel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav--ink .nav-suche {
  color: var(--c-ink);
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.1);
}

.nav--ink .nav-suche:focus-within {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.24);
}

.nav--ink .nav-suche__ergebnisse {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-ink);
}

.nav--ink .nav-suche__kopf,
.nav--ink .nav-suche__leer { color: var(--c-grey-60); }

.nav--ink .nav-suche__treffer.is-aktiv,
.nav--ink .nav-suche__treffer:focus-visible {
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.nav.is-open .nav-suche { color: var(--c-ink-invert); }
.nav.is-open .nav-suche__ergebnisse { display: none; }

@media (max-width: 40rem) {
  /* Keine live berechnete Unschärfe über Bildern: Das spart iOS Safari beim
     Scrollen eine teure Neuberechnung der feststehenden Navigation. */
  .nav__bar,
  .nav__toggle,
  .pill--glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav__bar,
  .nav__toggle { background: rgba(18, 18, 18, 0.96); }

  .nav--ink .nav__bar,
  .nav--ink .nav__toggle {
    background: rgba(246, 246, 246, 0.96);
  }

  .nav.is-open .nav__bar,
  .nav.is-open .nav__toggle { background: rgba(18, 18, 18, 0.96); }

  .nav__bar { gap: 0.625rem; }
  .nav-suche { gap: 0.375rem; padding-inline: 0.625rem; }
  /* Safari sieht weiterhin 16 px und zoomt deshalb nicht. Visuell wird das
     Feld im eigenen Rahmen wieder auf die ursprünglichen 11 px skaliert. */
  .nav-suche__eingabe {
    flex: none;
    width: calc(100% / 0.6875);
    font-size: 1rem;
    transform: scale(0.6875);
    transform-origin: left center;
  }
  .nav-suche__treffer { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .nav-suche__art { display: none; }
}

@media (max-width: 28rem) {
  .nav__bar > .pill--accent { padding-inline: 1rem; }
}

/* Auf schmalen Handys bekommt die breitere Wortmarke Platz, ohne die
   Suche oder den Kontaktknopf zu ueberlagern. */
@media (max-width: 23rem) {
  .nav .nav__bar { padding-left: 0.75rem; gap: 0.375rem; }
  .nav__brand svg { width: 64px; }
  .nav .nav-suche { padding-inline: 0.375rem; gap: 0.25rem; }
}

/* --- Pill-Button ------------------------------------------------
   Ein Baustein, vier Färbungen. Der Text ist immer ein Mono-Label
   in Klammern.                                                   */

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: calc(var(--nav-h) - 0.75rem);
  padding-inline: 1.375rem;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast) var(--ease);
  /* Rückfallwert, falls eine Variante die Variable nicht setzt. */
  --pill-ink-aktiv: var(--c-ink);
}

/* Die Beschriftung liegt über der Füllung. Wichtig: :not(.pill__fill),
   sonst zieht diese Regel die Füllung selbst aus ihrer Überlagerung
   heraus — sie ist ja auch ein direktes <span> — und der Knopf
   bekommt beim Überfahren nur eine neue Schriftfarbe ohne
   Hintergrund. Genau so verschwand der Text. */
.pill > span:not(.pill__fill) { position: relative; z-index: 1; }
.pill:disabled { opacity: 0.5; cursor: not-allowed; }

/* Knöpfe stehen bewusst OHNE eckige Klammern — sie sind ohnehin als
   Fläche erkennbar und wirken ruhiger. Die Klammern bleiben dort, wo sie
   etwas unterscheiden: an den Mono-Labels (.label--bracket).
   Wollt ihr sie hier zurück, diese zwei Zeilen einkommentieren:
   .pill::before { content: "[ "; position: relative; z-index: 1; }
   .pill::after  { content: " ]"; position: relative; z-index: 1; } */

/* Nur umrandete, transparente und Navigations-Buttons erhalten den Farb-Wischer.
   Gefüllte schwarze und weisse Buttons behalten bei Hover, Druck und
   Tastaturfokus ihren Kontrast zum Abschnitt; der Fokusrahmen bleibt. */
.pill__fill {
  position: absolute;
  /* Ein Pixel Überstand und bewusst KEINE eigene Rundung: Der Knopf
     beschneidet rund (overflow: hidden), die Füllung darf also ein
     Rechteck sein. Mit eigener Rundung bliebe an den Enden eine
     haarfeine Naht stehen. */
  inset: -1px;
  z-index: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-mid) var(--ease);
}

/* Sobald die Füllung hochfährt, MUSS die Schrift auf die
   Gegenfarbe der Füllung wechseln — sonst steht Schwarz auf
   Schwarz und der Text verschwindet. Beides hängt deshalb an
   einer einzigen Variablen je Variante: --pill-ink-aktiv.
   Wer eine neue Variante anlegt, setzt Füllung und diese
   Variable zusammen, dann kann nichts auseinanderlaufen. */
.pill:is(.pill--ghost, .pill--glass):focus-visible .pill__fill,
.pill:is(.pill--ghost, .pill--glass):active .pill__fill,
.nav .pill--accent:focus-visible .pill__fill,
.nav .pill--accent:active .pill__fill { transform: scaleY(1); }

.pill:is(.pill--ghost, .pill--glass):focus-visible,
.pill:is(.pill--ghost, .pill--glass):active,
.nav .pill--accent:focus-visible,
.nav .pill--accent:active { color: var(--pill-ink-aktiv); }

/* Die Füllung braucht 0,5 s nach oben, die Schrift wechselt in
   0,24 s. Ohne Verzögerung stünde die neue Schriftfarbe kurz auf
   dem alten Untergrund — genau dann verschwindet der Text.
   Beim Verlassen gilt die Regel oben ohne Verzögerung, damit die
   Schrift zurückspringt, bevor die Füllung abfällt. */
.pill:is(.pill--ghost, .pill--glass):focus-visible,
.pill:is(.pill--ghost, .pill--glass):active,
.nav .pill--accent:focus-visible,
.nav .pill--accent:active { transition-delay: 0.2s; }

@media (hover: hover) {
  .pill:is(.pill--ghost, .pill--glass):hover .pill__fill,
  .nav .pill--accent:hover .pill__fill { transform: scaleY(1); }
  .pill:is(.pill--ghost, .pill--glass):hover,
  .nav .pill--accent:hover {
    color: var(--pill-ink-aktiv);
    transition-delay: 0.2s;
  }
}

.pill--accent {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

.pill--ink {
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.pill--paper {
  background: var(--c-paper);
  color: var(--c-ink);
}

.pill--ghost {
  border: 1px solid var(--c-grey-20);
  color: var(--c-ink);
  --pill-ink-aktiv: var(--c-ink-invert);
}
.pill--ghost .pill__fill { background: var(--c-ink); }

.pill--glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: var(--c-ink-invert);
  --pill-ink-aktiv: var(--c-ink);
}
.pill--glass .pill__fill { background: var(--c-paper); }

/* Am Handy bekommt das Glas eine dunkle Tönung statt einer hellen.
   Das war schon immer so gedacht — die Regel stand bisher aber weiter
   oben in dieser Datei, also VOR der Grundregel darüber. Bei gleicher
   Spezifität gewinnt die spätere, und damit hat die Absicht nie
   gegriffen: Der Knopf lag am Handy weiter auf weissem 10-%-Glas.
   Über einem hellen Header hellte das den Grund zusätzlich auf und
   drückte den Kontrast der weissen Schrift auf 3,99:1 — unter die
   4,5:1, die WCAG AA für Text dieser Größe verlangt. Dunkel getönt
   sind es 5,6:1 und mehr, und es passt zur Navigation, die am Handy
   ohnehin auf `rgba(18,18,18,0.96)` steht. */
@media (max-width: 40rem) {
  .pill--glass {
    background: rgba(18, 18, 18, 0.78);
    border-color: rgba(255, 255, 255, 0.22);
  }
}

.pill--lg { height: 3.25rem; padding-inline: 1.75rem; }

/* --- Textlink mit Unterstrich-Wischer ---------------------------- */

/* Der Strich läuft als Hintergrundbild, nicht als ::after — sonst
   würde er die Klammern von .label--bracket überschreiben. */
.link {
  display: inline-block;
  padding-bottom: 0.15em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size var(--t-fast) var(--ease);
}

.link:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

@media (hover: hover) {
  .link:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

/* --- Menü-Overlay ------------------------------------------------ */

/* Dieselbe Rolle, anderer Grund: `--c-grey-60` ist auf 4,54:1 gegen Weiß
   eingestellt (Labels, Formularfelder). Auf den dunklen Flächen — Footer und
   Menü — muss dasselbe Label heller statt dunkler werden; dort käme #767676
   nur auf 4,19:1. Die Variable wird deshalb lokal umdefiniert, statt jede
   einzelne Regel anzufassen. */
.footer,
.menu,
.ph--dark,
.fotogalerie__bild--leer {
  --c-grey-60: rgba(255, 255, 255, 0.64);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--c-flaeche-dunkel);
  color: var(--c-ink-invert);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Der Abstand unter der Leiste war fest 3rem. Auf einem sehr flachen
     Fenster sind das zusammen mit Leiste und Rand über 20 % der Höhe,
     die dem Menü fehlen. Jetzt atmet er mit. */
  padding: calc(var(--nav-top) + var(--nav-h) + clamp(1.25rem, 4vh, 3rem))
           var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-slow) var(--ease);
  visibility: hidden;
  /* Sicherheitsnetz: Sollte das Menü auf einer Fenstergrösse doch einmal
     nicht aufgehen, wird es scrollbar, statt Einträge abzuschneiden.
     Bei allen geprüften Grössen greift das nicht. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

/* Gegenstück zu `menu-offen` in main.js: Während das Menü aufzieht,
   gehen Klicks im noch abgeschnittenen Teil nicht auf die Seite durch. */
.menu-offen main,
.menu-offen .footer {
  pointer-events: none;
}

/* Das Signet hält die ruhige Fläche neben den drei Einträgen — dieselbe
   Handschrift wie im Leistungs-Header: ein großes, stark zurückgenommenes
   Zeichen, das den Raum füllt, ohne mit der Navigation zu konkurrieren.

   Als echtes `<img>` und nicht als CSS-Maske: Beim direkten Datei-Aufruf
   über `file://` lädt Chrome externe Maskenbilder nicht zuverlässig — das
   war die Ursache in Abschnitt 122. `brightness(0) invert(1)` färbt die
   schwarze Vektorvorlage rein weiß, die Deckkraft nimmt sie wieder zurück.

   `.menu` ist `position: fixed` mit eigenem z-index und bildet damit einen
   eigenen Stapelkontext. Deshalb bekommt das Signet `z-index: 0` und die
   beiden Inhaltsblöcke darüber eine 1 — mit `-1` läge es hinter der
   schwarzen Menüfläche und wäre unsichtbar. */
/* Das Menü hat zwei Ausprägungen.

   Handy: eine Spalte. Zwei Spalten waren dort nicht zu halten — bei
   390 px ist eine Spalte nur 167 px breit, und „Social Media &
   Kampagnen" brach darin auf drei Zeilen um. Untereinander hat jeder
   Eintrag die volle Breite und bleibt einzeilig.

   Ab 60rem: zwei Spalten. Start/Arbeiten und Studio/Kontakt paarweise,
   die Leistungen darunter über die volle Breite, das Signet rechts
   daneben. Mit fünf Hauptpunkten untereinander lief am Desktop sonst
   der letzte Eintrag aus dem Bild — bei 96 px Schrift brauchte die
   einspaltige Liste 731 px.

   Die Reihenfolge im Markup ist in beiden Fällen dieselbe und
   entspricht der sichtbaren. Tastaturweg und Augenführung laufen
   also gleich. */
.menu__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Zwei Zeilen Hauptpunkte, „Leistungen", die Bereiche, dann eine
     wachsende Zeile fürs Signet. */
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: var(--grid-gap);
  row-gap: 0.25rem;
  flex: 1;
}

/* Die vier Hauptpunkte werden ausdrücklich gesetzt, nicht automatisch
   verteilt — am Handy liest man sie spaltenweise (Start/Arbeiten links,
   Studio/Kontakt rechts), am Desktop zeilenweise (Start/Arbeiten oben,
   Studio/Kontakt darunter). Dieselbe Markup-Reihenfolge, zwei
   Anordnungen.

   `nth-of-type` zählt die Anker unter `.menu__links`: 1 Start,
   2 Arbeiten, 3 Studio, 4 Kontakt. Wer die Einträge im Markup
   umstellt, muss diese Zuordnung mitführen. */
.menu__links > a:nth-of-type(1) { grid-area: 1 / 1; }  /* Start    */
.menu__links > a:nth-of-type(2) { grid-area: 2 / 1; }  /* Arbeiten */
.menu__links > a:nth-of-type(3) { grid-area: 1 / 2; }  /* Studio   */
.menu__links > a:nth-of-type(4) { grid-area: 2 / 2; }  /* Kontakt  */

/* „Leistungen" und die Bereiche über die volle Breite — sonst bricht
   „Social Media & Kampagnen" in einer 167 px schmalen Spalte um. */
.menu__link--breit  { grid-area: 3 / 1 / 4 / -1; }
.menu__unterpunkte  { grid-area: 4 / 1 / 5 / -1; }

.menu__links,
.menu__foot {
  position: relative;
  z-index: 1;
}

/* Der Abstand zu den Bereichen wird am Hauptpunkt abgezogen, in `em`,
   damit er am Handy im selben Verhältnis mitschrumpft. Weiter geht
   nicht — darunter stösst die erste Zeile an die Unterlänge des „g". */
.menu__link--breit { margin-bottom: -0.13em; }

.menu__unterpunkte { align-self: start; }

/* Das Signet ist eine Zelle im Raster, keine freischwebende Ebene.
   Dadurch kann es nicht hinter einem Eintrag landen — vorher lag es
   mittig hinter der Schrift, was Fabio ausdrücklich nicht wollte.
   Am Handy schliesst es unten an und sitzt mittig in der Fläche, die
   übrig bleibt. */
.menu__signet {
  grid-area: 5 / 1 / 6 / -1;
  justify-self: center;
  align-self: center;
  width: min(55%, 11rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* Nur wenn wirklich kein Platz ist, entfällt das Signet — die Einträge
   wiegen schwerer als die Marke.

   Die Schwelle lag zuerst bei 740 px und stammte aus der einspaltigen
   Fassung, in der fünf Hauptpunkte untereinander standen. Seit das
   Menü am Handy zweispaltig ist, braucht es gut 110 px weniger Höhe:
   Nachgemessen passt das Signet jetzt bis hinunter zu 375 x 667 mit
   20 px Luft und verschwindet erst darunter (375 x 620 fehlen 5 px,
   320 x 568 fehlen 24 px). Die Schwelle zieht deshalb auf 640 px nach —
   sonst blendet es sich auf gängigen Geräten grundlos aus, sobald die
   Browserleiste etwas Höhe wegnimmt. */
@media (max-width: 59.99rem) and (max-height: 639px) {
  .menu__signet { display: none; }
}

@media (min-width: 60rem) {
  .menu__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Zwei Zeilen Hauptpunkte, eine für „Leistungen", die letzte
       wächst. Ohne die wachsende Zeile endet das Raster an seinem
       Inhalt, und das Signet liesse sich nicht mittig zwischen
       „Kontakt" und der Fusslinie ausrichten — dazwischen läge loser
       Flex-Zwischenraum, den das Raster nicht kennt. */
    grid-template-rows: auto auto auto 1fr;
  }

  /* Am Desktop zeilenweise: Start/Arbeiten oben, Studio/Kontakt darunter. */
  .menu__links > a:nth-of-type(2) { grid-area: 1 / 2; }  /* Arbeiten */
  .menu__links > a:nth-of-type(3) { grid-area: 2 / 1; }  /* Studio   */

  /* „Leistungen" über beide Spalten, die Bereiche darunter links —
     rechts daneben bleibt Platz fürs Signet. */
  .menu__link--breit { grid-area: 3 / 1 / 4 / -1; }
  .menu__unterpunkte { grid-area: 4 / 1 / 5 / 2; padding-left: 0.5rem; }

  .menu__signet {
    grid-area: 3 / 2 / 5 / 3;
    /* Linksbündig in der Spalte, also unter dem Wort „Kontakt" statt
       mittig in der ganzen Spalte. Rechts daneben bleibt Fläche frei. */
    justify-self: start;
    /* Das Rasterfeld beginnt eine Zeilenlücke unter „Kontakt", der Fuss
       aber direkt am Feldende. Ohne Ausgleich wäre der obere Puffer
       genau um diese Lücke grösser als der untere. */
    margin-top: calc(-0.25rem / 2);
    width: min(100%, 36vh);
  }
}


.menu__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  /* Der Kasten hört beim Wort auf. Vorher lief er über die volle
     Spaltenbreite: Ein Klick weit rechts neben „Start" löste den Link
     aus, und das Signet dahinter galt als überdeckt, obwohl dort nur
     leere Fläche lag. */
  justify-self: start;
  width: fit-content;
  padding-block: clamp(0.35rem, 1vw, 0.75rem);
  font-family: var(--f-display);
  font-weight: 500;
  /* Die Breite allein genügt nicht: Ein breites, aber flaches Fenster
     (1280 x 720) bekam bei 96 px drei Zeilen Hauptpunkte plus
     Unterpunkte nicht mehr unter. `min(..., 12vh)` deckelt die Größe
     zusätzlich über die Fensterhöhe. Auf 1440 x 800 und höher sowie am
     Handy ändert sich dadurch nichts — dort greift weiterhin der
     ursprüngliche Wert. */
  font-size: min(clamp(2.5rem, 8vw, 6rem), 11vh);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  transition: transform var(--t-mid) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.menu__link .label { transition: color var(--t-fast) var(--ease); }

/* Die drei Leistungsbereiche stehen als Unterpunkte unter ihrem
   Hauptpunkt. Deutlich kleiner als die Hauptpunkte, damit die
   Gliederung sofort lesbar ist, und eingerückt statt mit Aufzählung —
   die Einrückung allein genügt als Zuordnung.

   Vorher gab es sie in keiner Navigationsebene: Der einzige Weg dorthin
   führte über das Karussell auf der Startseite, und von jeder anderen
   Seite aus gab es gar keinen. */
/* Die drei Bereiche sitzen jetzt praktisch bündig unter „Leistungen".
   Die Einrückung lag bei bis zu 28 px, was sie vom Hauptpunkt abhängte;
   übrig bleibt ein knapper Versatz, der die Zuordnung noch zeigt, ohne
   sie abzusetzen. Senkrecht rücken sie ebenfalls dichter heran. */
.menu__unterpunkte {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.1rem;
  /* Am Handy bündig unter „Leistungen" — jede Einrückung wirkte dort
     wie ein Einzug zur Mitte. Am Desktop kommen 0,5rem zurück. */
  padding-left: 0;
  padding-block: 0 0.75rem;
}

.menu__unterlink {
  position: relative;
  width: fit-content;
  padding-block: 0.3rem;
  font-family: var(--f-body);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.2;
  color: var(--c-grey-60);
  transition: transform var(--t-mid) var(--ease),
              color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.menu__unterlink.is-aktiv {
  color: var(--c-ink-invert);
  font-weight: 600;
}

@media (hover: hover) {
  .menu__unterlink:hover {
    transform: translateX(0.5rem);
    color: var(--c-ink-invert);
  }
}

.menu__unterlink:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* Nur wenn ein Hauptbereich eindeutig zugeordnet ist, treten die anderen
   Einträge zurück. Der aktive Link bleibt vollständig hell. */
.menu__links.hat-aktive-seite .menu__link:not(.is-aktiv),
.menu__links.hat-aktive-seite .menu__unterlink:not(.is-aktiv) { opacity: 0.42; }

.menu__link.is-aktiv {
  opacity: 1;
  color: var(--c-ink-invert);
  font-weight: 650;
}

.menu__link.is-aktiv .label { color: var(--c-ink-invert); }

/* Ohne Farbe übernimmt die Bewegung: der Eintrag rückt vor,
   seine Nummer tritt aus dem Grau heraus. */
@media (hover: hover) {
  .menu__link:hover { transform: translateX(0.625rem); }
  .menu__link:hover .label { color: var(--c-ink-invert); }
  /* Beide Zeilen müssen NACH der Abdunklung weiter oben stehen: Sie
     haben dieselbe Spezifität, also entscheidet die Reihenfolge. Stand
     die Aufhellung davor, blieb ein überfahrener Unterpunkt bei 42 %
     Deckkraft — die Schrift wurde zwar weiss, sah aber grau aus. */
  .menu__links.hat-aktive-seite .menu__link:hover,
  .menu__links.hat-aktive-seite .menu__unterlink:hover { opacity: 1; }
}

.menu__link:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

.menu__link .label { flex: none; }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-md) var(--stack-lg);
  justify-content: space-between;
  align-items: end;
  padding-top: var(--stack-md);
  border-top: 1px solid var(--c-grey-invert-20);
}

/* --- Intro-Overlay ------------------------------------------------
   Läuft einmal pro Sitzung. Wenn JS fehlt, ist es nie sichtbar.    */

.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: none;
  place-items: center;
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.js .intro.is-active { display: grid; }

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-md);
}

.intro__mark svg { height: 22px; width: 82px; fill: currentColor; }
.intro__mark img { display: block; width: 82px; height: auto; filter: brightness(0) invert(1); }

.intro__count {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--c-grey-invert-60);
  font-variant-numeric: tabular-nums;
}

.intro__bar {
  width: min(240px, 40vw);
  height: 1px;
  background: var(--c-grey-invert-20);
  overflow: hidden;
}

.intro__bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-ink-invert);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- Seitenwechsel ---------------------------------------------------
   Wird von main.js zentral für interne Links erzeugt. Acht Paneele laufen
   abwechselnd von oben und unten ein; das weiße Signet und eine Scan-Linie
   verbinden den futuristischen Effekt mit der Olevon Studio-Marke.                 */

.seitenwechsel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-intro) + 10);
  display: grid;
  place-items: center;
  color: var(--c-ink-invert);
  overflow: hidden;
  pointer-events: none;
}

.seitenwechsel__segment {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--segment-links);
  /* Anzahl und damit Breite setzt main.js nach Fensterbreite. Der eine
     Pixel Überstand schliesst die Haarlinien zwischen den Paneelen. */
  width: calc(var(--segment-breite, 12.5%) + 1px);
  background: var(--c-ink);
  transform: translate3d(0, 0, 0);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: var(--wechsel-rein);
}

/* `will-change` stand hier dauerhaft und galt damit für jedes Paneel,
   auch im Ruhezustand. Bei acht Paneelen war das harmlos, bei dreissig
   hielt der Browser dreissig Ebenen dauerhaft im Speicher, obwohl der
   Vorhang die meiste Zeit gar nicht läuft. Jetzt nur noch, während er
   tatsächlich zuläuft. Die Paneele bleiben auch ohne diesen Hinweis auf
   der Grafikkarte, weil sie ohnehin per `translate3d` verschoben
   werden. */
.seitenwechsel.is-schliessend .seitenwechsel__segment {
  will-change: transform;
}

.seitenwechsel.is-offen .seitenwechsel__segment {
  transform: translate3d(0, var(--ausgang), 0);
  transition-delay: var(--wechsel-raus);
}

.seitenwechsel.is-schliessend {
  pointer-events: auto;
}

.seitenwechsel.is-schliessend .seitenwechsel__segment {
  transform: translate3d(0, 0, 0);
  transition-delay: var(--wechsel-rein);
}

.seitenwechsel__kern {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.26s var(--ease), transform 0.45s var(--ease);
}

.seitenwechsel__signet {
  width: clamp(5.5rem, 11vw, 9rem);
  height: auto;
  filter: brightness(0) invert(1);
  user-select: none;
}

.seitenwechsel__code {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.16em;
  color: var(--c-grey-invert-60);
  text-transform: uppercase;
}

.seitenwechsel__scan {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.25) 14%,
    #fff 50%, rgba(255,255,255,0.25) 86%, transparent 100%);
  box-shadow: 0 0 16px rgba(255,255,255,0.45);
  opacity: 0;
  pointer-events: none;
}

.seitenwechsel.is-offen .seitenwechsel__kern {
  opacity: 0;
  transform: scale(0.92);
}

.seitenwechsel.is-schliessend .seitenwechsel__kern {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.24s;
}

.seitenwechsel.is-schliessend .seitenwechsel__signet {
  animation: olevon-signet-impuls 0.42s 0.24s both;
}

.seitenwechsel.is-schliessend .seitenwechsel__scan {
  animation: olevon-scan 0.6s 0.18s both cubic-bezier(0.22, 1, 0.36, 1);
}

/* Die Weichzeichnung lief früher mit: von `blur(5px)` auf `blur(0)`.
   Das ist die teuerste Eigenschaft im ganzen Wechsel — eine Unschärfe
   lässt sich nicht auf der Grafikkarte durchreichen, sie muss in jedem
   einzelnen Bild neu gerechnet werden, und zwar genau dann, wenn auch
   die Paneele laufen. Übrig bleiben Deckkraft und Verschiebung; beide
   laufen im Compositor. Der Einschwung sieht praktisch gleich aus, nur
   ohne den weichen Rand im ersten Moment.
   Die statische Einfärbung auf Weiss bleibt am Element selbst. */
@keyframes olevon-signet-impuls {
  0%   { opacity: 0; transform: translate3d(-7px, 0, 0) scale(0.94); }
  42%  { opacity: 0.72; transform: translate3d(3px, 0, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes olevon-scan {
  0%   { opacity: 0; transform: translate3d(0, -8vh, 0); }
  14%  { opacity: 0.85; }
  82%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(0, 108vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .seitenwechsel { display: none; }
}

/* --- Platzhalterfläche --------------------------------------------
   Solange kein Material da ist: gerasterte Fläche mit Mono-Hinweis.
   Sobald ein <video> oder <img> in der Kachel liegt, einfach löschen. */

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 48px),
    var(--c-grey-08);
  color: var(--c-grey-60);
}

.ph--dark {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 48px),
    var(--c-ink);
  color: var(--c-grey-invert-60);
}

.ph__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* --- Projektkachel -------------------------------------------------- */

.work {
  display: block;
  position: relative;
  color: inherit;
}

.work__media {
  position: relative;
  height: clamp(22rem, 56vh, 37.5rem);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-grey-08);
}

.work__media > video,
.work__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: none;
}

/* Desktop und Handy nutzen eigene ruhige Bildausschnitte. Mobile Projektfilme
   werden auf der Startseite bewusst nicht geladen oder abgespielt. */
.work__preview--mobile { display: none !important; }

@media (max-width: 40rem) {
  .work__preview--desktop { display: none !important; }
  .work__preview--mobile { display: block !important; }
}

/* Ursprüngliche Projektvorschau ohne Beschriftung: Rahmen und bewegte
   Abtastlinie bleiben, Olevon Studio-Status und Frame-Zähler sind entfernt. */
.projekt-vorschau {
  --vorschau-x: 50%;
  position: absolute;
  inset: clamp(0.75rem, 1.5vw, 1.25rem);
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: var(--c-ink-invert);
  mix-blend-mode: difference;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-mid) var(--ease);
  pointer-events: none;
}

.projekt-vorschau__linie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--vorschau-x);
  width: 1px;
  background: currentColor;
  opacity: 0.38;
  transition: left 80ms linear;
}

@media (hover: hover) {
  .work:hover .projekt-vorschau,
  .work:focus-visible .projekt-vorschau {
    opacity: 1;
    transform: scale(1);
  }

  .work__media .ph {
    background-position:
      var(--vorschau-raster, 0px) 0,
      0 var(--vorschau-raster, 0px),
      0 0;
    transition: background-position 80ms linear;
  }
}

.work__name {
  position: absolute;
  left: clamp(1.25rem, 2.4vw, 2.25rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 2;
  color: var(--c-ink-invert);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-title);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  mix-blend-mode: difference;
}

/* Mobile: Projekt 02 bleibt schwarz statt sich mit dem Bild zu vermischen. */
@media (max-width: 40rem) {
  .work--chamaeleon .work__name {
    color: var(--c-ink);
    mix-blend-mode: normal;
  }
}

/* Avelune: weisser Titel ohne Differenzmodus. Der lokale Verlauf hält
   ihn auch vor den hellen Goldflächen lesbar, ohne das ganze Bild abzudunkeln. */
.work--avelune .work__name {
  color: var(--c-ink-invert);
  mix-blend-mode: normal;
}

.work--avelune .work__media::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.62));
  pointer-events: none;
}

/* Meta-Zeile: KUNDE : … | BRANCHE : … | FORMAT : … */
.work__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--grid-gap);
  align-items: center;
  padding-block: 1rem;
  border-bottom: var(--line);
}

.work__cell {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.work__cell dt { color: var(--c-grey-60); }

.work__cell dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.work__arrow {
  justify-self: end;
  color: var(--c-grey-60);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.work__arrow-text { display: none; }

.work__cell dt { transition: color var(--t-fast) var(--ease); }

/* Statt Farbe: die grauen Bezeichner treten heran, der Pfeil
   wandert und wird schwarz. */
@media (hover: hover) {
  .work:hover .work__cell dt { color: var(--c-ink); }

  .work:hover .work__arrow {
    transform: translate3d(0.35rem, -0.35rem, 0);
    color: var(--c-ink);
  }
}

/* Auf dem Handy ersetzt ein eindeutiger CTA den isolierten Mini-Pfeil. Die
   komplette Projektkarte bleibt dabei der Link, die Kapsel ist nur ihre
   sichtbare Handlungsaufforderung. */
@media (max-width: 40rem) {
  .work__arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8.25rem;
    height: 2.75rem;
    border: 1px solid var(--c-ink);
    border-radius: var(--r-pill);
    background: var(--c-paper);
    color: var(--c-ink);
    overflow: hidden;
    isolation: isolate;
  }

  /* Derselbe Wischer wie bei .pill: Die schwarze Fläche fährt beim
     Drücken von unten hoch, während die CTA-Schrift lesbar bleibt. */
  .work__arrow::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    background: var(--c-ink);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--t-mid) var(--ease);
  }

  .work__arrow-text {
    position: relative;
    z-index: 1;
    display: inline;
    font-family: var(--f-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
  }

  .work__arrow svg { display: none; }

  .work:focus-visible .work__arrow::before,
  .work:active .work__arrow::before { transform: scaleY(1); }

  .work:focus-visible .work__arrow,
  .work:active .work__arrow {
    color: var(--c-ink-invert);
    transition-delay: 0.2s;
  }
}

/* Auch auf schmalen Fenstern mit Maus bleibt die mobile Kapsel fest an
   ihrer Kartenkante; nur der Füll-Wischer reagiert auf den Hover. */
@media (max-width: 40rem) and (hover: hover) {
  .work:hover .work__arrow {
    transform: none;
    color: var(--c-ink-invert);
    transition-delay: 0.2s;
  }

  .work:hover .work__arrow::before { transform: scaleY(1); }
}

/* --- Chips (Kontaktformular) ---------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--c-grey-20);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-grey-90);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

@media (hover: hover) {
  .chip input:hover + span { border-color: var(--c-ink); color: var(--c-ink); }
}

.chip input:checked + span {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

/* --- Eingabefelder ---------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.875rem 0;
  background: transparent;
  border: 0;
  border-bottom: var(--line);
  border-radius: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--c-accent);
}

.field textarea { resize: vertical; min-height: 6rem; }

.field ::placeholder { color: var(--c-grey-60); }

/* --- Footer ------------------------------------------------------------ */

.footer {
  background: var(--c-ink);
  color: var(--c-ink-invert);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--stack-lg) var(--grid-gap);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: start;
}

.footer__col > .label:first-child { margin-bottom: 0.25rem; }

/* Direkt im HTML eingebettete Social-Symbole. Dadurch funktionieren sie
   auch beim Öffnen der HTML-Datei per Doppelklick ohne lokalen Server. */
.social-icon-inline {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.6em;
  vertical-align: -0.22em;
  fill: currentColor;
}
.footer__item {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ink-invert);
  transition: color var(--t-fast) var(--ease);
}

/* Die Kontaktadresse und die Leistungsnamen dürfen auch in schmalen
   Footer-Spalten umbrechen. Ohne das stand „Social Media & Kampagnen"
   bei 375 px mit 184 px in einer 176 px schmalen Spalte und schob die
   ganze Seite um 5 px über den Rand. */
.footer__item[href^="mailto:"],
.footer__item[href*="leistungen/"] {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Auch der Footer steht ohne Klammern — sie bleiben ausschließlich an den
   Mono-Labels (.label--bracket), wo sie eine eigene Textebene markieren.
   Wollt ihr sie hier zurück, diese zwei Zeilen einkommentieren:
   .footer__item::before { content: "[ "; }
   .footer__item::after  { content: " ]"; } */

/* Im Footer ist die Schrift schon weiß — der Unterstrich
   übernimmt, was vorher die Farbe gemacht hat. */
.footer__item {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 92%;
  background-size: 0% 1px;
  transition: background-size var(--t-fast) var(--ease);
}

@media (hover: hover) {
  .footer__item:hover { background-position: 0 92%; background-size: 100% 1px; }
}

/* Am Finger bedient: die Mono-Links sind nur 17 px hoch. Mit etwas
   Innenabstand wird daraus eine Fläche, die man sicher trifft. */
@media (pointer: coarse) {
  .footer__item,
  .menu__foot .link { padding-block: 0.75rem; }

  .footer__col { gap: 0.125rem; }
  .menu__foot { row-gap: 0.5rem; }
}

.footer__mark {
  width: 100%;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--c-grey-invert-20);
  border-bottom: 1px solid var(--c-grey-invert-20);
}

.footer__mark svg { width: 100%; height: auto; fill: currentColor; }

.footer__partners {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--c-grey-invert-20);
}

.footer__partner-link {
  display: block;
  flex: 0 0 auto;
  width: clamp(5.25rem, 7vw, 6.75rem);
  opacity: 0.46;
  transition: opacity var(--t-fast) var(--ease);
}

.footer__partner-logo {
  display: block;
  width: 100%;
  height: auto;
  /* Freigestellte weiße Fassung (`take5-logo-weiss.png`), ohne Filter.
     Die Originaldatei hat einen weißen Grund, der durch `invert(1)` als
     schwarzer Kasten um das Logo stand. */
}

@media (hover: hover) {
  .footer__partner-link:hover { opacity: 0.72; }
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-sm) var(--stack-lg);
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-grey-invert-20);
}