/* ─── TOKENS ───────────────────────────────────────────────
   Die Design-Tokens stehen in tokens.css — der EINZIGEN Quelle der
   Werte, die alle Konsumenten teilen (Website, PDF-Vorlagen, Social-
   Card, Claude Design). tokens.css wird in jeder HTML-Seite VOR dieser
   Datei eingebunden. Hier nie Token-Werte definieren oder kopieren.
   ───────────────────────────────────────────────────────── */

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
}

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--dur-mid), color var(--dur-mid);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── SKIP-LINK (A11y) ──────────────────────────────────── */
.skip-link {
  position: absolute;
  left: 0;
  top: -100%;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--accent-ink);
  color: var(--on-accent);
  font-size: 0.9rem;
  border-radius: 0 0 6px 0;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 0; }

/* ─── NAV ────────────────────────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Dezenter horizontaler Verlauf Lachs → Blau über transluzentem Nav-BG */
  background:
    linear-gradient(90deg,
      rgba(255, 106, 104, 0.13) 0%,
      rgba(255, 106, 104, 0)   45%,
      rgba(119, 192, 241, 0)   55%,
      rgba(119, 192, 241, 0.13) 100%),
    var(--nav-bg);
  /* Frosted-Glass-Optik wie macOS: stärkerer Blur + Sättigung (Vibrancy) */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  /* Show: strong ease-out with short delay */
  transition:
    transform var(--dur-slow) var(--ease) 0.12s,
    opacity   var(--dur-slow) var(--ease) 0.12s,
    background var(--dur-mid),
    border-color var(--dur-mid);
}

header.hidden {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  /* Hide: quick ease-in, no delay */
  transition:
    transform var(--dur-mid) var(--ease-in),
    opacity   var(--dur-mid) var(--ease-in),
    background var(--dur-mid),
    border-color var(--dur-mid);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 60px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

/* Freigestelltes NF statt der Kachel. Als CSS-Maske eingebunden, nicht als
   <img>: Die Maske nimmt die Textfarbe an, also genügt EINE Datei für beide
   Themes — ein <img> liesse sich nicht einfärben und bräuchte zwei.
   Das Zeichen ist 346×220, also breiter als hoch; die Höhe bleibt bei 36px
   wie bei der alten Kachel, die Breite ergibt sich daraus. */
.nf-mark {
  display: block;
  height: 36px;
  width: calc(36px * 346 / 220);
  background-color: currentColor;
  -webkit-mask: url("nf-mark.svg") center / contain no-repeat;
          mask: url("nf-mark.svg") center / contain no-repeat;
}
.nav-logo {
  color: var(--text);
  transition: opacity var(--dur-fast);
}
/* Klasse C: Navigation bleibt neutral, kein Brand-Ton — sonst verliert der
   Brand-Hover anderswo seine Bedeutung. Statt eines Farbwechsels deshalb nur
   eine leichte Abdunklung; sie bestätigt die Interaktion, ohne einen Ton
   einzuführen. Die Deckkraft ändert die Farbe des Zeichens nicht, sein
   Kontrast bleibt bei über 10:1. */
.nav-logo:hover,
.nav-logo:focus-visible { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .nav-logo { transition: none; }
}

.nav-links {
  display: flex;
  gap: 2rem;
}

/* Knapp ueber dem Burger-Umbruch (769-900 px) ist die Zeile eng: Seit
   „Leistungen" statt „Leistung" stiess der letzte Link bei 769 px genau an
   den Sprachknopf (0 px Abstand). */
@media (min-width: 769px) and (max-width: 900px) {
  .nav-links { gap: 1.25rem; }
}

.nav-links a {
  font-size: 0.85rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--dur-fast);
}

.nav-links a:hover { color: var(--text); }

/* Aktiver Punkt (Scrollspy). Klasse C ist sonst bewusst neutral — der aktive
   Zustand ist die dokumentierte Ausnahme (DESIGN.md § 4): Er ist kein Hover,
   sondern eine Standortanzeige, und "ausgewaehlt" ist im System Lachs.
   --accent-ink, nicht --accent-rest: Es ist Text, und --accent-rest waere im
   Light roher Lachs (unter AA). */
.nav-links a[aria-current="location"],
.mobile-menu a[aria-current="location"] { color: var(--nav-active); }

/* Standortanzeige — nur unter 768px, wo .nav-links ausgeblendet ist. Auf dem
   Desktop zeigt die Leiste den Zustand bereits; ein zweites Signal waere
   Doppelung. Sichtbar geschaltet im Media Query weiter unten. */
.nav-here {
  display: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nav-active);
  transition: opacity var(--dur-fast) var(--ease);
}

/* Bei offenem Menue markiert aria-current den Punkt in der Liste selbst.
   Klasse kommt aus setMenu() in script.js — bewusst nicht per :has(), damit der
   Zustand deterministisch ist und nicht an Browser-Unterstuetzung haengt. */
header.menu-open .nav-here { opacity: 0; }

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-mute);
  border-radius: 4px;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.lang-toggle:hover,
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-mute);
}

/* Kontakt-Knopf im Header, auf ALLEN Breiten (seit 10/2026; zuerst nur
   unter 768px). Mobil gemessen bei 390 x 664: Portraet und Ueberschrift
   fuellen den ersten Bildschirm, der Hero-Knopf lag rund 300 px darunter.
   Am Desktop ersetzt er den Textlink „Kontakt" in der Linkreihe. Solange der
   Hero-Knopf im Bild ist, bleibt er unsichtbar (siehe unten) — der Platz
   bleibt dabei reserviert, damit die Linkreihe nicht springt.
   Bewusst ein `.cta` (Klasse A, Lachs, Blau-Wisch beim Hover) und kein
   Navigationslink — „Navigation bleibt neutral" gilt fuer die Links, nicht
   fuer diese eine Aktion. Hoehe und Kanten wie Sprach- und Theme-Knopf.
   Doppelte Klasse, weil `.cta` weiter unten steht und sonst gewinnt. */
.cta.nav-cta {
  display: inline-flex;
  align-items: center;
  /* .cta setzt flex-start (fuer den Hero) — hier sass der Knopf dadurch an
     der Oberkante der Leiste statt auf einer Linie mit EN und Theme. */
  align-self: center;
  height: 30px;
  padding: 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* Unsichtbar, solange der Hero-Knopf im Bild ist (Klasse setzt script.js).
   visibility statt display: Der Platz bleibt reserviert, sonst springt die
   Linkreihe beim Einblenden. visibility nimmt ihn zugleich aus der Tab-
   Reihenfolge. Beim Ausblenden schaltet visibility erst nach dem Fade. */
.cta.nav-cta {
  transition: background-size var(--dur-mid) var(--ease),
              opacity var(--dur-mid) var(--ease);
}
header.hero-cta-in-view .cta.nav-cta {
  opacity: 0;
  visibility: hidden;
  transition: background-size var(--dur-mid) var(--ease),
              opacity var(--dur-mid) var(--ease),
              visibility 0s linear var(--dur-mid);
}
@media (prefers-reduced-motion: reduce) {
  .cta.nav-cta,
  header.hero-cta-in-view .cta.nav-cta { transition: none; }
}

.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: background var(--dur-fast), transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  gap: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-mid) var(--ease), padding var(--dur-mid);
}

.mobile-menu a {
  font-size: 0.9rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast);
}

.mobile-menu a:hover {
  color: var(--text);
}

