/* ==========================================================================
   NexaMINT – Komponenten
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease),
    border-color var(--duration) var(--ease), transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease), color var(--duration) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Primär: Türkis mit dunkler Schrift (Farbmanual) */
.btn--primary {
  background: var(--nexa-turquoise);
  color: var(--nexa-deep);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: #14b4bc;
  color: var(--nexa-deep);
  box-shadow: var(--shadow-md);
}

/* Sekundär: heller Hintergrund mit Graphite-Rahmen */
.btn--secondary {
  background: var(--nexa-white);
  border-color: var(--nexa-graphite);
  color: var(--nexa-graphite);
}

.btn--secondary:hover {
  background: var(--nexa-cloud);
  border-color: var(--nexa-deep);
  color: var(--nexa-deep);
}

/* Auf dunklen Flächen */
.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--nexa-white);
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--nexa-white);
  color: var(--nexa-white);
}

/* Coral nur für eine einzelne, besonders wichtige Handlung */
.btn--accent {
  background: var(--nexa-coral);
  color: var(--nexa-deep);
}

.btn--accent:hover {
  background: #de6355;
  color: var(--nexa-deep);
}

.btn--sm {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--duration) var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* --- Karten -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  background: var(--nexa-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.card--link:hover,
.card--link:focus-within {
  border-color: var(--nexa-turquoise);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nexa-turquoise-dark);
}

.card__title {
  margin-top: var(--space-2);
  font-size: var(--text-xl);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

/* Vergrößert die Klickfläche auf die ganze Karte, ohne die Semantik zu ändern */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--link {
  position: relative;
}

.card__subtitle {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

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

.card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.card__meta strong {
  display: block;
  color: var(--nexa-graphite);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Karte mit Nummer im Kopf, z. B. Säulen oder Stationen */
.card--numbered .card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--nexa-mist);
  color: var(--nexa-turquoise-dark);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* --- Statusmarken -------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge--done {
  background: var(--nexa-mist);
  color: var(--nexa-turquoise-dark);
}

.badge--progress {
  background: #eef2f4;
  color: var(--nexa-graphite);
}

.badge--accent {
  background: var(--nexa-coral-soft);
  color: var(--nexa-coral-dark);
}

.badge--neutral {
  background: var(--nexa-stone);
  color: var(--nexa-graphite);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Kleine Fachkennzeichnung */
.tag {
  display: inline-block;
  padding: 3px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--nexa-cloud);
  font-size: var(--text-xs);
  color: var(--nexa-graphite);
}

/* --- Hinweisboxen -------------------------------------------------------- */

.note {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--nexa-turquoise);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--nexa-mist);
  color: var(--nexa-graphite);
  font-size: var(--text-sm);
}

.note strong {
  color: var(--nexa-deep);
}

.note--accent {
  border-left-color: var(--nexa-coral);
  background: var(--nexa-coral-soft);
}

.note--plain {
  border-left-color: var(--nexa-stone);
  background: var(--nexa-cloud);
}

.note--icon {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.note--icon svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

/* Der wiederkehrende Unverbindlichkeitshinweis */
.reservation-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 56ch;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.reservation-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--nexa-turquoise-dark);
}

/* --- Merkmalliste mit Häkchen -------------------------------------------- */

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: var(--space-6);
}

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

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--nexa-turquoise);
}

/* Nummerierte Merkmalliste */
.step-list {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.step-list li {
  position: relative;
  counter-increment: step;
  padding-left: var(--space-8);
}

.step-list li + li {
  margin-top: var(--space-5);
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--nexa-mist);
  color: var(--nexa-turquoise-dark);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* --- Definitionslisten für Kennzahlen ------------------------------------ */

.facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

@media (min-width: 40rem) {
  .facts--row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  }
}

.facts div {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nexa-white);
}

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

.facts dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--nexa-deep);
}

/* --- Datenliste (Schlüssel–Wert) ----------------------------------------- */

.data-list {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.data-list > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 40rem) {
  .data-list > div {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.data-list dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.data-list dd {
  margin: 0;
}

/* --- Tabellen ------------------------------------------------------------ */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nexa-white);
}

