/* ═══════════════════════════════════════════════════════════════
   NIKMAX CAPITAL — STARTSEITE UND RECHTSSEITEN
   ═══════════════════════════════════════════════════════════════
   Übernommen aus dem Entwurf NikMax-Website/index.html. Dort lag
   alles in einer Datei: Schriften und Bilder als Base64 eingebettet,
   das CSS in einer Zeile. Hier ist es auseinandergezogen, weil die
   ausgelieferte Seite andere Regeln hat als eine Vorschaudatei:

   • Die Content-Security-Policy erlaubt kein <style> im Dokument und
     keine style-Attribute (style-src 'self'). Alles Gestalterische
     muss in dieser Datei stehen.
   • Bilder werden als echte Dateien ausgeliefert, nicht als Base64.
     Nur so greifen AVIF-Aushandlung, Cache-Header und Lazy-Loading.
   • Die Schriften liegen als woff2 in /fonts (siehe fonts.css). Der
     Entwurf band sie als TTF ein — rund 1,7 MB gegenüber 180 KB.

   Gestalterisch ist nichts hinzuerfunden. Geändert wurden nur die
   gedeckten Grautöne: der Entwurf hatte fünfzehn davon, die sich
   nebeneinander nicht unterscheiden ließen und von denen neun den
   Lesbarkeitsabstand von 4,5:1 verfehlten — Fließtext bei 4,23:1,
   die Kleinversalien bei 3,4 bis 4,3:1. Zusammengezogen auf drei
   gemessene Werte; siehe den Token-Block.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════ */
:root {
  --bg:     #edeae3;   /* Seitengrund, warmes Papier */
  --paper:  #f5f3ed;   /* Karten, eine Spur heller als der Grund */
  --green:  #203930;   /* Flächen und Knöpfe */
  --ink:    #253a30;   /* Fließtext und Überschriften, 10,1:1 */
  --line:   #cfd0c5;   /* Trennlinien */

  /* ── Die gedeckten Töne ──
     Der Entwurf führte fünfzehn eng benachbarte Grüngraus. Gemessen
     unterschieden sie sich um Bruchteile einer Stufe, verfehlten aber
     reihenweise den Kontrast. Drei Werte reichen, und alle drei sind
     gegen --bg gerechnet — auf --paper stehen sie damit automatisch
     besser, nicht schlechter.

     --muted trägt Fließtext und Meta-Angaben:      4,61:1
     --leise trägt die Kleinversalien (Eyebrows):   4,58:1
     --deko  trägt die Ziffern im Fokus-Raster:     3,10:1
             Sie sind Schmuck neben der Überschrift, kein Fließtext;
             dort gilt der Schwellenwert für große Schrift. */
  --muted:  #656A61;
  --leise:  #626C5C;
  --deko:   #7B896D;

  /* Fokusring. Der einzige gewollte Bruch mit der Grünfamilie: Er soll
     sich nicht einfügen, sondern auffallen. 3,28:1 gegen den Grund,
     über dem Schwellenwert 3:1 für Bedienelement-Ränder. */
  --fokus:  #a17940;

  /* Überblendung der Bildbahn. Bewusst lang: Das ist kein
     Bedienvorgang, auf dessen Antwort jemand wartet, sondern ein
     ruhiger Wechsel im Hintergrund. */
  --dauer-szene: 900ms;

  /* Die Seite ist hell entworfen und bleibt hell. Ohne diese Zeile
     zeichnete der Browser im Dunkelmodus Bildlaufleisten und
     Formularelemente dunkel — die einzigen dunklen Teile einer sonst
     hellen Seite. */
  color-scheme: light;

  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}


/* ═══════════════════════════════════════════
   GRUNDLAGEN
   ═══════════════════════════════════════════ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Muss die Höhe der festen Leiste übersteigen, sonst landet jedes
     Sprungziel darunter und ist nicht zu sehen. */
  scroll-padding-top: 120px;
}

body { margin: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 6px;
}

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

/* Die Bilder stecken in <picture>, damit AVIF ausgehandelt werden
   kann. Daraus folgen zwei Dinge, und jedes braucht eine eigene
   Antwort:

   display:contents nimmt dem picture-Element seinen Kasten, damit es
   im Grid und im Flex-Layout nicht als zusätzliche Schachtel zählt.

   Auf die Selektoren wirkt das aber NICHT: > liest den DOM-Baum, nicht
   die Kästen. Die Bildregeln unten stehen deshalb als Nachfahren-
   Selektor (.hero-image img) und nicht mit dem Kindselektor wie im
   Entwurf — dort lag das img noch unmittelbar im Kasten. */