.mobile-menu.open {
  max-height: 320px;
  padding: 1rem 2rem;
}

/* ─── SECTIONS ───────────────────────────────────────────── */
section {
  padding: 6rem 2rem;
}

section.alt {
  background: var(--bg-alt);
  transition: background var(--dur-mid);
}

.section-inner {
  max-width: 900px;
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2.5rem;
  color: var(--text);
}



/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100vh;
  min-height: 480px;
  /* 2200 statt 1600: Bei 1600 blieben auf einem 3440er Schirm links und rechts
     je 945 px leer, und das Portraet war auf 923 px gedeckelt. Der Text waechst
     NICHT mit — er ist unten auf 645 px begrenzt, sonst wuerden die Zeilen zu
     lang. Der gewonnene Platz geht vollstaendig an das Bild. */
  max-width: 2200px;
  /* Seitenabstand als Variable, weil .hero-bg ihn rechts wieder zurueckholt —
     stuenden die beiden Werte getrennt da, liefen sie auseinander und rechts
     bliebe ein Streifen.
     Waechst mit dem Fenster: Unterhalb von 2200 px spannt der Hero ueber die
     volle Breite, die Ueberschrift klebte dort mit 32 px am Rand. Gemessen bei
     1920 — vor der Anhebung des Deckels waren es 185 px. */
  --hero-pad-x: clamp(32px, 4vw, 96px);
  /* Ueberschreibt `section { padding: 6rem 2rem }` — der Hero erbt es sonst
     und haette fest 32 px. */
  padding: 6rem var(--hero-pad-x);
  margin-left: auto;
  margin-right: auto;
  background: var(--bg);
  transition: background var(--dur-mid);
}

/* Hero-Hoehe im Nebeneinander: nie hoeher, als das Portraet werden kann.
   Auf einem hohen Fenster (gemessen 1296x1308) war die Bildspalte 1212 px hoch,
   das querformatige Portraet darin aber nur 619 px — 593 px blieben leer.

   Der Deckel haengt an der BREITE, nicht an einem festen Pixelwert. Ein fester
   Wert (probiert: 1040 px) deckelt auch breite Schirme, auf denen gar keine Luft
   ist: Bei 2560x1440 schrumpfte das Portraet dadurch von 1460x1230 auf 1120x944.

   Herleitung: Die Bildspalte ist rund 0,58 der Fensterbreite, das Portraet darf
   104 % davon breit werden, sein Verhaeltnis ist 1,186 — es wird also etwa
   0,58 x 1,04 / 1,186 = 0,51 Fensterbreiten hoch. Dazu die 96 px, die der Hero
   oben als Innenabstand haelt. Hoeher muss der Hero nicht sein.

   Bis etwa 1,6:1 Fensterverhaeltnis greift der Deckel gar nicht — 1440x900,
   1920x1080 und 2560x1440 bleiben exakt wie vorher. */
@media (min-width: 1024px) {
  /* Waechst mit dem Inhalt: Name, Ueberschrift, Einleitung und Links brauchen
     mehr Hoehe als frueher Name und Knopf — mit festem Deckel schnitt
     overflow: hidden oben den Namen und unten das Kurzprofil ab (1440x900). */
  .hero { height: auto; min-height: min(100vh, calc(51vw + 96px)); }
}

.hero-bg {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  /* Seit 10/2026 ein FREIGESTELLTES Portraet. Auf dem Element selbst liegt
     deshalb kein Foto mehr, sondern der Schein dahinter; das Bild sitzt auf
     ::before. Vorher stand das Foto an BEIDEN Stellen — wer nur ::before
     umstellt, laesst hier ein Cover-Foto unter dem Verlauf stehen. */
  background: radial-gradient(55% 50% at 50% 45%, var(--portrait-glow) 0%, transparent 70%);
  overflow: hidden;
  /* Bezugsgroesse fuer ::before: Dessen Hoehe muss die BREITE dieser Spalte
     kennen, sonst wird das Bild in schmalen, hohen Spalten breiter als die Box
     und hart abgeschnitten. Gemessen bei 834x1194 (Tablet hochkant): Box 455
     breit, Bild 1186 — zwei Drittel lagen ausserhalb. */
  container-type: size;
  order: 2;
  /* Das Bild ist querformatig (967x815, Verhaeltnis 1,19), die Spalte
     hochformatig. `contain` wird dadurch von der BREITE begrenzt, nicht von
     der Hoehe — das Portraet blieb kleiner als der Platz. Die Spalte nimmt
     sich deshalb den rechten und den unteren Innenabstand des Hero zurueck.
     Unten heisst das zugleich: buendig an der Abschnittskante. */
  /* Oben KEIN negativer Abstand: Sonst laeuft der Kopf unter die fixierte
     Kopfzeile. Gemessen bei 1920 — mit -96px beginnt das Haar auf Hoehe der
     Navigation. */
  margin-right: calc(-1 * var(--hero-pad-x));
  margin-bottom: -96px;

  /* KEIN seitlicher Verlauf mehr (Niki, 06.10.: „Kanten duerfen scharf enden").
     Er stammte aus einer Zeit, in der die Schultern am Bildrand abgeschnitten
     waren. Die heutige Freistellung ist das nicht: Gemessen am Alphakanal
     beginnt die Silhouette an der breitesten Stelle (unterste Zeile) erst bei
     2,2 % der Bildbreite, und sie hat einen eigenen sauberen Saum von 3 bis
     8 px. Der 6-%-Verlauf hat deshalb keine Schnittkante kaschiert, sondern
     echte Schulter weggeblendet.
     Damit das so bleibt, darf die Spalte das Bild nicht anschneiden — siehe den
     Faktor bei ::before. */
  /* Kein Radius mehr: Es gibt keine Bildkante zu runden. Die frueheren 12px
     links erzeugten ueber 1600px Fensterbreite zwei eckige Ecken mitten auf
     der Flaeche, weil .hero dort endet. */
  border-radius: 0;
}

/* Der fruehere ::after legte einen dunklen Verlauf ueber die linke Bildkante,
   damit das Foto dort nicht hart ansetzte. Ohne Rechteck gibt es diese Kante
   nicht mehr — die Regel ist ersatzlos entfallen. */

.hero-content {
  /* Bleibt bei 42 %. Gemessen am 02.10.: .hero-content traegt 96 px
     Innenabstand, "Fleischhauer" braucht 444 px bei 1440 und 543 px bei 1920 —
     die Spalte muss also mindestens 540 bzw. 639 px breit sein. 38 % lieferte
     517/584, die Ueberschrift wurde abgeschnitten. Hier ist kein Platz fuer das
     Portraet zu holen.
     max-width: der Wert, den 42 % bei 1600 px ergaben. Damit bleibt die
     Zeilenlaenge lesbar, waehrend der Hero breiter werden darf. */
  width: 42%;
  max-width: 645px;
  flex-shrink: 0;
  background: transparent;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  order: 1;
  overflow: hidden;
  transition: background var(--dur-mid);
}

.hero-content .cta {
  white-space: nowrap;
  align-self: flex-start;
}

/* ─── HERO ENTRANCE: „Bühne geht an" beim Laden (CSS-only) ─── */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-entrance-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-photo-zoom {
  /* translateX(-50%) MUSS hier stehen: Eine Animation auf transform ersetzt den
     ganzen Wert. Ohne sie saesse das Bild waehrend der 1,3 Sekunden um die
     halbe Bildbreite nach rechts versetzt. */
  from { transform: translateX(-50%) scale(1.06); }
  to   { transform: translateX(-50%) scale(1); }
}

