/* ==========================================================================
   VISARO — Layout
   --------------------------------------------------------------------------
   Container, Raster und Sektionsabstände. Alle Werte kommen aus tokens.css;
   die responsive Umschaltung passiert dort, nicht hier.
   ========================================================================== */

/* ══ SEITENGERÜST ═══════════════════════════════════════════════════════ */

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

.visaro-main { flex: 1 0 auto; }

/* ══ CONTAINER ══════════════════════════════════════════════════════════ */

.visaro-container {
	width: 100%;
	max-width: var(--vis-container-content);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

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

/* Full-Bleed: Medium läuft bis 1920 und wird dann zentriert gedeckelt,
   der Grund darunter läuft weiter (Design Concept Kap. 6.1). */
.visaro-container--bleed {
	max-width: none;
	padding-inline: 0;
}

.visaro-container--bleed > * {
	max-width: var(--vis-container-bleed);
	margin-inline: auto;
}

/* ══ RASTER ═════════════════════════════════════════════════════════════
   4 / 8 / 12 Spalten je nach Viewport. Die Spaltenzahl steckt im Token,
   deshalb genügt hier eine einzige Regel.                            */

.visaro-grid {
	display: grid;
	grid-template-columns: repeat(var(--vis-grid-columns), minmax(0, 1fr));
	gap: var(--vis-grid-gap);
}

/* Bildraster bekommt ab 1440 mehr Luft als Text- und Formularraster. */
.visaro-grid--media { gap: var(--vis-grid-gap-media); }

/* ══ SEKTIONEN ══════════════════════════════════════════════════════════
   Kollaps-Regel (Design Concept Kap. 6.5): Zwei aufeinanderfolgende
   Sektionen mit gleichem Hintergrund teilen sich den Abstand. Bei
   Hintergrundwechsel bleiben beide Paddings stehen — die Kante braucht
   Luft. Umgesetzt über das Attribut data-ground.                     */

.visaro-section {
	padding-block: var(--vis-section-m);
}

.visaro-section--s    { padding-block: var(--vis-section-s); }
.visaro-section--l    { padding-block: var(--vis-section-l); }
.visaro-section--xl   { padding-block: var(--vis-section-xl); }
.visaro-section--hero { padding-block: var(--vis-section-hero); }

.visaro-section[data-ground="light"] + .visaro-section[data-ground="light"],
.visaro-section[data-ground="dark"] + .visaro-section[data-ground="dark"] {
	padding-block-start: 0;
}

/* ══ HINTERGRÜNDE ═══════════════════════════════════════════════════════
   Rhythmus hell / dunkel (Design Concept Kap. 6.7). Der dunkle Grund
   schaltet zugleich die semantischen Rollen um, damit Komponenten
   nichts davon wissen müssen.                                        */

.vis-on-light {
	background: var(--vis-bg);
	color: var(--vis-text);
}

.vis-on-subtle  { background: var(--vis-bg-subtle); }
.vis-on-surface { background: var(--vis-bg-surface); }
.vis-on-paper   { background: var(--vis-paper); }

.vis-on-dark {
	background: var(--vis-bg-dark);
	color: var(--vis-text-on-dark);

	--vis-text:          var(--vis-white);
	--vis-text-2:        var(--vis-ink-300);
	--vis-text-3:        var(--vis-ink-400);
	--vis-border:        var(--vis-ink-700);
	--vis-border-strong: var(--vis-ink-600);
	--vis-border-subtle: var(--vis-ink-800);
	--vis-accent-text:   var(--vis-purple-400);
}

/* ══ HILFSKLASSEN ═══════════════════════════════════════════════════════
   Bewusst wenige. Utility-Wildwuchs widerspricht dem Werkstattraster.  */

.vis-stack > * + *   { margin-block-start: var(--vis-space-4); }
.vis-stack-6 > * + * { margin-block-start: var(--vis-space-6); }
.vis-stack-8 > * + * { margin-block-start: var(--vis-space-8); }

.vis-measure { max-width: 68ch; }

/* Angemeldete Redakteure: WordPress darf die klebenden Köpfe nicht überdecken.
   Bis 600px scrollt seine Werkzeugleiste selbst aus dem Bild. */
@media (min-width: 601px) {
	body.admin-bar :is(.vis-header, .vis-shophead, .fire-head) {
		inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	}
}

@media (max-width: 600px) {
	body.admin-bar.visaro-header-transparent .vis-header:not(.is-scrolled) {
		inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	}
}

/* Überlagerungen liegen auch für Redakteure oberhalb der Werkzeugleiste. */
body.visaro-drawer-open #wpadminbar { visibility: hidden; }