picture { display: contents; }

p { line-height: 1.7; }
h1, h2, h3, p { margin-top: 0; }

/* Die zweite Zeile der Überschriften läuft in der Serifenschrift. */
em {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
}

.skip {
  position: fixed;
  left: 15px;
  top: -80px;
  z-index: 20;
  padding: 15px;
  background: var(--green);
  color: white;
}
.skip:focus { top: 15px; }


/* ═══════════════════════════════════════════
   KOPFLEISTE
   ═══════════════════════════════════════════ */
/* ── Die Leiste bleibt oben ──
   position:sticky sitzt auf dem Streifen, nicht auf .header selbst.
   Der Grund: .header ist auf 1600px begrenzt und mittig gesetzt —
   klebte er so, liefe auf breiteren Schirmen der Inhalt links und
   rechts daneben vorbei, weil dort kein Hintergrund wäre. Der Streifen
   geht über die ganze Breite, die Leiste darin bleibt begrenzt.

   Die Haarlinie erscheint erst, wenn etwas darunter liegt. Oben steht
   die Leiste auf demselben Papier wie die Seite; eine Linie im
   Ruhezustand wäre ein Strich ohne Anlass. js/main.js setzt dafür die
   Klasse. */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease;
}
.header-bar.ist-gescrollt { border-bottom-color: var(--line); }

/* Rechts 18px statt 4,2 %, damit der Login-Knopf bündig mit der
   rechten Kante der Bildbahn steht — die .hero hat dieselbe
   asymmetrische Aufteilung (links der Textspalte folgend, rechts am
   Bild). Beide Kästen sind auf 1600px begrenzt und mittig gesetzt,
   die Kanten treffen sich deshalb bei jeder Fensterbreite. */
.header {
  height: 104px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 18px 0 4.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
.brand span { font-weight: 400; }

.desktop-nav { display: flex; gap: 34px; font-size: 14px; }
.desktop-nav a { position: relative; padding: 10px 0; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--green);
  transition: width .2s;
}
.desktop-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 25px; }

.language {
  font-size: 12px;
  background: none;
  border: 0;
  padding: 10px;
}

.login-link {
  font-size: 13px;
  border: 1px solid #bec4b9;
  border-radius: 5px;
  padding: 12px 17px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background .2s;
}
.login-link:hover { background: #dfe2d7; }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  width: 30px;
  height: 32px;
  padding: 7px 2px;
}
.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--green);
  margin: 6px 0;
}

.mobile-nav[hidden] { display: none; }
.mobile-nav {
  padding: 10px 6% 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  border-bottom: 1px solid var(--line);
}


/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
main { max-width: 1600px; margin: auto; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.6;
  text-transform: uppercase;
}

.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  padding: 0 18px 0 4.2%;
  min-height: 650px;
}

.hero-content {
  padding: 58px 10px 25px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero .eyebrow { color: var(--leise); margin-bottom: 38px; }

h1 {
  font-size: clamp(40px, 4.1vw, 66px);
  font-weight: 500;
  letter-spacing: -2.5px;
  line-height: 1.11;
  margin-bottom: 26px;
}
h1 em { font-size: .98em; letter-spacing: -2px; }

.hero-description {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 440px;
  margin-bottom: 30px;
}

.button {
  background: var(--green);
  color: white;
  border-radius: 5px;
  min-height: 54px;
  padding: 16px 21px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, transform .2s;
}
.button:hover { background: #36513f; transform: translateY(-2px); }
.button > span:last-child { font-size: 22px; font-weight: 400; line-height: 1; }

.hero-foot {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 24px;
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--muted);
  width: 100%;
  max-width: 460px;
  padding-top: 20px;
  margin-top: auto;
}

.hero-image {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  min-height: 650px;
  color: white;
}
.hero-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% center;
}
/* ── Die Bildbahn ──
   Fünf Szenen liegen übereinander, sichtbar ist die mit .ist-aktiv.
   Überblendet wird die Deckkraft, nicht die Position: Damit bleibt der
   Wechsel auf der Grafikkarte und löst kein Neu-Layout aus.

   isolation:isolate ist hier kein Schmuck. Ohne die Zeile bekäme die
   Szene NUR während der Überblendung einen Stapelkontext (weil
   opacity < 1 einen erzeugt) und bei voller Deckkraft keinen — die
   Bildunterschrift spränge mitten in der Bewegung hinter den Verlauf.
   So gilt in jedem Zustand dieselbe Reihenfolge: Bild, Verlauf, Text. */