/* Foto: sanft einblenden, darin ein zoomendes ::before (von overflow:hidden geclippt → kein Überlauf) */
.hero-bg { animation: hero-entrance-fade 1s ease both; }
.hero-bg::before {
  content: '';
  position: absolute;
  /* ─── Das Element IST das Bild, nicht eine Box mit einem Bild darin ───
     Vorher: inset: 0 und background-size: auto 100%. Das Element war dann so
     breit wie die Spalte, das Bild schwamm zentriert darin — mit je nach
     Fenster unterschiedlich viel Luft (gemessen: 15 px Ueberlappung bei 1440,
     82 px Luft bei 1920, 16 px bei 3440).
     Die Maske sitzt aber auf dem ELEMENT. Ein Verlauf in Prozent traf das Bild
     dadurch mal zu 6, mal zu 12 Prozent; ein fester Wert von 50 px haette bei
     1920 vollstaendig in der Luft gelegen und das Bild gar nicht beruehrt.
     Jetzt bestimmt die Hoehe die Groesse und aspect-ratio die Breite — Element-
     und Bildkante liegen immer aufeinander, und der Verlauf unten trifft
     ueberall dieselbe Stelle der Schulter. */
  bottom: 0;
  left: 50%;
  /* So gross wie moeglich, aber hoechstens 104 % der Spaltenbreite.
     Reines `contain` (Faktor 1) war zu streng: Auf einem hohen Fenster blieb
     das Portraet auf Spaltenbreite stehen und liess darueber viel Luft
     (gemessen 1296x1308: Foto 735x619 in einer 735x1212 Spalte). Ohne jede
     Grenze dagegen wurde es auf dem Tablet hochkant zerschnitten (834x1194:
     1186 px Bild in einer 455er Spalte, zwei Drittel ausserhalb).
     104 % statt der frueheren 125 %: Ohne Verlauf muss der Ueberstand INNERHALB
     des durchsichtigen Randes der Freistellung bleiben, sonst steht an der
     Spaltenkante eine senkrechte Schnittkante mitten im Hemd. Der Ueberstand je
     Seite betraegt (k-1)/2k der Bildbreite — bei 1,04 sind das 1,9 %, die
     Silhouette beginnt bei 2,2 %. Bei 1,25 waeren es 10 % gewesen, also mitten
     im Stoff.
     Im gestapelten Layout (<= 1023 px) traegt .hero-bg dasselbe
     Seitenverhaeltnis wie das Bild, dort ist min() immer die 100 % — der Faktor
     wirkt sich nicht aus. */
  height: min(100%, calc(100cqw * 1.04 / 1.186));
  aspect-ratio: 967 / 815;
  /* Pfad RELATIV — die Druckvorlagen und die Pruefung per file:// loesen sonst
     nicht auf. */
  background-image: url('Niki-freigestellt.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* translateX haelt die Zentrierung; der Ursprung unten sorgt dafuer, dass der
     Einblend-Zoom das Hemd nicht von der Unterkante loest. Beides muss in den
     Keyframes wiederholt werden, sonst ueberschreibt die Animation das
     translateX und das Bild springt beim Laden aus der Mitte. */
  transform: translateX(-50%);
  transform-origin: center bottom;
  animation: hero-photo-zoom 1.3s var(--ease) both;
}


/* Content: gestaffelt von unten einblenden (Label → Name → CTA → Kurzprofil) */
.hero-content > * { animation: hero-rise 0.7s var(--ease) both; }
.hero-content > *:nth-child(1) { animation-delay: 0.20s; }
.hero-content > *:nth-child(2) { animation-delay: 0.32s; }
.hero-content > *:nth-child(3) { animation-delay: 0.46s; }
.hero-content > *:nth-child(4) { animation-delay: 0.58s; }
.hero-content > *:nth-child(5) { animation-delay: 0.70s; }

/* Vollbreiter Aurora-Layer (100vw, edge-to-edge), vertikal auf Hero-Höhe geclippt, hinter Foto + Text */
.hero-aura {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* weiche Kanten rundum (alle 4 Seiten) → nie ein harter Schnittrand, egal wohin die Wolken driften */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 82%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 82%, transparent 100%);
}
.hero-aura::before,
.hero-aura::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: blur(30px);
}
/* Mehrere weiche Spots über die ganze Breite verteilt — wabern nur sanft an Ort und Stelle */
.hero-aura::before {
  background:
    radial-gradient(26% 42% at 14% 32%, var(--aura-1), transparent 60%),
    radial-gradient(24% 40% at 40% 70%, var(--aura-2), transparent 60%),
    radial-gradient(28% 44% at 66% 30%, var(--aura-1), transparent 60%),
    radial-gradient(26% 42% at 88% 64%, var(--aura-2), transparent 60%);
  animation: aura-a 15s var(--ease-loop) infinite alternate;
}
.hero-aura::after {
  background:
    radial-gradient(28% 44% at 26% 62%, var(--aura-2), transparent 60%),
    radial-gradient(26% 40% at 54% 26%, var(--aura-1), transparent 60%),
    radial-gradient(28% 44% at 80% 44%, var(--aura-2), transparent 60%);
  animation: aura-b 19s var(--ease-loop) infinite alternate;
}
@keyframes aura-a {
  0%   { transform: translate3d(-7%, -4%, 0) scale(1.02); opacity: 0.75; }
  50%  { transform: translate3d(6%, 5%, 0)   scale(1.16); opacity: 1; }
  100% { transform: translate3d(-4%, -6%, 0) scale(1.07); opacity: 0.85; }
}
@keyframes aura-b {
  0%   { transform: translate3d(6%, 4%, 0)   scale(1.08); opacity: 0.9; }
  50%  { transform: translate3d(-7%, -5%, 0) scale(1.20); opacity: 0.68; }
  100% { transform: translate3d(5%, 6%, 0)   scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-bg::before,
  .hero-aura::before,
  .hero-aura::after,
  .hero-content > * { animation: none; }
  header,
  .mobile-menu,
  .nav-here { transition: none; }
}

.scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent-rest);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scroll-bounce 0.9s var(--ease-loop) infinite, hero-entrance-fade var(--dur-slow) ease 0.9s backwards;
  transition: opacity var(--dur-mid) ease, color var(--dur-fast) ease;
  z-index: 10;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible {
  color: var(--accent-hover);
}

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes scroll-bounce {
  0%   { transform: translateX(-50%) translateY(0);   animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6); }
  55%  { transform: translateX(-50%) translateY(9px); animation-timing-function: cubic-bezier(0, 0.4, 0.6, 1); }
  100% { transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator { animation: none; }
}

