/* ==========================================================================
   NexaMINT – Layout: Container, Raster, Abschnitte, Kopf- und Fußbereich
   ========================================================================== */

/* --container-pad haelt den Innenabstand als Variable fest. Randlose Bilder
   rechnen damit ihren Ueberhang aus; ein fest eingetragener Wert liefe unter
   30rem um 8 px daneben und schnitt dort einen Bildstreifen ab. */
.container {
  --container-pad: var(--space-5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

@media (max-width: 30rem) {
  .container {
    --container-pad: var(--space-4);
  }
}

/* --- Abschnitte ---------------------------------------------------------- */

.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-8);
}

.section--wide {
  padding-block: var(--space-10);
}

.section--surface {
  background: var(--color-surface);
}

.section--mist {
  background: var(--nexa-mist-soft);
}

.section--deep {
  background: var(--nexa-deep);
  color: rgba(255, 255, 255, 0.82);
}

.section--deep h2,
.section--deep h3 {
  color: var(--nexa-white);
}

.section--deep a {
  color: var(--nexa-mist);
}

@media (min-width: 60rem) {
  .section {
    padding-block: var(--space-10);
  }

  .section--wide {
    padding-block: var(--space-11);
  }
}

/* --- Abschnittsköpfe ----------------------------------------------------- */

.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-7);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nexa-turquoise-dark);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--nexa-turquoise);
  border-radius: 2px;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text);
}

/* --- Raster -------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.grid--gap-lg {
  gap: var(--space-6);
}

/* Zweispaltiges Layout mit Textspalte und Nebenspalte */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-9);
  }

  .split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split--sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  }

  /* Fuer Abbildungen, die Beschriftungen tragen und deshalb nicht
     beschnitten werden duerfen. Gleich breite Spalten und ein kleinerer
     Abstand dazwischen: Eine schmalere Textspalte macht den Text hoeher,
     der Hoehenunterschied wuerde dadurch groesser statt kleiner. Die
     Abbildung steht mittig, damit der Rest sich oben und unten
     gleichmaessig verteilt statt als Loch darunter zu haengen. */
  .split--bild {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    align-items: center;
  }
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack--lg > * + * {
  margin-top: var(--space-6);
}

.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: var(--space-5);
}

/* Ueberschriften brauchen vor sich mehr Luft als nach sich – sonst haengen
   sie optisch am vorigen Absatz statt am eigenen Text. Der Abstand nach unten
   bleibt bewusst kleiner, damit Ueberschrift und Text zusammengehoeren. */
.prose h2 {
  margin-top: var(--space-9);
}

.prose h2 + * {
  margin-top: var(--space-5);
}

.prose h3 {
  margin-top: var(--space-7);
}

.prose h3 + * {
  margin-top: var(--space-4);
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-3);
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.dev-banner {
  background: var(--nexa-deep);
  color: var(--nexa-mist);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  letter-spacing: 0.02em;
}

.dev-banner strong {
  color: var(--nexa-white);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.brand img {
  width: 172px;
  height: 53px;
}

@media (max-width: 26rem) {
  .brand img {
    width: 142px;
    height: 44px;
  }
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--nexa-graphite);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.primary-nav a:hover {
  color: var(--nexa-turquoise-dark);
  background: var(--nexa-mist-soft);
}

.primary-nav a[aria-current="page"] {
  color: var(--nexa-deep);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--nexa-turquoise);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Der Navigations-CTA bleibt immer einzeilig. */
.header-actions .btn {
  white-space: nowrap;
}

/* Sprachumschalter. Bewusst schmal: Die Kopfzeile ist mit Logo, acht
   Menuepunkten und dem CTA bereits randvoll – bei 320, 1280 und 1440 px hat
   ein ausgeschriebenes "English" den Viewport gesprengt (gemessen: 78 px
   Breite bei 22 px Luft). Deshalb das Sprachkuerzel, kein Symbol und keine
   Flagge – eine Flagge steht fuer ein Land, nicht fuer eine Sprache. Der
   ausgeschriebene Name steht im title- und im aria-label-Attribut. */
.lang-switch {
  flex: none;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--color-link);
  border-color: var(--color-accent);
  background: var(--color-surface-alt);
}

/* Unter 30rem reicht der Platz auch dafuer nicht mehr: Logo und Menuebutton
   lassen dort nur 22 px frei. Der Umschalter steht dann ausgeschrieben im
   aufgeklappten Menue. */
@media (max-width: 29.99rem) {
  .lang-switch {
    display: none;
  }
}

/* Im Menue ausgeschrieben, weil dort Platz ist. */
.mobile-nav__lang {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  font-weight: 600;
  color: var(--color-link);
}

