/* ==========================================================================
   NexaMINT – Seitenspezifische Bausteine
   ========================================================================== */

/* --- Hero der Startseite ------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-9) var(--space-10);
  background:
    radial-gradient(60rem 30rem at 78% -10%, var(--nexa-mist) 0%, transparent 62%),
    linear-gradient(180deg, var(--nexa-white) 0%, var(--nexa-cloud) 100%);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    padding-block: var(--space-10) var(--space-11);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-9);
  }
}

.hero h1 {
  margin-top: var(--space-4);
}

.hero h1 .accent {
  color: var(--nexa-turquoise-dark);
}

.hero__claim {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--nexa-turquoise);
  border-radius: var(--radius-pill);
  background: var(--nexa-white);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--nexa-deep);
  letter-spacing: 0.01em;
}

.hero__lead {
  margin-top: var(--space-5);
  max-width: 56ch;
  font-size: var(--text-lg);
}

.hero .btn-row {
  margin-top: var(--space-6);
}

/* Die Abbildung ist bewusst nicht gerahmt.
   Ein Bild mit Rahmen, Schatten und runden Ecken liest sich als eigenes
   Element neben der Ueberschrift. Hier soll es dieselbe Flaeche sein: Es
   laeuft ueber den Seitenrand hinaus und loest sich zur Textspalte hin auf.
   Der eigene Hintergrund des Bildes ist nahezu weiss (226–248), der Hero
   verlaeuft von Weiss nach Cloud – deshalb ist der Uebergang unsichtbar.

   --bleed ist der Weg vom Inhaltsrand bis zum Rand des Ansichtsfensters:
   der halbe Ueberschuss ueber die Containerbreite plus dessen Innenabstand.
   calc(50% - 50vw) waere hier falsch – Prozentangaben beziehen sich auf die
   Rasterspalte, nicht auf den Container, und das Bild ragte ein Drittel
   seiner Breite unsichtbar aus dem Fenster heraus. */
.hero__figure,
.page-head__figure {
  position: relative;
  --bleed: calc(max(0px, (100vw - var(--container)) / 2) + var(--container-pad, var(--space-5)));
  margin-inline: calc(-1 * var(--bleed));
}

.hero__figure img,
.page-head__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.hero__figure svg {
  width: 100%;
  height: auto;
}

/* Weiche Kanten. Bewusst nur eine Verlaufsebene je Ansicht: Zwei Ebenen
   brauchen mask-composite, und die WebKit-Schreibweise setzt sie in
   umgekehrter Reihenfolge zusammen – das Bild verlief dann nach unten statt
   nach oben. Eine Ebene ist eindeutig. Ohne Maskenunterstuetzung bleibt eine
   saubere Kante stehen, kein kaputtes Bild. */
.hero__figure img,
.page-head__figure img {
  /* Schmale Ansicht: Das Bild steht unter dem Text ueber die ganze Breite.
     Verlaufen sollen Ober- und Unterkante – dorthin grenzen Text und
     Kennzahlen. Links und rechts bleibt es randlos. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 88%, transparent 100%);
}

@media (min-width: 62rem) {
  .hero__figure,
  .page-head__figure {
    /* Rechts randlos, links in den Rasterabstand hinein – dort verlaeuft das
       Bild ohnehin, es gewinnt also Flaeche, ohne dem Text Platz zu nehmen.
       Oben schliesst es buendig an den Kopfbereich an, sodass es mit der
       Ueberschrift auf einer Flaeche liegt statt daneben zu stehen. */
    margin: calc(-1 * var(--space-10)) calc(-1 * var(--bleed)) 0 calc(-1 * var(--space-8));
    align-self: start;
  }

  .hero__figure img,
  .page-head__figure img {
    /* Kein object-fit: cover. Die rechte Spalte ist deutlich hoeher als das
       Bild breit ist; ein fuellender Ausschnitt wuerde den Prozessstreifen
       am oberen Bildrand links und rechts abschneiden. Das Bild behaelt
       deshalb seine Proportion und loest sich nach unten und links im
       Hintergrund auf. */
    height: auto;
    /* Vom oberen rechten Bereich her deckend, nach links und unten
       aufloesend. Eine einzige Verlaufsebene – siehe Hinweis oben. */
    -webkit-mask-image: radial-gradient(125% 135% at 86% 22%, #000 0 46%, transparent 88%);
    mask-image: radial-gradient(125% 135% at 86% 22%, #000 0 46%, transparent 88%);
  }
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.hero__stat dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero__stat dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--nexa-deep);
  line-height: 1.1;
}