.hero-name {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.hero-label {
  font-size: 0.95rem;
  color: var(--text-mute);
  margin-bottom: 1.75rem;
}

/* Die Ueberschrift traegt seit dem Hero-Vorschlag die Aussage, nicht mehr den
   Namen. 36 px mobil bis 60 px breit — kleiner als die 72 px des Vorschlags,
   weil die Textspalte bei 42 % bleibt (Portraet gross). Mit 4,2vw brach die
   Zeile dort auf fuenf Zeilen um und der Hero wurde hoeher als das Fenster. */
.hero h1 {
  font-size: clamp(2.25rem, 3.3vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.hero-text {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 34em;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.cta {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.75rem;
  /* Lachs und Blau sind EIN Hintergrund mit zwei Lagen: unten die Farbe, oben
     ein einfarbiger Verlauf, dessen Breite beim Hover von 0 auf 100 % waechst.
     Siehe Kommentar beim Hover. */
  background-color: var(--accent-ink);
  background-image: linear-gradient(var(--accent-ink-2), var(--accent-ink-2));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size var(--dur-mid) var(--ease);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 4px;
  letter-spacing: 0.03em;
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Maus/Klick: kein Outline; nur Tastatur-Fokus zeigt einen Ring */
.cta:focus { outline: none; }
.cta:focus-visible { outline: 2px solid var(--accent-ink-2); outline-offset: 2px; }

/* Hover: Blau wischt von links nach rechts über das Lachs.
   Bis 10/2026 war das Blau ein eigenes ::before-Layer ueber dem Knopf
   (overflow: hidden, z-index). Der Browser rundet die Lachsflaeche des Knopfs
   und die Clip-Kante des Layers getrennt — lag der Knopf auf einer krummen
   Position (gemessen im Hero: Oberkante 624,406 px), blieb unten eine
   Pixelzeile Lachs stehen. Ein Ueberstand von 1 px half nur bei guenstiger
   Lage; der Streifen kam zweimal wieder. Als Hintergrundlagen desselben
   Elements haben beide Farben dieselbe Kante, eine Luecke ist unmoeglich. */
.cta:hover,
.cta:focus-visible { background-size: 100% 100%; }

.cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.cta:disabled { background-size: 0% 100%; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* ─── LEISTUNGEN ─────────────────────────────────────────── */
/* Seit dem Leistungs-Vorschlag (10/2026) keine Kacheln mehr: drei offene
   Spalten mit Nummer, Kicker, Titel, Linie und Text. Der Text ist immer
   sichtbar — der fruehere Crossfade bei Hover zeigte ihn auf Touch-Geraeten
   praktisch nie. Die Klassennamen .cards/.card bleiben, weil script.js das
   Scroll-Reveal daran haengt. */

/* Bewusst groesser als die uebrigen h2 (Entscheidung Niki), aber immer
   kleiner als die Hero-h1: 2,9vw gegen 3,3vw. Mit 3,4vw war sie bei 1440 px
   49 px gross, die Hero-Headline nur 48. */
#leistung h2,
#erfahrung h2,
#branchen h2,
#stimmen h2,
#kontakt h2 {
  font-size: clamp(2rem, 2.9vw, 3.25rem);
  /* Gleicht die Zeilen aus: In der schmalen Spalte der Haltung stand sonst
     „ist." allein in der zweiten Zeile. */
  text-wrap: balance;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}

.section-intro {
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 38em;
  margin-bottom: 3.5rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2.5rem;
}

/* Kicker, Titel und Text teilen sich ueber alle drei Spalten dieselben
   Zeilen. Sonst sass die Linie unter „Projekt- & Produktmanagement"
   (zweizeilig) tiefer als in den Nachbarspalten. Ohne subgrid-Unterstuetzung
   bleibt es beim einfachen Raster — nur die Linien stehen dann versetzt. */
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
/* h3 streckt sich ueber die ganze Zeile (Standard): Der Titel steht oben
   direkt unter dem Kicker, die Linie (border-bottom) am Zeilenende — damit
   in allen drei Spalten auf derselben Hoehe. */

.card__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 0.75rem;
}

.card__num { color: var(--accent-ink); }

.card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.card p:not(.card__kicker) {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-mute);
}

/* ─── TESTIMONIALS (Stimmen) ─────────────────────────────── */
/* Handoff „Stimmen 3b" (10/2026): Kernsatz gross, ganzes Zitat zum
   Aufklappen — vorher waren die Karten sehr ungleich hoch, weil ein Zitat
   viel laenger ist als die anderen. align-items: start, damit beim
   Aufklappen nur die eine Karte waechst. Wie bei den Referenzen in der
   900-px-Breite und mit der grossen Ueberschrift statt der Handoff-Werte.
   Kein Hover-Anheben: Die Karten sind nicht klickbar. */
#stimmen h2 { margin-bottom: 2rem; }

.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.testimonial {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.testimonial__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Gefuellte Akzentflaeche — dieselbe Regel wie beim CTA und beim Skip-Link
     (DESIGN.md): Fuellung aus den Ink-Toenen, Text darauf --on-accent
     (5,04/5,30:1 Light, 6,23/8,78:1 Dark). Das Handoff nennt rohe Markentoene
     und #1A1A1A — im hellen Theme laege das unter AA. */
  background: linear-gradient(135deg, var(--accent-ink), var(--accent-ink-2));
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
img.testimonial__avatar {
  object-fit: cover;
  background: none;
  filter: grayscale(1);
}

.testimonial__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.testimonial__name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.testimonial__role { font-size: 0.82rem; font-weight: 300; line-height: 1.4; color: var(--text-mute); }

/* Generische blockquote-Regel neutralisieren (Groesse, Strich, Abstand). */
.testimonial__kern {
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
  min-height: 3.9em;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Aufklappen ueber grid-template-rows 0fr -> 1fr: animiert auf die echte
   Hoehe, ohne sie zu kennen. */
.testimonial__full {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.testimonial.is-open .testimonial__full { grid-template-rows: 1fr; }
.testimonial__full-inner { overflow: hidden; min-height: 0; }

/* Ohne JavaScript bleibt der Knopf versteckt und das Zitat offen.
   [hidden] braucht die eigene Regel, sonst hebt display: inline-flex es auf. */
.testimonial__toggle[hidden] { display: none; }
.testimonial:has(.testimonial__toggle[hidden]) .testimonial__full { grid-template-rows: 1fr; }

.testimonial__quote {
  margin-top: 1.25rem;
  padding-left: 16px;
  /* Neutral seit 10/2026, vorher --accent-ink-2: ruhendes Blau auf einer
     grossen Flaeche weicht „Blau reagiert" auf. Lachs verworfen —
     dann standen Streifen und „Weniger anzeigen" als zwei Lachs-Elemente
     untereinander. */
  border-left: 2px solid var(--border);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mute);
}

.testimonial__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: 500 14px/1.2 "Plus Jakarta Sans", sans-serif;
  color: var(--accent-ink);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.testimonial__toggle:focus-visible { outline: 2px solid var(--accent-ink-2); outline-offset: 2px; color: var(--accent-ink-2); }
@media (hover: hover) {
  .testimonial__toggle:hover { color: var(--accent-ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial__full, .testimonial__toggle { transition: none; }
}

@media (min-width: 1440px) {
  .testimonial { padding: 36px; }
  .testimonial__kern { font-size: 1.5rem; }
}
@media (max-width: 1099px) {
  .testimonials { gap: 16px; }
  .testimonial { padding: 24px; }
  .testimonial__avatar { width: 44px; height: 44px; }
  .testimonial__kern { font-size: 1.2rem; min-height: 4.2em; }
  .testimonial__quote { font-size: 14px; }
}
@media (max-width: 639px) {
  .testimonials { grid-template-columns: 1fr; }
  .testimonial { padding: 24px 20px; }
  .testimonial__avatar { width: 40px; height: 40px; }
  .testimonial__kern { font-size: 1.125rem; min-height: 0; }
}

/* ─── ERFAHRUNG ─────────────────────────────────────────── */
/* Seit dem Umbau 10/2026 ohne Zeitstrahl-Punkte und senkrechte Linie: drei
   Stationen untereinander, getrennt durch feine Linien. Die Entwicklung soll
   allein ueber Typografie und Reihenfolge lesbar sein. */
.split__kopf .section-intro { margin-bottom: 0; }

.exp-item {
  padding: 2.75rem 0;
  border-top: 1px solid var(--border);
}
.exp-item:first-child { padding-top: 0; border-top: none; }
.exp-item:last-child { padding-bottom: 0; }

.exp-year {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  margin-bottom: 0.5rem;
}

.exp-item h3 {
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.exp-item p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-mute);
}

/* ─── HALTUNG (#ueberzeugung) ────────────────────────────── */
/* Flaeche --band: Der Abschnitt soll Gewicht haben — im hellen Theme ein
   dunkles Navy-Band, im dunklen der tiefste Ton der Seite.
   Deshalb nur die --navy-*-Tokens, die fuer genau diesen Grund ausgelegt
   sind (Text 9,3:1, gedaempft 5,7:1, Lachs 4,8:1). --accent-ink waere hier
   im hellen Theme zu dunkel. Die Sprungadresse bleibt #ueberzeugung, damit
   bestehende Links weiter funktionieren. */
section.haltung {
  background: var(--band);
  color: var(--navy-text);
}

/* 40/60-Raster der Erfahrung. Die Haltung nutzte es bis 10/2026 ebenfalls —
   zwei gleich gebaute Abschnitte hintereinander wirkten gleichfoermig, die
   Haltung ist deshalb jetzt zentriert (Manifest). */
.split-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 4rem;
  align-items: start;
}

.haltung .section-label { color: var(--navy-accent); }

/* Manifest: als einziger Abschnitt der Seite zentriert — eine Zaesur
   zwischen Leistungen und Erfahrung, die beide links ausgerichtet sind.
   Reihenfolge: Kicker, Ueberschrift (leitet ein), Aussage (traegt),
   Absaetze in schmaler Spalte, Schlusssatz. */
.haltung-inner { text-align: center; }

.haltung h2 {
  color: var(--navy-mute);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 1.25rem;
}

/* Gross, aber unter der Hero-h1 (3,3vw). */
.haltung__aussage {
  font-size: clamp(2rem, 3.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy-text);
  text-wrap: balance;
  max-width: 16em;
  margin: 0 auto 4rem;
}

.haltung__text {
  max-width: 36rem;
  margin: 0 auto;
  text-align: left;
}

.haltung__text p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--navy-text);
  margin-bottom: 1.5rem;
}

/* Schlusssatz zentriert, abgesetzt durch einen kurzen Strich darueber. */
.haltung__text .haltung__schluss {
  text-align: center;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
  margin-top: 3.5rem;
  margin-bottom: 0;
}
.haltung__schluss::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  margin: 0 auto 2rem;
  background: var(--navy-accent);
}

@media (max-width: 900px) {
  .split-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Generische Zitat-Regel. Wird seit dem Umbau der Haltung nur noch von den
   Testimonials genutzt, die alles ausser font-weight ueberschreiben — die
   Regel bleibt deshalb stehen. */
blockquote {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  border-left: 3px solid var(--border);
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ─── UEBER MICH ─────────────────────────────────────────── */
/* Bewusst KEIN 40/60 wie Haltung und Erfahrung: eine Treppe von links oben
   nach rechts unten. Ueberschrift ueber gut drei Viertel der Breite, darunter
   der Lead links, die beiden Absaetze nach rechts versetzt, die Standortzeile
   unten links gegenueber. Die linke Kante bleibt die der anderen Abschnitte.
   Typografische Variante — es gibt kein zweites Portraet ausser dem Hero-Foto. */
.ueber-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
}
.ueber-inner > * { grid-column: 1 / -1; }

/* So gross wie moeglich, aber unter der Hero-h1 (3,3vw): 2rem bis 3,5rem. */
#ueber h2 {
  grid-column: 1 / span 10;
  font-size: clamp(2rem, 3.15vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 3.5rem;
}

.ueber__lead {
  grid-column: 1 / span 7;
  font-size: clamp(1.1875rem, 1.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text);
}

.ueber__text {
  grid-column: 6 / -1;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-mute);
  margin-top: 1.75rem;
}
.ueber__lead + .ueber__text { margin-top: 3rem; }

/* Kurzprofil-Link unten links neben den Absaetzen der rechten Spalte
   (frueher stand dort die Standortzeile). Mobil folgt er dem Text. */
.ueber__facts {
  grid-column: 1 / span 5;
  grid-row: 4 / span 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 768px) {
  .ueber-inner > *,
  #ueber h2,
  .ueber__lead,
  .ueber__text { grid-column: 1 / -1; }
  #ueber h2 { margin-bottom: 2rem; }
  .ueber__lead + .ueber__text { margin-top: 1.75rem; }
  .ueber__facts { grid-row: auto; margin-top: 2.5rem; }
}

/* ─── CONTACT ────────────────────────────────────────────── */
/* Handoff „Kontakt 5a" (10/2026): zwei Spalten — links Kontaktwege und
   Standort, rechts das Formular in einer Karte. Abweichend vom Handoff in
   der 900-px-Breite (linke Kante wie alle Abschnitte) und mit der grossen
   Abschnitts-Ueberschrift: Die fruehere clamp(2rem, 5vw, 3.5rem) war mit
   56 px groesser als die Hero-h1. */
#kontakt h2 { margin-bottom: 3rem; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "ways  card"
    "place card";
  column-gap: 4rem;
  row-gap: 2rem;
  align-items: start;
}
.contact-ways  { grid-area: ways; display: flex; flex-direction: column; gap: 2rem; }
.contact-place { grid-area: place; display: flex; flex-direction: column; gap: 0.6rem; }
.contact-card {
  grid-area: card;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; }
  .contact-card { padding: 1.75rem; }
}
@media (max-width: 767px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "ways" "card" "place";
    row-gap: 2.5rem;
  }
  .contact-card { padding: 1.25rem; }
}

