/* ==================================================================
   Raster und Seitenaufbau
   ================================================================== */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--eng { max-width: var(--content-max); }

.section { position: relative; padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--alt { background: var(--bg-alt); }

/* Zwölfspaltiges Raster — nur dort eingesetzt, wo es wirklich trägt */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Sektionskopf: kleine Marke links, Überschrift versetzt — asymmetrisch */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
.sec-head__num {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.sec-head__num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: translateY(-0.2em);
}
.sec-head__title { max-width: 22ch; }
.sec-head__note { max-width: 40ch; color: var(--text-muted); font-size: var(--t-body); }

@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: end;
  }
  .sec-head__num   { grid-column: 1 / -1; margin-bottom: var(--s-5); }
  .sec-head__title { grid-column: 1 / span 6; }
  .sec-head__note  { grid-column: 8 / span 5; padding-bottom: 0.4em; }
}

/* Feine Trennlinie, wie eine Reisskante im Satzspiegel */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Hintergrund für Partikel-Zeichenfläche */
.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.section > .wrap { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   Rasterkinder dürfen ihre Spalte nicht aufweiten. Ohne diese Regel
   sprengen breite Inhalte (Dateiauswahl, lange E-Mail-Adressen) das
   Layout auf schmalen Geräten.
   ------------------------------------------------------------------ */
.grid > *,
.sec-head > *,
.kontakt__grid > *,
.feld-paar > *,
.team > *,
.recht__grid > *,
.ablauf > *,
.fzg__punkte > *,
.vertrauen__liste > * { min-width: 0; }

input[type="file"] { min-width: 0; max-width: 100%; }