/* -----------------------------------------------------------
   TwentyOne Real — Zusatz-CSS
   Nur für das, was theme.json nicht abdecken kann:
   Deko-Kreisgrafik, Nav-Trenner, Overlay-Menü.
   Farben, Schrift, Abstände: siehe theme.json.
   ----------------------------------------------------------- */

/* Deko-Kreisgrafik (aus dem Logo-Mark abgeleitet), an der Kante
   angeschnitten – reproduziert das Kreis-Motiv aus der Vorlage,
   rein dekorativ (aria-hidden im Markup). */
.twentyone-decor {
	position: relative;
	overflow: hidden;
}

.twentyone-decor::before {
	content: "";
	position: absolute;
	top: 0;
	width: min(60vw, 900px);
	aspect-ratio: 919 / 1401;
	background-image: url("../images/mark-tint.svg");
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}

.twentyone-decor--top-right::before {
	right: 0;
	top: -10%;
	transform: scaleX(-1) rotate(8deg);
}

.twentyone-decor--bottom-left::before {
	left: -8%;
	bottom: -18%;
	top: auto;
	width: min(38vw, 480px);
}

.twentyone-decor > * {
	position: relative;
	z-index: 1;
}

/* Footer- und Header-Navigation: "Home | Impressum | Datenschutz" */
.twentyone-inline-nav .wp-block-navigation-item:not(:last-child)::after {
	content: "|";
	margin-inline-start: 1.25rem;
	opacity: 0.5;
}

.twentyone-inline-nav .wp-block-navigation-item {
	margin-inline-end: 1.25rem;
}

.twentyone-inline-nav .wp-block-navigation-item:last-child {
	margin-inline-end: 0;
}

/* Overlay-Menü (Burger): dunkel, große Links – ruhiger als das
   WordPress-Standard-Overlay. */
.wp-block-navigation__responsive-dialog {
	background-color: var(--wp--preset--color--black);
}

.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wp-block-navigation__responsive-dialog .wp-block-navigation-item:not(:last-child)::after {
	display: none;
}

/* Hero-Logo: Breite begrenzen, damit es auf sehr großen Screens
   nicht ausufert, und auf Mobile lesbar bleibt. */
.twentyone-hero-logo img {
	width: min(90vw, 640px);
	height: auto;
}

/* Kleines Logo-Mark neben dem Intro-Text (untere Sektion der Startseite) */
.twentyone-mark img {
	width: 72px;
	height: auto;
}

.twentyone-header-logo,
.twentyone-footer-nav-wrap {
	margin: 0;
}

.twentyone-header-logo a {
	display: inline-flex;
	text-decoration: none;
}

@media (max-width: 600px) {
	.twentyone-decor::before {
		width: min(85vw, 480px);
	}
}