.contact-block-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

/* Kein Pfeil mehr davor (seit 10/2026). Er war blau und ruhte — gegen
   „Lachs ruht, Blau reagiert" — und stand vor Beschriftungen, die man nicht
   anklicken kann, waehrend derselbe Pfeil bei „Ganzes Zitat lesen" eine
   Aktion bedeutet. Pfeile gibt es jetzt nur noch an klickbaren Elementen. */

/* Einsatzgebiet unter dem Standortfoto (seit 10/2026, vorher letzter Absatz
   in „Über mich"). Fliesstext-Ton, kein Akzent: eine Angabe, keine Aktion. */
.contact-area {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 30em;
}

.contact-block a {
  font-size: 1.1rem;
  color: var(--accent-ink);
  transition: color var(--dur-fast);
  /* Klickziel mindestens 44 px hoch */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
}

.contact-block a:hover,
.contact-block a:focus-visible {
  color: var(--accent-ink-2);
}

/* Gleiche Groesse wie WhatsApp und LinkedIn (seit 10/2026; vorher 1.5rem —
   das lauteste Element im Kontakt, wirkte wie der bevorzugte Weg). Groesse
   und Farbe kommen aus .contact-block a. */

.contact-block #tel-link:hover,
.contact-block #tel-link:focus-visible {
  color: var(--accent-ink-2);
}