.hero__stat span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
}

/* --- Problem/Lösung-Gegenüberstellung ------------------------------------ */

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

@media (min-width: 52rem) {
  .contrast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.contrast__panel {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.contrast__panel--problem {
  background: var(--nexa-white);
}

.contrast__panel--solution {
  background: var(--nexa-deep);
  border-color: var(--nexa-deep);
  color: rgba(255, 255, 255, 0.85);
}

.contrast__panel--solution h3 {
  color: var(--nexa-white);
}

.contrast__panel--solution .check-list li::before {
  background: var(--nexa-turquoise);
}

.contrast__label {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contrast__panel--solution .contrast__label {
  color: var(--nexa-turquoise);
}

/* --- Curriculum: Modul-Landkarte ----------------------------------------- */

.year-block + .year-block {
  margin-top: var(--space-8);
}

.year-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--nexa-turquoise);
}

.year-block__head h3 {
  font-size: var(--text-2xl);
}

.module-row {
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 52rem) {
  .module-row {
    grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 1.35fr) auto;
    align-items: baseline;
  }
}

.module-row__number {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--nexa-turquoise-dark);
  font-variant-numeric: tabular-nums;
}

.module-row__title {
  font-weight: 600;
  color: var(--nexa-deep);
}

.module-row__title a {
  color: inherit;
}

.module-row__subjects {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
}

.module-row__core {
  font-size: var(--text-sm);
  color: var(--color-text);
}


/* --- Stationsliste des Modellmoduls -------------------------------------- */

.stations {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.stations li {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
  .stations li {
    grid-template-columns: 2.5rem minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.stations__no {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--nexa-turquoise-dark);
  font-variant-numeric: tabular-nums;
}

.stations__title {
  font-weight: 600;
  color: var(--nexa-deep);
}

.stations__subject {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stations__core {
  font-size: var(--text-sm);
}

/* --- Sprachregeln -------------------------------------------------------- */

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

@media (min-width: 46rem) {
  .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.rule {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--nexa-turquoise);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--nexa-mist-soft);
}

.rule h3 {
  font-size: var(--text-base);
  color: var(--nexa-turquoise-dark);
}

.rule p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.rule__example {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--nexa-stone);
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
}

/* --- Vorschau-Galerie ---------------------------------------------------- */

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

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

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

/* --- Beitragsseite ------------------------------------------------------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.post-body h2 {
  margin-top: var(--space-8);
}

.post-body p + p {
  margin-top: var(--space-4);
}

/* --- 404 ----------------------------------------------------------------- */

.error-page {
  padding-block: var(--space-10) var(--space-11);
  text-align: center;
}

.error-page__code {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--nexa-mist);
  letter-spacing: -0.04em;
}

.error-page h1 {
  margin-top: calc(var(--space-5) * -1);
}

.error-page .btn-row {
  justify-content: center;
  margin-top: var(--space-7);
}

.error-page ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  font-size: var(--text-sm);
}

/* --- Rechtliche Seiten --------------------------------------------------- */

.legal-placeholder {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 4px;
  background: var(--nexa-coral-soft);
  color: var(--nexa-coral-dark);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 0.9em;
  font-weight: 600;
}

.legal-body h2 {
  margin-top: var(--space-8);
  font-size: var(--text-2xl);
}

.legal-body h3 {
  margin-top: var(--space-6);
}

.legal-body p + p,
.legal-body ul {
  margin-top: var(--space-4);
}

.legal-body ul {
  padding-left: var(--space-5);
}

.legal-body li + li {
  margin-top: var(--space-2);
}

/* --- Zielgruppenkarten --------------------------------------------------- */

.audience-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--nexa-white);
}

.audience-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  color: var(--nexa-turquoise-dark);
}

.audience-card h3 {
  font-size: var(--text-lg);
}

.audience-card p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

/* --- Animationen: sanftes Einblenden ------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript und bei reduzierter Bewegung ist alles sofort sichtbar. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

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

  .btn:hover,
  .card--link:hover {
    transform: none;
  }
}