table.data-table {
  width: 100%;
  min-width: 44rem;
  font-size: var(--text-sm);
}

.data-table caption {
  padding: var(--space-4) var(--space-5) 0;
  text-align: left;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.data-table thead th {
  background: var(--nexa-cloud);
  color: var(--nexa-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: var(--nexa-mist-soft);
}

.data-table .num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--nexa-deep);
  white-space: nowrap;
}

/* --- Akkordeon ----------------------------------------------------------- */

.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nexa-white);
  overflow: hidden;
}

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

.accordion summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--nexa-deep);
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  border-right: 2px solid var(--nexa-turquoise-dark);
  border-bottom: 2px solid var(--nexa-turquoise-dark);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease);
}

.accordion[open] summary::after {
  transform: rotate(-135deg);
}

.accordion summary:hover {
  background: var(--nexa-mist-soft);
}

.accordion__body {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-base);
  max-width: 72ch;
}

/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--text-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--nexa-stone);
}

.breadcrumbs a {
  color: var(--color-muted);
  text-decoration: none;
}

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

.breadcrumbs [aria-current="page"] {
  color: var(--nexa-graphite);
  font-weight: 600;
}

/* --- Filterleiste -------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-bar button,
.filter-bar a {
  min-height: 40px;
  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: 500;
  text-decoration: none;
}

.filter-bar button:hover,
.filter-bar a:hover {
  border-color: var(--nexa-turquoise);
  color: var(--nexa-turquoise-dark);
}

.filter-bar [aria-pressed="true"],
.filter-bar [aria-current="true"] {
  background: var(--nexa-deep);
  border-color: var(--nexa-deep);
  color: var(--nexa-white);
  font-weight: 600;
}

/* --- Formulare ----------------------------------------------------------- */

.form {
  max-width: 46rem;
}

.form-section {
  padding: var(--space-6);
  background: var(--nexa-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.form-section + .form-section {
  margin-top: var(--space-5);
}

.form-section > legend,
.form-section__title {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--nexa-deep);
}

.form-section__hint {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.field + .field,
.field-row + .field,
.field + .field-row,
.field-row + .field-row {
  margin-top: var(--space-5);
}

@media (min-width: 40rem) {
  .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.field > label,
.field-legend {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--nexa-deep);
}

.field .req {
  color: var(--nexa-coral-dark);
  margin-left: 2px;
}

.field__hint {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nexa-white);
  color: var(--nexa-graphite);
  font-size: var(--text-base);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

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

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%233C515D' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--nexa-turquoise);
  box-shadow: 0 0 0 3px rgba(23, 199, 208, 0.25);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9aa9b1;
}

/* Fehlerzustand: nie nur über Farbe, immer mit Text und Symbol */
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--nexa-coral-dark);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--nexa-coral-dark);
}

.field__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--nexa-coral-dark);
  color: var(--nexa-white);
  font-size: var(--text-xs);
  line-height: 1;
}

/* Auswahlfelder */
.choice-grid {
  display: grid;
  gap: var(--space-2);
}

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

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nexa-white);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.choice:hover {
  border-color: var(--nexa-turquoise);
  background: var(--nexa-mist-soft);
}

.choice input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--nexa-turquoise-dark);
}

.choice:has(input:checked) {
  border-color: var(--nexa-turquoise-dark);
  background: var(--nexa-mist);
}

.choice:has(input:focus-visible) {
  outline: 3px solid var(--nexa-turquoise-dark);
  outline-offset: 2px;
}

.consent {
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--nexa-cloud);
}

/* Fehlerzusammenfassung am Formularanfang */
.form-alert {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.form-alert--error {
  border: 1px solid var(--nexa-coral-dark);
  background: var(--nexa-coral-soft);
}

.form-alert--success {
  border: 1px solid var(--nexa-turquoise-dark);
  background: var(--nexa-mist);
}

.form-alert h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.form-alert ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

.form-alert a {
  color: var(--nexa-coral-dark);
  font-weight: 600;
}

.form-alert--success a {
  color: var(--nexa-turquoise-dark);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* --- Vorschaugrafiken des Modellmoduls ----------------------------------- */

.preview-figure {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--nexa-white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.preview-figure img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--nexa-white);
}

.preview-figure figcaption {
  padding: var(--space-4) var(--space-5) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.preview-figure .tag {
  margin-bottom: var(--space-3);
}

.preview-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--nexa-cloud);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* --- Zitat / Leitidee ---------------------------------------------------- */

.pull-quote {
  margin: 0;
  padding: var(--space-6) var(--space-7);
  border-left: 4px solid var(--nexa-turquoise);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--nexa-white);
  box-shadow: var(--shadow-sm);
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.45;
  color: var(--nexa-deep);
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-muted);
}