/* Nur mobil, seit 03/2026 (ed9cc31) bewusst so — WhatsApp ist ein Weg vom
   Telefon aus; am Desktop oeffnet wa.me nur WhatsApp Web. */
.whatsapp-block { display: none; }

@media (max-width: 768px) {
  .whatsapp-block { display: flex; }
}

.whatsapp-block { gap: 0.9rem; }

/* Icon plus Text wie bei LinkedIn (seit 10/2026; vorher nur das Icon mit
   aria-label „WhatsApp" — jetzt traegt der sichtbare Text den Namen). */
.contact-block #whatsapp-link {
  color: var(--accent-ink);
  gap: 0.6rem;
}
.contact-block #whatsapp-link:hover,
.contact-block #whatsapp-link:focus-visible { color: var(--accent-ink-2); }
.contact-block #whatsapp-link svg { display: block; width: 24px; height: 24px; }

.linkedin-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 0.6rem;
}

.linkedin-link svg {
  width: 24px;
  height: 24px;
  color: var(--accent-ink);
  transition: color var(--dur-fast);
}

.linkedin-link:hover svg,
.linkedin-link:focus-visible svg {
  color: var(--accent-ink-2);
}

/* ─── MAP ────────────────────────────────────────────────── */
.map-container {
  position: relative;
  width: 100%;
  /* 16:10 auf allen Breiten (seit 10/2026, vorher 4:3 am Desktop). Seit das
     Einsatzgebiet unter dem Foto steht, ragte die linke Spalte sonst rund
     30 px ueber die Formularkarte hinaus. Davor: fest 220 px volle Breite. */
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast);
}

.map-container:hover {
  border-color: var(--accent-hover);
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: grayscale(100%) brightness(0.6) sepia(40%) hue-rotate(180deg) saturate(200%);
  pointer-events: none;
}

/* Startzustand: Bürofoto über der Karte; bei Hover/Fokus ausblenden → Karte */
.map-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  /* exakt derselbe Filter wie die Karte → identischer (leicht blauer) Unterton;
     der Navy-Tint-Layer (.map-overlay) liegt darüber */
  filter: grayscale(100%) brightness(0.6) sepia(40%) hue-rotate(180deg) saturate(200%);
  transition: opacity var(--dur-mid) ease;
}

.map-container:hover .map-photo,
.map-container:focus-within .map-photo {
  opacity: 0;
}

/* POI-Marker erst mit der Karte (Hover/Fokus) einblenden */
.map-container:hover .map-pin,
.map-container:focus-within .map-pin {
  opacity: 1;
}

/* Label: lachs im Foto-Startzustand, hellblau bei Hover/Fokus (Karte) */
.map-container:hover .map-label,
.map-container:focus-within .map-label {
  color: var(--accent-hover);
}

/* Statischer Modus (Live-OSM-Karte deaktiviert): Foto immer sichtbar, kein Karten-Pin.
   Reversibel — wird inaktiv, sobald .map-static am Container entfernt wird. */
.map-container.map-static:hover .map-photo,
.map-container.map-static:focus-within .map-photo { opacity: 1; }
.map-container.map-static .map-pin { display: none; }
.map-container.map-static .map-overlay { align-items: flex-end; text-align: right; }

/* Touch-Geräte (kein Hover): Foto weglassen, direkt die Karte + Marker zeigen */
@media (hover: none) {
  .map-photo { display: none; }
  .map-pin { opacity: 1; }
  /* Im statischen Modus bleibt das Foto auch auf Touch sichtbar (keine Live-Karte) */
  .map-container.map-static .map-photo { display: block; }
  /* Touch hat kein Hover → Maps-Hinweis dort dauerhaft zeigen */
  .map-container.map-static .map-cta { opacity: 1; }
}

.map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(28, 37, 48, 0.25);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast);
}

.map-overlay:hover {
  background: rgba(28, 37, 48, 0.15);
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--c-blue);
  border-radius: 50% 50% 50% 0;
  /* zentriert auf die Marker-Koordinate der Karte (Tipp zeigt nach unten) */
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 0 0 5px rgba(119, 192, 241, 0.3);
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
}

.map-label {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-rest);
  margin-top: 0.25rem;
  transition: color var(--dur-fast) ease;
}

.map-address {
  font-size: 0.8rem;
  /* War #e6ecf2 — eine Ziffer neben --navy-text (#e7edf3), offenbar von Hand
     getippt. Der Unterschied ist nicht sichtbar (13,01:1 gegen 13,12:1), aber
     ein roher Wert im Stylesheet faellt keiner der drei Abschnitte des
     Doc-Sync-Checks auf: A und B vergleichen nur Token-NAMEN. */
  color: var(--navy-text);
  text-align: center;
}

/* Klick-Hinweis „In Google Maps öffnen" mit Pin (Lachs → Hover Blau) */
.map-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-rest);
  opacity: 0;
  transition: opacity var(--dur-mid) ease, color var(--dur-fast) ease;
}
.map-cta-pin {
  width: 9px;
  height: 9px;
  background: currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  flex: none;
}
.map-container:hover .map-cta,
.map-container:focus-within .map-cta { opacity: 1; color: var(--accent-hover); }

/* ─── CONTACT FORM ───────────────────────────────────────── */
.contact-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Name und E-Mail untereinander, auf allen Breiten. Das Handoff sah sie ab
   1024 px nebeneinander vor — in der 900-px-Breite waeren das je 196 px, und
   eine Adresse wie vorname.nachname@unternehmen.de braucht rund 250. */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

/* Klickziel >= 44 px (Handoff Kontakt 5a); der .cta allein ist 41,3 px hoch. */
.contact-form .cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Absenden links, Datenschutzhinweis rechts */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

/* Datenschutzhinweis unter dem Absende-Knopf. Klasse C (Utility): neutral in
   Ruhe, neutral kräftiger im Hover — kein Brand-Ton, damit er den CTA direkt
   darüber nicht bedrängt. Der Hinweis muss auffindbar sein, nicht auffällig.
   Steht seit 10/2026 in einer Zeile neben dem Knopf — der fruehere negative
   Abstand nach oben entfaellt. */
.form-privacy {
  margin: 0;
  font-size: 0.8rem;
}
/* Klasse C (Utility): gedaempft, bei Hover und Fokus volle Textfarbe — wie
   die Fusszeile. Anders als dort unterstrichen: Ein allein stehender grauer
   Link hat sonst kein Zeichen, dass er klickbar ist (Regel in DESIGN.md).
   Bewusst kein Lachs: Der Hinweis steht neben
   dem Absende-Knopf und soll ihm keine Aufmerksamkeit nehmen.
   Bis 10/2026 stand er in --text, weil --text-mute auf --bg-alt nur 4,20:1
   erreichte; seit der Korrektur des Tokens sind es 4,82:1 (dunkel 5,26:1).
   Dabei hatte der Link keinen Hover-Zustand (Ruhe = Hover = --text). */
.form-privacy a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast);
}
.form-privacy a:hover,
.form-privacy a:focus-visible { color: var(--text); }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Wie .contact-block-label (0.75rem / 0.1em) — beide stehen im selben
   Abschnitt nebeneinander; vorher 0.8rem / 0.08em. */
.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.form-group input,
.form-group textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.65rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color var(--dur-fast);
  resize: none;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-ink-2);
}

.required-mark {
  /* Neutral statt Blau (10/2026): Blau ruht nicht. */
  color: var(--text-mute);
  margin-left: 0.2rem;
}