@media (min-width: 30rem) {
  /* Zwei Klassen, weil .mobile-nav a (0,1,1) sonst gewinnt. */
  .mobile-nav .mobile-nav__lang {
    display: none;
  }
}


.header-actions .btn {
  display: none;
}

/* Die Kopfzeile darf breiter laufen als der Textbereich.
   Acht Hauptpunkte brauchen mit Logo und CTA rund 1 260 px; der Inhalts-
   container ist auf 1 200 px begrenzt und bietet abzueglich Innenabstand nur
   1 152 px. Statt die Navigation zusammenzuquetschen, bekommt die Kopfzeile
   den breiten Container. Der Textbereich bleibt unveraendert schmal. */
@media (min-width: 62rem) {
  .header-inner {
    max-width: var(--container-wide);
  }
}

/* Umschaltpunkt nachgemessen, nicht geschaetzt. Er lag bei 77rem (1 232 px)
   und hat ohne Sprachumschalter gepasst. Mit ihm laufen 1 232 bis 1 279 px
   ueber – gemessen 34 px bei 1 232 px. Deshalb 80rem (1 280 px): Das ist die
   naechste gaengige Fensterbreite, und dort passt es mit Luft. Darunter zeigt
   die Kopfzeile den Menuebutton. */
@media (min-width: 80rem) {
  .primary-nav {
    display: block;
  }

  .header-actions .btn {
    display: inline-flex;
  }

  /* Der Sprachumschalter kostet mit Abstand rund 46 px. Die holt sich die
     Kopfzeile hier zurueck, statt den CTA zu kuerzen oder den Umschaltpunkt
     nach oben zu schieben – beides waere eine spuerbare Verschlechterung. */
  .header-inner {
    gap: var(--space-4);
  }

  .header-actions {
    gap: var(--space-2);
  }
}

/* Im mittleren Bereich sitzen die Punkte enger, damit sie sicher passen.
   Das Band endete bei 82rem – direkt darueber, bei 1 312 px, lief die
   Kopfzeile dann um 46 px ueber, weil die vollen Abstaende zurueckkamen,
   bevor der Viewport dafuer breit genug war. Es reicht jetzt bis 85rem
   (1 360 px); ab dort tragen auch die vollen Abstaende. */
@media (min-width: 80rem) and (max-width: 84.99rem) {
  .primary-nav a {
    padding-inline: var(--space-2);
  }

  .primary-nav ul {
    gap: 0;
  }
}

/* --- Menübutton und mobile Navigation ------------------------------------ */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--nexa-white);
  color: var(--nexa-graphite);
  font-size: var(--text-sm);
  font-weight: 600;
}

.nav-toggle-bars {
  display: grid;
  gap: 4px;
  width: 18px;
}

.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 80rem) {
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  border-top: 1px solid var(--color-border);
  background: var(--nexa-white);
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

/* Ohne JavaScript bleibt das Menü über :target erreichbar; mit JavaScript
   steuert das Attribut hidden die Sichtbarkeit. */
.mobile-nav[hidden] {
  display: none;
}

@media (min-width: 80rem) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
}

.mobile-nav li + li {
  border-top: 1px solid var(--color-border);
}

.mobile-nav a {
  display: block;
  padding: var(--space-4) var(--space-5);
  color: var(--nexa-graphite);
  font-weight: 500;
  text-decoration: none;
}

.mobile-nav a[aria-current="page"] {
  color: var(--nexa-deep);
  font-weight: 700;
  border-left: 3px solid var(--nexa-turquoise);
}

.mobile-nav .nav-group-title {
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.mobile-nav .btn {
  margin: var(--space-4) var(--space-5) var(--space-5);
  width: calc(100% - var(--space-5) * 2);
}

body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Bildhinweis über dem Fußbereich
   ========================================================================== */

/* Sitzt zwischen Inhalt und Fussbereich, auf hellem Grund. Klein und kursiv:
   Der Hinweis gehoert zu den Bildern darueber, soll aber nicht mit dem Inhalt
   konkurrieren. Die Schriftgroesse bleibt bei 14 px, damit er lesbar bleibt. */
.image-note {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--nexa-cloud);
}

.image-note p {
  max-width: 78ch;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.site-footer {
  margin-top: auto;
  background: var(--nexa-deep);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--space-9) var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

.footer-brand img {
  width: 190px;
  height: 59px;
}

.footer-claim {
  margin-top: var(--space-4);
  color: var(--nexa-turquoise);
  font-family: var(--font-heading);
  font-weight: 600;
}

.footer-about {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  max-width: 38ch;
}

.footer-col h2 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nexa-white);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li + li {
  margin-top: var(--space-2);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--nexa-turquoise);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-sm);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--nexa-white);
  text-decoration: underline;
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}