.hero-slide {
  position: absolute;
  inset: 0;
  isolation: isolate;
  opacity: 0;
  transition: opacity var(--dauer-szene) ease;
}
.hero-slide.ist-aktiv { opacity: 1; }

/* Der Verlauf gehört zur Szene, nicht zum Rahmen: Er muss mit ihr
   überblenden, sonst läge über dem einblendenden Bild kurz die
   Abdunkelung des ausblendenden. Oben nur so viel, dass die Zeile am
   Bildrand trägt, unten deutlich mehr — dort steht der Firmenname in
   30px. */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #12271e38, transparent 40%, #12271eeb);
}

.image-top,
.image-bottom {
  position: absolute;
  z-index: 1;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.image-top { top: 29px; align-items: center; font-size: 12px; letter-spacing: 1px; }
.image-number {
  border: 1px solid #ffffff70;
  border-radius: 20px;
  padding: 8px 11px;
  white-space: nowrap;
}
.image-bottom { bottom: 33px; align-items: flex-end; }
.image-bottom .eyebrow {
  display: block;
  color: #dce3d9;
  font-size: 12px;
  margin-bottom: 16px;
}
.image-bottom strong {
  display: block;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.6px;
  margin-bottom: 9px;
}
.image-bottom > div > span:last-child { font-size: 14px; color: #e2e7de; }

.round-link {
  border: 1px solid #ffffff80;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  flex-shrink: 0;
  transition: background .2s;
}
.round-link:hover { background: #ffffff26; }


/* ═══════════════════════════════════════════
   LOGO-LEISTE
   ═══════════════════════════════════════════ */
.company-strip {
  padding: 48px 0 49px;
  border-bottom: 1px solid var(--line);
  margin: 0 4.2%;
}
.company-strip > .eyebrow { color: var(--leise); font-size: 12px; margin: 0 0 28px; }

.logos { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.logos a { width: 17%; display: flex; justify-content: center; }
.logos img {
  width: 100%;
  max-width: 150px;
  height: 38px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: opacity .2s;
}
.logos a:hover img { opacity: 1; filter: none; }


/* ═══════════════════════════════════════════
   SEKTIONEN
   ═══════════════════════════════════════════ */
.section { padding: 103px 4.2%; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 46px;
}
.section-head .eyebrow { margin-bottom: 23px; color: var(--leise); }

h2 {
  font-size: clamp(36px, 3.8vw, 57px);
  font-weight: 500;
  letter-spacing: -1.9px;
  line-height: 1.12;
  margin: 0;
}
h2 em { letter-spacing: -1.4px; }

.section-intro {
  max-width: 345px;
  margin-bottom: 3px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
}


/* ═══════════════════════════════════════════
   BETEILIGUNGEN
   ═══════════════════════════════════════════ */
.company {
  display: block;
  border: 1px solid #d2d5c9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color .25s;
}
.company:hover { border-color: #8c9c86; }

.company-image { position: relative; overflow: hidden; }
.company-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.company:hover .company-image img { transform: scale(1.025); }

.pill {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #f7f7efd9;
  backdrop-filter: blur(12px);
  border: 1px solid #ffffff70;
  border-radius: 25px;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .7px;
}

.featured {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  margin-bottom: 24px;
  min-height: 360px;
}
.featured .company-image { min-height: 360px; }
.featured-copy { padding: 42px; display: flex; flex-direction: column; }
.featured .eyebrow,
.card .eyebrow { color: var(--leise); font-size: 12px; letter-spacing: 1px; }
.featured h3 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.7px;
  margin: 23px 0 17px;
}
.featured p,
.card p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0; }

.card-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}

.circle-arrow {
  border: 1px solid #c6cebe;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 400;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.company:hover .circle-arrow {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card .company-image { height: 290px; }
.card-copy { padding: 29px 32px 30px; }
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0 14px;
  gap: 20px;
}
.card-title h3 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.8px; }
.domain { font-size: 14px; color: var(--muted); display: block; margin-top: 25px; }


/* ═══════════════════════════════════════════
   ÜBER UNS
   ═══════════════════════════════════════════ */
.about {
  margin: 0 18px;
  background: var(--green);
  color: #f3f3e9;
  border-radius: 7px;
  padding: 64px 4%;
}
.about .eyebrow { color: #b6c3af; margin-bottom: 27px; }
.about h2 { font-size: clamp(38px, 4.7vw, 70px); letter-spacing: -2.2px; }
.about h2 em { color: #c3d0b4; }

.about-body { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 43px; }
.about-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 25px;
  line-height: 1.5;
  max-width: 350px;
}
.about-body > div { max-width: 480px; }
.about-body > div p { font-size: 16px; color: #c7d0c2; margin-bottom: 19px; line-height: 1.8; }

.facts {
  display: grid;
  grid-template-columns: .7fr .8fr 1.3fr 1fr;
  gap: 30px;
  border-top: 1px solid #ffffff29;
  padding-top: 34px;
  margin: 40px 0 0;
}
.facts dt { font-size: 12px; letter-spacing: 1px; color: #a7b9a2; margin-bottom: 15px; }
.facts dd { margin: 0; font-size: 21px; line-height: 1.5; letter-spacing: -.4px; }
.facts dd span { display: block; color: #b5c3af; font-size: 14px; letter-spacing: 0; }


/* ═══════════════════════════════════════════
   FOKUS
   ═══════════════════════════════════════════ */
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }
.focus-grid article { border-top: 1px solid #bfc7b8; padding-top: 25px; }
.focus-index {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  color: var(--deko);
  display: block;
  margin-bottom: 35px;
}
.focus h3 { font-size: 21px; font-weight: 500; letter-spacing: -.5px; margin-bottom: 15px; }
.focus p:not(.eyebrow) { font-size: 16px; color: var(--muted); line-height: 1.8; }


/* ═══════════════════════════════════════════
   KONTAKT
   ═══════════════════════════════════════════ */
.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: end;
  gap: 55px;
  border-top: 1px solid var(--line);
  margin: 0 4.2%;
  padding: 68px 0 80px;
}
.contact .eyebrow { color: var(--leise); margin-bottom: 24px; }
.contact h2 { font-size: clamp(34px, 3.3vw, 49px); }
.contact-copy { max-width: 420px; justify-self: end; }
.contact-copy p { color: var(--muted); font-size: 16px; margin: 0 0 27px; line-height: 1.8; }

.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #849177;
  padding-bottom: 14px;
  font-size: clamp(16px, 1.65vw, 24px);
  letter-spacing: -.5px;
}
.contact-link span { font-size: 30px; }

/* Der Hinweis auf die Frühphasenseite steht unter der Adresse, weil
   der Absatz darüber schon Gründer anspricht — wer bis hierhin liest,
   ist die Zielgruppe. */
.contact-weiter { margin: 22px 0 0; font-size: 15px; line-height: 1.7; }
.contact-weiter a {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.contact-weiter a:hover { color: var(--ink); border-color: #849177; }
.contact-link:hover { color: #567044; }


/* ═══════════════════════════════════════════
   FUSSZEILE
   ═══════════════════════════════════════════ */
.footer { max-width: 1600px; margin: auto; padding: 0 4.2%; }

.footer-top {
  display: flex;
  align-items: start;
  gap: 50px;
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.footer-top .brand { margin-right: auto; }
.footer-top p { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 0; }

/* Die Trefferflächen in der Fußzeile waren 15 bis 17px hoch — unter
   den 24px, die WCAG 2.5.8 als Mindestmaß nennt. Innenabstand plus
   gleich großer negativer Außenabstand vergrößert die Fläche, ohne
   irgendetwas zu verschieben: Die Zeilen stehen weiter dort, wo sie
   vorher standen. */
.to-top,
.footer-bottom nav a {
  padding-block: 5px;
  margin-block: -5px;
}

.to-top { font-size: 14px; display: flex; gap: 20px; margin-left: 50px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .4px;
}
.footer-bottom nav { display: flex; gap: 24px; font-size: 12px; }
.footer-bottom a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════
   RECHTSSEITEN
   ═══════════════════════════════════════════
   Impressum und Datenschutz standen im Entwurf nicht — er zeigt nur
   Start- und Anmeldeseite. Sie bekommen deshalb kein eigenes Design,
   sondern die Bausteine der Startseite: dieselbe Kopfleiste, dieselbe
   Fußzeile, dieselbe Typografie. Neu ist nur der Textkörper, und der
   ist bewusst schmal — Rechtstexte werden gelesen, nicht überflogen. */
.legal { padding: 34px 4.2% 96px; max-width: 1600px; margin: auto; }
.legal-inner { max-width: 720px; }

.legal .eyebrow { color: var(--leise); margin-bottom: 22px; }
.legal h1 {
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -2px;
  margin-bottom: 48px;
}
.legal h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.4px;
  margin: 46px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p,
.legal-block {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 16px;
}
.legal-block { color: var(--ink); }
.legal a { border-bottom: 1px solid #a8b0a3; }
.legal a:hover { color: #567044; }


/* ═══════════════════════════════════════════
   AB 1500 — große Bildschirme
   ═══════════════════════════════════════════ */
@media (min-width: 1500px) {
  .hero { min-height: 740px; }
  .hero-image { min-height: 740px; }
  .hero-content { padding-top: 70px; }
  .hero-description { font-size: 23px; max-width: 490px; }
  .hero .eyebrow { margin-bottom: 45px; }
  .hero-foot { max-width: 540px; }
  .card .company-image { height: 350px; }
}


/* ═══════════════════════════════════════════
   BIS 1100 — Laptop und Tablet quer
   ═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: 600px; gap: 15px; }
  .hero-image { min-height: 600px; }
  .hero-content { padding-top: 35px; }
  h1 { font-size: 44px; letter-spacing: -2px; }
  h1 em { font-size: .93em; }
  .hero-description { font-size: 18px; }
  .hero .eyebrow { font-size: 12px; }
  .hero-foot { gap: 15px; flex-wrap: wrap; }
  .image-top, .image-bottom { left: 23px; right: 23px; }
  .image-bottom strong { font-size: 25px; }
  .featured-copy { padding: 30px; }
  .featured h3 { font-size: 29px; }
  .featured .company-image { min-height: 350px; }
  .card .company-image { height: 230px; }
  .section-head { gap: 35px; }
  .section-intro { max-width: 290px; }
  .about-body { gap: 45px; }
  .facts { gap: 20px; }
  .facts dd { font-size: 18px; }
  .contact { gap: 35px; }
}


/* ═══════════════════════════════════════════
   BIS 800 — Tablet hoch und Handy quer
   ═══════════════════════════════════════════ */
@media (max-width: 800px) {
  .header { height: 83px; padding: 0 14px 0 5%; gap: 20px; }
  html { scroll-padding-top: 99px; }
  .brand { font-size: 24px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .header-actions { gap: 15px; }

  .hero { grid-template-columns: 1fr; padding: 0 14px; gap: 25px; }
  .hero-content { padding: 25px 5% 0; }
  .hero .eyebrow { margin-bottom: 24px; }
  h1 { font-size: clamp(39px, 7.7vw, 61px); letter-spacing: -2px; }
  .hero-description { font-size: 20px; max-width: 500px; margin-bottom: 25px; }
  .hero-foot { margin-top: 32px; max-width: none; }
  .hero-image { min-height: 460px; max-height: 580px; }
  .hero-image img { object-position: center 42%; }
  .image-top { top: 23px; }
  .hero .image-bottom .eyebrow { margin-bottom: 13px; }
  .image-bottom strong { font-size: 29px; }

  .company-strip { padding: 35px 0; margin: 0 6%; }
  .logos { gap: 22px; flex-wrap: wrap; justify-content: center; }
  .logos a { width: 26%; }
  .logos img { height: 32px; }
  .company-strip > .eyebrow { text-align: center; margin-bottom: 25px; }

  .section { padding: 65px 6%; }
  .section-head { display: block; margin-bottom: 32px; }
  h2 { font-size: 42px; }
  .section-intro { max-width: 470px; margin: 24px 0 0; }

  .featured { grid-template-columns: 1fr; min-height: 0; }
  .featured .company-image { height: 300px; min-height: 0; }
  .featured-copy { padding: 30px; }
  .featured h3 { margin-top: 15px; }
  .card .company-image { height: 205px; }
  .card-copy { padding: 23px; }
  .card-title h3 { font-size: 25px; }

  .about { padding: 42px 5%; margin: 0 14px; }
  .about h2 { font-size: 47px; }
  .about-body { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  .about-lead { font-size: 23px; max-width: 100%; margin-bottom: 12px; }
  .about-body > div { max-width: 100%; }
  .facts { grid-template-columns: 1fr 1fr; gap: 29px; margin-top: 25px; }

  .focus-grid { gap: 25px; }
  .focus h3 { font-size: 19px; }

  .contact { grid-template-columns: 1fr; gap: 27px; margin: 0 6%; padding: 50px 0; }
  .contact h2 { font-size: 42px; }
  .contact-copy { max-width: 100%; justify-self: stretch; }
  .contact-link { font-size: 23px; max-width: 420px; }

  .footer { padding: 0 6%; }
  .footer-top { gap: 25px; flex-wrap: wrap; padding: 30px 0; }
  .to-top { margin-left: 0; }
  .footer-bottom { flex-wrap: wrap; }
  .footer-bottom > span:nth-child(2) { display: none; }

  .legal { padding: 20px 6% 70px; }
}


/* ═══════════════════════════════════════════
   BIS 500 — Handy
   ═══════════════════════════════════════════ */
@media (max-width: 500px) {
  .header { height: 78px; }
  html { scroll-padding-top: 94px; }
  .brand { font-size: 22px; }
  .header-actions { gap: 10px; }
  .login-link { padding: 10px 11px; font-size: 14px; }
  .language { padding: 8px; }

  .hero-content { padding: 20px 3% 0; }
  h1 { font-size: 39px; letter-spacing: -1.8px; }
  h1 em { letter-spacing: -1.7px; }
  .hero-description { font-size: 18px; }
  .hero .eyebrow { letter-spacing: 1px; }
  .button { font-size: 14px; gap: 22px; padding: 15px 18px; }
  .hero-foot { gap: 15px; }
  .hero-image { min-height: 400px; }
  .image-top, .image-bottom { left: 23px; right: 23px; }
  .image-label { max-width: 180px; line-height: 1.5; }
  .image-bottom strong { font-size: 26px; }

  .company-strip { padding: 29px 0 32px; }
  .logos { gap: 26px; }
  .logos a { width: 25%; }
  .logos img { height: 28px; }

  .section { padding: 53px 6%; }
  .section-head .eyebrow { margin-bottom: 18px; }
  h2 { font-size: 35px; letter-spacing: -1.5px; }
  .section-intro { font-size: 16px; margin-top: 20px; }

  .featured .company-image { height: 235px; }
  .featured-copy { padding: 25px; }
  .featured h3 { font-size: 27px; }
  .company-grid { grid-template-columns: 1fr; gap: 22px; }
  .card .company-image { height: 235px; }
  .card-copy { padding: 25px; }
  .card-title h3 { font-size: 29px; }

  .about { padding: 35px 23px; }
  .about h2 { font-size: 36px; overflow-wrap: break-word; letter-spacing: -1.4px; }
  .about-lead { font-size: 22px; }
  .facts { gap: 24px 12px; padding-top: 26px; }
  .facts dd { font-size: 17px; }
  .facts dt { letter-spacing: .2px; overflow-wrap: anywhere; }

  .focus-grid { grid-template-columns: 1fr; gap: 23px; }
  .focus-grid article { padding-top: 22px; }
  .focus-index { float: left; width: 43px; font-size: 24px; margin: 0; }
  .focus h3 { font-size: 21px; margin-top: 3px; }
  .focus-grid article p { margin: 0 0 0 43px; }

  .contact h2 { font-size: 34px; }
  .contact-link { font-size: 19px; letter-spacing: -.4px; }

  .footer-top { display: grid; grid-template-columns: 1fr auto; }
  .footer-top .brand { grid-column: 1 / -1; }
  .to-top { gap: 10px; }
  .footer-bottom nav { gap: 17px; }
  .footer-bottom { gap: 16px; }

  .legal h1 { margin-bottom: 36px; }
  .legal h2 { margin-top: 36px; }
}


/* ═══════════════════════════════════════════
   BIS 380 — schmale Geräte
   ═══════════════════════════════════════════ */
@media (max-width: 380px) {
  h1 { font-size: 33px; }
  .header { gap: 8px; }
  .header-actions { gap: 5px; }
  .brand { font-size: 20px; }
  .login-link svg { display: none; }
  .hero-content { padding-left: 2%; padding-right: 2%; }
  .contact-link { font-size: 17px; }
  .hero-foot { letter-spacing: 0; }
  .button { gap: 14px; }
}


/* ═══════════════════════════════════════════
   REDUZIERTE BEWEGUNG
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  /* Die Bildbahn läuft hier gar nicht erst los (siehe js/main.js).
     Das Abschalten der Überblendung allein würde sie nur hart
     umschalten lassen — das ist genau das, was stört. */
}