.field-error {
  display: none;
  font-size: 0.8rem;
  color: var(--accent-ink);
  margin-top: 0.25rem;
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: var(--accent-ink);
}

.form-group.has-error .field-error {
  display: block;
}

/* Serverseitiger Fehler (?formular=fehler): gleiche Farbe wie die Feldfehler,
   aber als Absatz ueber dem Formular — er betrifft nicht ein Feld, sondern
   den Versand. [hidden] wird ueber das Attribut gesteuert, nicht per Klasse. */
.form-error {
  font-size: 0.9rem;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}

.is-hidden {
  display: none;
}

/* ─── CERT BADGES (Footer) ───────────────────────────────── */
.footer-certs {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.footer-cert {
  width: 48px;
  height: auto;
  opacity: 0.8;
  transition: opacity var(--dur-fast) ease;
}

.footer-cert:hover {
  opacity: 1;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── FOOTER ─────────────────────────────────────────────── */
footer {
  /* Dezenter horizontaler Verlauf Lachs → Blau über BG */
  background:
    linear-gradient(90deg,
      rgba(255, 106, 104, 0.13) 0%,
      rgba(255, 106, 104, 0)   45%,
      rgba(119, 192, 241, 0)   55%,
      rgba(119, 192, 241, 0.13) 100%),
    var(--bg);
  border-top: 1px solid var(--border);
  transition: background var(--dur-mid), border-color var(--dur-mid);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  font-size: 0.8rem;
  color: var(--text-mute);
}

/* eine Ebene: Logo links · Badges mittig · Rechtliches rechts */
.footer-logo  { justify-self: start; }
.footer-certs { justify-self: center; }
.footer-links { justify-self: end; }

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Im Fussbereich kleiner und im gedaempften Ton — dort ist das Zeichen
   Beiwerk neben dem Copyright, nicht die Hauptmarke wie im Kopfbereich. */
.footer-logo .nf-mark {
  height: 28px;
  width: calc(28px * 346 / 220);
  background-color: var(--text-mute);
}

footer a:hover { color: var(--text); }

/* Externer Footer-Link: dezenter ↗-Marker (überlebt den Sprachumschalter, da ::after) */
.footer-link-ext::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.85em;
  vertical-align: baseline;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
/* Unter 900 px untereinander: Drei Spalten waeren bei 834 px rund 220 px
   schmal, „Projekt- & Produktmanagement" braeche dreizeilig um. Getrennt
   durch feine Linien statt durch Kaesten. */
@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .card {
    display: block;
  }
  .card + .card {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    margin-top: 2rem;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .hero-content {
    width: 44%;
    padding: 2.5rem 1.75rem 2.5rem 2.5rem;
  }
  .hero h1 {
    font-size: clamp(2.25rem, 3.3vw, 3.25rem);
  }
}

@media (max-width: 768px) {
  .nav-links { display: none; }

  /* .nav-here bleibt aus (seit 10/2026): An ihrer Stelle steht dauerhaft
     der Kontakt-Knopf. Beide nebeneinander passen nicht, ein Wechsel je
     nach Abschnitt war kurz live und wurde verworfen (Niki: nur Kontakt).
     Der Scrollspy befuellt sie weiter — schadet nicht, aria-current in den
     Menuelinks haengt nicht daran. */

  .burger { display: flex; }

  section { padding: 4rem 1.25rem; }

}

@media (max-width: 1023px) {
  /* Gestapelt statt nebeneinander — NICHT erst ab 768 px, sondern schon ab
     1023. Grund gemessen am 06.10. bei 834 x 1194 (Tablet hochkant): Die
     Bildspalte ist dort 455 px breit und 1011 px hoch. Ein querformatiges
     Portraet passt da nicht sinnvoll hinein — es wird entweder hart
     abgeschnitten oder es schrumpft auf 455 x 383 und sitzt verloren unten
     rechts, mit 600 px leerer Flaeche darueber.
     Die uebrigen Regeln (Navigation, Burger, Abschnittsabstaende) bleiben bei
     768 px: Dort geht es um Bedienung, hier um Bildproportionen. */
  .hero {
    flex-direction: column;
    padding-top: calc(60px + 1rem);
    /* Bild und Text brauchen zusammen weniger als 100vh. Der Rest verteilt
       sich dadurch oben UND unten, statt als Block unter dem Text zu haengen. */
    justify-content: center;
    /* Mindestens 100vh, aber nicht fest: Mit Ueberschrift und Einleitung ist der
       Text auf Telefonen hoeher als der Rest — er lief sonst unter den Hero, und
       der Scroll-Pfeil lag auf dem Link. */
    height: auto;
    min-height: 100vh;
    /* Mobil bleibt es bei dem, was `section` hier vorgibt (1.25rem) — die
       clamp-Untergrenze von 32 px waere hier breiter als der Rest der Seite. */
    --hero-pad-x: 1.25rem;
  }

  .hero-bg {
    /* NICHT flex: 1. Der Block nahm damit die ganze verbleibende Hoehe, das
       Bild wird aber von der BREITE begrenzt (contain, 335 px in der Spalte)
       und sitzt unten — darueber blieb eine leere Flaeche, die mit der
       Fensterhoehe mitwuchs. Jetzt folgt die Hoehe dem Seitenverhaeltnis des
       Bildes, 967 : 815. */
    flex: none;
    aspect-ratio: 967 / 815;
    order: 1;
    min-height: 0;
    border-radius: 0 0 12px 12px;
    /* Die negativen Abstaende aus der Desktop-Regel gelten NUR im
       Nebeneinander. Hier steht das Portraet UEBER dem Text — mit
       margin-bottom: -96px lag es auf dem Kicker, gemessen bei 390 px. */
    margin: 0;
  }

  /* Kein Sonderfall mehr noetig: .hero-bg traegt hier dasselbe aspect-ratio wie
     das Bild, und der Verlauf ist prozentual — er schrumpft von allein mit. */

  .hero-content {
    width: 100%;
    order: 2;
    justify-content: flex-start;
    padding: 1.25rem 1.25rem 1.5rem;
    overflow: visible;
  }
}

/* Mobile landscape: switch to side-by-side */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    flex-direction: row;
    padding-top: 60px;
  }

  .hero-bg {
    flex: 1;
    order: 2;
  }

  .hero-content {
    width: 50%;
    order: 1;
    justify-content: center;
    padding: 1.25rem 1.5rem;
  }

  .hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }

  .footer-inner > * { justify-self: center; }

}

@media (max-width: 480px) {
  nav { padding: 0 1.25rem; }

  .hero h1 { font-size: 2.25rem; word-break: break-word; }

  .hero-content .cta {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
  }

  .legal-block p,
  .legal-block li { word-break: break-word; }
}

/* ─── THANK YOU PAGE ─────────────────────────────────────── */
.thankyou-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 2rem;
}

.thankyou-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.thankyou-inner h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.thankyou-inner p {
  font-size: 1.1rem;
  color: var(--text-mute);
  max-width: 480px;
  line-height: 1.7;
}

/* ─── LEGAL PAGE ─────────────────────────────────────────── */
.legal-page {
  padding: 8rem 2rem 6rem;
}

