/* Geteiltes Seiten-Gerüst: Rahmen, Kopf, nummerierte Abschnitte und Feld-Raster.
   Global geladen (base.html); seitenspezifische Eigenheiten leben in den jeweiligen
   Seiten-Stylesheets (vignette-pages.css, vignette-form.css, system-page.css). */

.page {
    width: 100%;
    padding-bottom: var(--space-6);
}

/* ---- Seitenkopf: Eyebrow, Titel, Untertitel ---- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.page-head p {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.page-head h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
}

.page-head div > span {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

/* ---- Umbrüche messen den Hauptbereich, nicht das Fenster (die Seitenleiste
   belegt davon 352 px) ---- */
.site-main {
    container: hauptbereich / inline-size;
}

/* ---- Nummerierter Abschnitt im Achterraster (ADR-0060): Kopf 2, Inhalt 6 Spalten ---- */
.page-section {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
}

.page-section > * { grid-column: 3 / -1; }
.page-section > .page-section__head { grid-column: 1 / span 2; }

.page-section:last-child {
    border-bottom: 1px solid var(--color-border);
}

/* ---- Variante: Kopf über dem Inhalt, Inhalt über die ganze Breite ---- */
.page-section--gestapelt > *,
.page-section--gestapelt > .page-section__head { grid-column: 1 / -1; }

.page-section__head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
}

.page-section__head b {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    line-height: 1.1;
}

.page-section__head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.page-section__head small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: .75rem;
}

/* ---- Feld-Raster: zwei bzw. drei Spalten, mit breitem Einzelfeld ---- */
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.field-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-grid > div {
    min-width: 0;
}

/* Direkt im Abschnitt übernimmt das Feld-Raster dessen Spalten, damit die Felder
   aller Abschnitte an denselben Kanten fluchten: zwei Felder je 3, drei je 2. */
.page-section > .field-grid { grid-template-columns: subgrid; }
.page-section > .field-grid > * { grid-column: span 3; }
.page-section > .field-grid--three > * { grid-column: span 2; }
.page-section--gestapelt > .field-grid > * { grid-column: span 4; }

.field-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---- Einzelfeld: Label über Inhalt ---- */
.page-field p {
    margin: 0;
}

.page-field--wide,
.page-section > .field-grid > .page-field--wide {
    grid-column: 1 / -1;
}

.page-field h3,
.field-grid dt {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: .86rem;
    font-weight: 700;
}

/* ---- Feldgruppe: Beschriftung über der Gruppe, ohne Browser-Rahmen ---- */
.page-fieldset {
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}

.page-fieldset > legend {
    margin-bottom: var(--space-1);
    padding: 0;
    font-size: .86rem;
    font-weight: 700;
}

/* ---- Aktionszeile eines Abschnitts: dieselbe Geste wie .vignette-form-actions,
   nur ohne das Formular-Stylesheet, das die Systemseiten nicht laden ---- */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* ---- Teilnahme-Token zum Abtippen: groß und in fester Laufweite ---- */
.abschrift-token {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .12em;
    word-break: break-all;
}

/* ---- Auswahl: Radiobuttons behalten ihre Eigenbreite neben der Beschriftung ---- */
.page-choices label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    font-weight: 400;
}

.page-choices input[type="radio"] {
    width: auto;
    margin: 0;
}

/* ---- Mittlere Breite: vier Spalten, Kopf über dem Inhalt, Felder 2 + 2.
   Drei Felder gehen in vier Spalten nicht auf und behalten deshalb drei eigene. ---- */
@container hauptbereich (max-width: 900px) {
    .page-section { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .page-section > *,
    .page-section > .page-section__head { grid-column: 1 / -1; }
    .page-section > .field-grid > * { grid-column: span 2; }
    .page-section > .field-grid > .page-field--wide { grid-column: 1 / -1; }
    .page-section > .field-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-section > .field-grid--three > * { grid-column: auto; }
}

/* ---- Schmal: eine Spalte ---- */
@container hauptbereich (max-width: 520px) {
    .page-section,
    .field-grid,
    .page-section > .field-grid { grid-template-columns: minmax(0, 1fr); }
    .page-section > .field-grid > *,
    .page-field--wide,
    .page-section > .field-grid > .page-field--wide { grid-column: auto; }
}

@media (max-width: 760px) {
    .page-head { flex-direction: column; align-items: start; }
}

/* ---- Eigentümer:innen: der Kreis als Tabelle, Hinzufügen abgetrennt ---- */
.eigentuemerinnen {
    width: 100%;
    border-collapse: collapse;
}

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

.eigentuemerinnen th {
    color: var(--color-text-muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eigentuemerinnen th:last-child,
.eigentuemerinnen td:last-child {
    text-align: right;
}

.eigentuemerinnen__sie,
.eigentuemerinnen__hinweis {
    color: var(--color-text-muted);
    font-size: .8rem;
}

p.eigentuemerinnen__hinweis {
    margin: var(--space-1) 0 0;
}

/* Rot nur, weil Entfernen destruktiv ist (ADR-0060); als Textlink, nicht als Knopf. */
.eigentuemerinnen__entfernen {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-danger);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.eigentuemerinnen__entfernen:hover,
.eigentuemerinnen__entfernen:focus {
    text-decoration: underline;
}

.eigentuemerinnen-hinzufuegen {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

.eigentuemerinnen-hinzufuegen h3 {
    margin: 0 0 var(--space-2);
    font-size: .95rem;
}

/* Auswahl und Knopf sitzen nebeneinander. */
.eigentuemerinnen-hinzufuegen__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2);
}

.eigentuemerinnen-hinzufuegen__zeile label {
    display: grid;
    flex: 1 1 14rem;
    gap: var(--space-1);
}

.eigentuemerinnen-hinzufuegen__zeile button {
    width: auto;
}

/* ---- Reihenfolge-Aktionen: Hoch, Runter und Entfernen in einer Zeile ---- */
.reihenfolge-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.reihenfolge-aktionen form {
    margin: 0;
}

/* Umrandet in der Bereichsfarbe der Seite statt im allgemeinen Akzent. */
.button--bereich,
.button--bereich:hover {
    border-color: var(--area-solid);
    color: var(--area-solid);
}

/* ---- Stichprobe anlegen: eine rechtsbündige Zeile über ihrer Tabelle ---- */
.stichprobe-anlegen {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.stichprobe-anlegen input {
    width: auto;
}

.stichprobe-anlegen button {
    width: auto;
}