/* --- Zeitleiste / Roadmap ------------------------------------------------ */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.timeline > li {
  position: relative;
  padding-left: var(--space-8);
}

.timeline > li + li {
  margin-top: var(--space-6);
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nexa-white);
  border: 3px solid var(--nexa-stone);
}

.timeline > li[data-state="abgeschlossen"]::before {
  border-color: var(--nexa-turquoise);
  background: var(--nexa-turquoise);
}

.timeline > li[data-state="in Bearbeitung"]::before {
  border-color: var(--nexa-turquoise);
}

.timeline > li[data-state="Pilotpartner gesucht"]::before {
  border-color: var(--nexa-coral);
}

.timeline__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
}

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

/* --- CTA-Band ------------------------------------------------------------ */

.cta-band {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--nexa-deep);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.cta-band h2 {
  color: var(--nexa-white);
  max-width: 22ch;
}

.cta-band p {
  margin-top: var(--space-4);
  max-width: 56ch;
}

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

.cta-band .reservation-note {
  color: rgba(255, 255, 255, 0.62);
}

.cta-band .reservation-note svg {
  color: var(--nexa-turquoise);
}

.cta-band__deco {
  position: absolute;
  right: -40px;
  top: -30px;
  width: 320px;
  opacity: 0.16;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .cta-band {
    padding: var(--space-9);
  }
}

/* --- Seitenkopf ---------------------------------------------------------- */

.page-head {
  padding-block: var(--space-7) var(--space-8);
  background: var(--nexa-white);
  border-bottom: 1px solid var(--color-border);
}

.page-head__inner {
  max-width: 70ch;
}

.page-head h1 {
  margin-top: var(--space-2);
}

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

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

/* --- Kopfbereich mit Bild ------------------------------------------------- */

/* Dieselbe Bauweise wie der Hero der Startseite: Das Bild steht nicht als
   gerahmte Kachel neben der Ueberschrift, sondern laeuft oben buendig mit und
   ueber den rechten Rand hinaus. Die randlosen und verlaufenden Regeln fuer
   .page-head__figure stehen bei .hero__figure in pages.css – beide Kopfbereiche
   teilen sie sich, damit die Seiten gleich aussehen. */
.page-head--media {
  padding-bottom: var(--space-7);
  background: linear-gradient(180deg, var(--nexa-white) 0%, var(--nexa-cloud) 100%);
  overflow: hidden;
}

.page-head__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 62rem) {
  .page-head--media,
  .module-hero {
    padding-block: var(--space-8) var(--space-9);
  }

  .page-head__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: var(--space-8);
  }

  /* Die Kopfbilder der Unterseiten sind breite Querformate (etwa 1,8:1),
     die Textspalte daneben ist hoch. Oben buendig wie auf der Startseite
     bliebe darunter eine grosse Leerflaeche, ein fuellender Ausschnitt
     wuerde zu viel wegschneiden. Das Bild steht deshalb mittig und loest
     sich nach allen Seiten ausser rechts im Hintergrund auf. */
  .page-head--media .page-head__figure,
  .module-hero .page-head__figure {
    align-self: center;
    margin-block: 0;
  }

  .page-head--media .page-head__figure img,
  .module-hero .page-head__figure img {
    /* Die senkrechte Halbachse muss deutlich unter 100 Prozent liegen, sonst
       endet der Verlauf ausserhalb des Bildes und Ober- und Unterkante
       bleiben hart. 62 Prozent lassen ihn kurz hinter der Kante auslaufen. */
    -webkit-mask-image: radial-gradient(104% 62% at 74% 50%, #000 0 40%, transparent 94%);
    mask-image: radial-gradient(104% 62% at 74% 50%, #000 0 40%, transparent 94%);
  }
}

.page-head--media .page-head__inner {
  max-width: 54ch;
}

/* Logo statt Foto im Kopfbereich – auf „Über NexaMINT“.
   Bewusst ohne Randlosigkeit und ohne Verlauf: Ein Logo darf weder
   angeschnitten noch weichgezeichnet werden. */
.page-head__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-6);
}