.legal-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--text);
  /* „Datenschutzerklaerung" ist ein Wort ohne Trennstelle und passte unter
     414 px Fensterbreite nicht in eine Zeile. Gemessen am 06.10.: bei 320 px
     fehlten 92 px, bei 375 px (iPhone SE) 37, bei 390 px (iPhone 12-14) 22.
     Gesehen hat man davon nichts — `body { overflow-x: hidden }` verbirgt den
     Ueberhang, es gibt keinen Scrollbalken und keine Meldung. Der Text war
     einfach weg.
     Die Regel, die das sonst abfaengt (word-break unter 480 px), erfasst
     .legal-block p und li; dieses h1 steht ausserhalb von .legal-block.
     `hyphens` braucht in Safari vor Version 17 den Praefix — und genau dort
     tritt der Fehler auf, auf dem iPhone. overflow-wrap ist der Rueckfall fuer
     Woerter, fuer die die Silbentrennung keine Stelle findet. */
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}

.legal-block {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}

.legal-block:last-of-type {
  border-bottom: none;
}

.legal-block h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.legal-block p {
  font-size: 0.9rem;
  color: var(--text-mute);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.legal-block p:last-child { margin-bottom: 0; }

.legal-block ul {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.legal-block li {
  font-size: 0.9rem;
  color: var(--text-mute);
  line-height: 1.75;
}

.legal-block li::marker {
  /* Neutral statt Blau (10/2026): Blau ruht nicht. */
  color: var(--text-mute);
}

.legal-block a {
  color: var(--accent-ink);
  transition: color var(--dur-fast);
}

.legal-block a:hover { color: var(--accent-ink-2); text-decoration: underline; }

.back-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.03em;
  transition: color var(--dur-fast);
}

.back-link:hover,
.back-link:focus { color: var(--text); }


/* ─── BRANCHEN-FILTER (Referenzen) ─────────────────────────── */
/* Umsetzung des Handoffs „Referenzen 2a–2d" (Claude Design, 10/2026):
   Chips mit Anzahl, stabiles Raster (nicht passende Kacheln gedimmt, auf dem
   Telefon ausgeblendet), Treffer mit Lachs-Rahmen, 2/3/4/5 Spalten.
   Abweichend vom Handoff in derselben 900-px-Breite wie alle Abschnitte
   (dort 1100 px fuer fuenf Spalten) — sonst sprang die linke Kante um rund
   100 px. Deshalb hoechstens vier Spalten. Ueberschrift gross wie bei
   Leistungen und Erfahrung (Regel dort). */
#branchen .section-label { margin-bottom: 1rem; }
#branchen h2 { margin-bottom: 2rem; }

.industries {
  --ind-match: color-mix(in srgb, var(--accent-ink) 70%, transparent);
}

.industries__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.industries__chip {
  font: 500 0.82rem/1 "Plus Jakarta Sans", sans-serif;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--accent-ink);
  border-radius: 8px;
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
/* Anzahl in voller Farbe, abgesetzt nur ueber die Schriftstaerke. Mit
   opacity .6 (Handoff) lag sie bei 2,5:1. */
.industries__count { font-weight: 300; margin-left: 4px; }
.industries__chip[aria-pressed="true"] {
  background: rgba(255, 106, 104, 0.12);
  color: var(--text);
  border-color: var(--accent-ink);
}
.industries__chip:focus-visible { outline: 2px solid var(--accent-ink-2); outline-offset: 2px; }

.industries__meta {
  min-height: 1.6em;
  margin: 24px 0 32px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-mute);
}

.industries__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
/* Klick auf eine Kachel waehlt ihre Rubrik (bzw. zurueck zu „Alle").
   Bewusst KEIN Knopf: Die Kachel ist eine Abkuerzung fuer Maus und Finger.
   Tastatur und Screenreader nehmen die Chips, die dasselbe koennen — sonst
   waeren es 35 Tab-Stopps und 27 Knoepfe ohne erkennbare Aktion. */
.industries__item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease);
}
.industries__item.is-active { border-color: var(--ind-match); }
.industries__name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
  transition: color var(--dur-mid) var(--ease);
}
/* Nicht passende Kacheln ueber FARBE abschwaechen, nicht ueber Deckkraft:
   Mit opacity .22 lag der Text bei 1,6:1 — seit die Kacheln anklickbar sind,
   gilt fuer sie AA. --text-mute haelt >= 4,5:1. */
.industries__item.is-dimmed {
  border-color: color-mix(in srgb, var(--border) 45%, transparent);
}
.industries__item.is-dimmed .industries__name { color: var(--text-mute); font-weight: 500; }

/* Hover nur mit Maus — auf Touch-Geraeten bliebe er nach dem Antippen
   haengen. „Lachs ruht, Blau reagiert" gilt auch fuer aktive Kacheln. */
@media (hover: hover) {
  .industries__chip:hover { border-color: var(--accent-ink-2); color: var(--accent-ink-2); }
  /* Rahmen = Ink-Ton wie bei den Chips darueber (seit 10/2026). Vorher
     --accent-hover: im hellen Modus das helle #77C0F1, kaum sichtbar —
     und gegen die Regel „Rahmen -> Ink-Toene". Dark unveraendert. */
  .industries__item:hover,
  .industries__item.is-active:hover {
    border-color: var(--accent-ink-2);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries__chip, .industries__item, .industries__name { transition: none; }
  .industries__item:hover { transform: none; }
}

/* 640–1099: drei Spalten, Chips mit Touch-Hoehe */
@media (max-width: 1099px) {
  #branchen h2 { margin-bottom: 1.75rem; }
  .industries__filters { gap: 8px; }
  .industries__chip { min-height: 44px; }
  .industries__meta { margin: 20px 0 28px; }
  .industries__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .industries__item { height: 92px; padding: 0 14px; }
  .industries__name { font-size: 14px; }
}

/* < 640: zwei Spalten, Chips in einer waagerecht scrollbaren Zeile, die bis
   an den Bildschirmrand laeuft; nicht passende Kacheln ausgeblendet. */
@media (max-width: 639px) {
  #branchen h2 { margin-bottom: 1.5rem; }
  .industries__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1.25rem;
    padding: 0 1.25rem 4px;
  }
  .industries__filters::-webkit-scrollbar { display: none; }
  .industries__chip { flex: none; }
  .industries__meta { margin: 16px 0 24px; font-size: 14px; }
  .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .industries__item { height: 76px; padding: 0 10px; }
  .industries__name { font-size: 13px; }
  .industries__item.is-dimmed { display: none; }
}

/* ─── KLICKZIELE AUF TOUCH-BREITEN ───────────────────────── */
/* Review 10/2026: Menue-Links waren 23 px hoch, Sprach-/Theme-Knopf 30,
   Burger 24, Kurzprofil-Link 24, Fusszeilen-Links 20. Ziel 44 px — ueber
   Innenabstand bzw. eine unsichtbare Trefferflaeche, damit sich das Bild
   kaum aendert. */
@media (max-width: 768px) {
  .mobile-menu { gap: 0; }
  .mobile-menu a { display: flex; align-items: center; min-height: 44px; }

  /* Sichtbar bleiben die 30-px-Kaesten; die Trefferflaeche waechst nach
     oben und unten auf 44 px, seitlich nur so weit, dass sie sich bei
     12 px Abstand nicht ueberlappen. */
  .lang-toggle,
  .theme-toggle { position: relative; }
  .nav-cta::after,
  .lang-toggle::after,
  .theme-toggle::after {
    content: '';
    position: absolute;
    inset: -7px -6px;
  }

  .burger { padding: 14px 11px; margin-right: -11px; }


  .footer-links a,
  .footer-link-ext { display: inline-flex; align-items: center; min-height: 44px; }
}