.page-head__logo img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
}

@media (min-width: 62rem) {
  .page-head__logo {
    justify-content: flex-end;
    padding: var(--space-5) 0;
  }

  .page-head__logo img {
    max-width: 26rem;
  }
}

/* --- Ankernavigation innerhalb langer Seiten ----------------------------- */

.toc {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nexa-white);
}

.toc h2 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

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

.toc a {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--nexa-graphite);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--nexa-turquoise-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

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

@media (min-width: 62rem) {
  .toc--sticky {
    position: sticky;
    top: 96px;
  }
}

/* --- Karte mit Bild ------------------------------------------------------ */

.card--media {
  padding: 0;
  overflow: hidden;
}

.card--media .card__media {
  margin: 0;
  background: var(--nexa-cloud);
  border-bottom: 1px solid var(--color-border);
}

.card--media .card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card--media .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.card__subhead {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.card__subhead + .check-list {
  margin-top: var(--space-3);
}

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

.check-list--sm li + li {
  margin-top: var(--space-2);
}

/* --- Bildtafel ------------------------------------------------------------ */

.figure-plain {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--nexa-white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.figure-plain img {
  width: 100%;
  height: auto;
  display: block;
}

.figure-plain figcaption {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.figure-plain .tag {
  margin-bottom: var(--space-2);
}

/* Bild ohne Rahmen, z. B. Unterrichtsszenen */
.figure-bleed {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.figure-bleed img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Mustermodul: Kopfbereich --------------------------------------------- */

.module-hero {
  padding-block: var(--space-7) var(--space-8);
  background: linear-gradient(180deg, var(--nexa-white) 0%, var(--nexa-cloud) 100%);
  border-bottom: 1px solid var(--color-border);
  /* Das Kopfbild laeuft ueber den rechten Rand hinaus – wie auf der
     Startseite und den uebrigen Kopfbereichen. */
  overflow: hidden;
}

.module-hero__subtitle {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--nexa-turquoise-dark);
}

/* --- Fehlvorstellung: falsch gegen richtig -------------------------------- */

.misconception {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--nexa-white);
}

.misconception__wrong {
  position: relative;
  padding-left: var(--space-6);
  font-weight: 600;
  color: var(--nexa-coral-dark);
}

.misconception__wrong::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nexa-coral-soft);
  color: var(--nexa-coral-dark);
  font-size: var(--text-sm);
  line-height: 1;
}

.misconception__right {
  position: relative;
  margin-top: var(--space-3);
  padding-left: var(--space-6);
  font-size: var(--text-sm);
}

.misconception__right::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--nexa-turquoise);
}

/* --- Hervorgehobenes Zitat aus dem Material ------------------------------- */

.module-quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--nexa-turquoise);
  background: var(--nexa-mist-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.module-quote p {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--nexa-deep);
}

.quote-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--nexa-white);
  box-shadow: var(--shadow-sm);
}

.quote-card p {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.5;
  color: var(--nexa-deep);
}

.quote-card cite {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-muted);
}

/* --- Materialbaustein: Bild und Text im Wechsel --------------------------- */

.material-block + .material-block {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--color-border);
}

.material-block__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 62rem) {
  .material-block__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .material-block--flip .material-block__media {
    order: 2;
  }
}

.material-block__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--nexa-cloud);
}

.material-block__media img {
  display: block;
  width: 100%;
  height: auto;
}

.material-block__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nexa-turquoise-dark);
}

.material-block__step::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--nexa-turquoise);
}

.material-block__title {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--nexa-deep);
}

.material-block__lead {
  margin-top: var(--space-4);
}

.material-block__body .check-list {
  margin-top: var(--space-5);
}

.material-block__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.material-block__foot .status-badge {
  margin-bottom: var(--space-2);
}

/* --- Person: Porträt und Angaben ------------------------------------------ */

.person {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  /* Ohne Begrenzung steht das Porträt am rechten Rand eines 1 150 px breiten
     Abschnitts, während der Text nach 62 Zeichen endet – dazwischen klafft
     eine Lücke und das Bild wirkt verloren. Die Breite hier passt zur
     tatsächlichen Textbreite. */
  max-width: 58rem;
}

@media (min-width: 48rem) {
  /* Drei benannte Felder: Überschrift und Text stehen links untereinander,
     das Porträt rechts über beide Zeilen. Dadurch schließt es oben mit der
     Überschrift und unten mit der letzten Textzeile ab. Benannte Felder statt
     order: Die Reihenfolge im Quelltext bleibt Überschrift – Bild – Text, und
     genau die gilt in der schmalen Ansicht. */
  .person {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    grid-template-areas:
      "kopf bild"
      "text bild";
    gap: var(--space-5) var(--space-8);
    align-items: stretch;
  }

  .person__kopf     { grid-area: kopf; }
  .person__portrait { grid-area: bild; }
  .person__body     { grid-area: text; }

  /* Solange kein Porträt vorliegt, faellt die Bildspalte weg statt leer
     zu bleiben. */
  .person--ohne-bild {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "text";
  }
}

.person__portrait {
  position: relative;
  margin: 0;
  max-width: 15rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--nexa-cloud);
  box-shadow: var(--shadow-sm);
}

.person__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}

@media (min-width: 48rem) {
  /* Das Porträt reicht von der Oberkante der Überschrift bis zur letzten
     Textzeile. Dafür füllt es die ganze Rasterzeile aus; das feste
     Seitenverhältnis entfällt, der Ausschnitt bleibt mittig auf dem Gesicht. */
  .person__portrait {
    align-self: stretch;
    max-width: none;
  }

  /* Absolut gesetzt statt height: 100%: Eine Prozenthöhe braucht einen
     Elternteil mit eindeutiger Höhe. Bei einer gestreckten Rasterzelle ist die
     nicht garantiert – das Bild blieb auf seiner Eigenhöhe stehen und unten
     schaute der Rahmen hervor. */
  .person__portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 18%;
  }
}

/* Der Name folgt direkt auf die Überschrift – in der schmalen Ansicht liegt
   das Bild dazwischen, breit steht er unter der Überschrift. */
.person__name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--nexa-deep);
  line-height: 1.2;
}

.person__role {
  margin-top: var(--space-1);
  font-weight: 600;
  color: var(--nexa-turquoise-dark);
}

.person__lead {
  margin-top: var(--space-4);
  max-width: 62ch;
}

.person__lead + .person__lead {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.person__facts {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 62rem) {
  .person__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-7);
  }
}

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

.person__facts dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --- Aufmerksamkeitsband für eine zweite Zielgruppe ----------------------- */

/* Dunkel und in Coral abgesetzt: Der Hinweis richtet sich an Investoren und
   Partner, nicht an Schulen, und muss sich deshalb vom übrigen Seitenfluss
   unterscheiden – sonst wird er als weiterer Inhaltsblock überlesen. */
.callout {
  position: relative;
  overflow: hidden;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--nexa-deep);
  color: rgba(255, 255, 255, 0.86);
}

.callout::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--nexa-coral);
}

@media (min-width: 48rem) {
  .callout {
    padding: var(--space-8) var(--space-9);
  }
}

.callout__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nexa-coral);
}

.callout__eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--nexa-coral);
}

.callout__title {
  margin-top: var(--space-3);
  max-width: 26ch;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--nexa-white);
}

@media (min-width: 62rem) {
  .callout__title {
    font-size: var(--text-3xl);
  }
}

.callout__text {
  margin-top: var(--space-4);
  max-width: 60ch;
}

.callout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.btn--light {
  background: var(--nexa-white);
  color: var(--nexa-deep);
  border-color: var(--nexa-white);
}

.btn--light:hover {
  background: var(--nexa-mist);
  border-color: var(--nexa-mist);
}

.link-arrow--light {
  color: var(--nexa-mist);
}

.link-arrow--light:hover {
  color: var(--nexa-white);
}