/* ==========================================================================
   Lucyris – Prototypen (zentrale Datei)

   Styles der Prototypen-Seite: Aspirin-Molekuel, Network Graph,
   Rote Kreise, L-Klammern, Startseiten-Zickzack.

   Eingebunden ueber mu-plugins/lucyris-customizations.php (Frontend + Editor).

   Farben kommen aus den Custom-Presets:
     Lucyris Red         -> --wp--preset--color--custom-lucyris-red         #ba202e
     Marketing Textfarbe -> --wp--preset--color--custom-marketing-textfarbe #1d3557
     Seitenhintergrund   -> --wp--preset--color--base-2                     #ffffff
   ========================================================================== */


/* ==========================================================================
   1. Gemeinsame Basis
   ========================================================================== */

/* Ein Token-Satz für alle Prototypen. */
.lxp,
.lxs {
	--proto-red:  var(--wp--preset--color--custom-lucyris-red);
	--proto-blue: var(--wp--preset--color--custom-marketing-textfarbe);
	--proto-bg:   var(--wp--preset--color--base-2);
	color: var(--proto-blue);
}

/* Kein eigener Breakout über 100vw – das läuft auf Mobil rechts aus dem
   Viewport. Der Block liegt in einer alignwide-Gruppe, Core uebernimmt
   Breite und Zentrierung. */
.lxp { width: 100%; }

/* Das Theme legt per Global Styles einen dunklen Kasten hinter Überschriften
   (elements.heading.background = contrast) – fuer Prototypen neutralisieren. */
.lxp :is(h2, h3),
.lxs :is(h2, h3) { background: none; }

/* Abschnitt + Name des Prototyps */
.lxp-section { margin: 0 0 4.5rem; }
.lxp-section > h2 {
	font-weight: 700;
	color: var(--proto-blue);
	margin: 0 0 1.75rem;
	padding-bottom: .4rem;
	border-bottom: 3px solid var(--proto-red);
}

/* L-Ecken (⌊ unten links, ⌉ oben rechts) – gemeinsame Form für die
   Expertise-Kaesten und die Zickzack-Box. Groesse pro Nutzung via --corner. */
.lxp-bracket::before,
.lxp-bracket::after,
.lxs-grid::before,
.lxs-grid::after {
	content: "";
	position: absolute;
	width: var(--corner);
	height: var(--corner);
	border: 4px solid var(--proto-red);
	pointer-events: none;
}
.lxp-bracket::before,
.lxs-grid::before {          /* ⌊ unten links */
	left: 0;
	bottom: 0;
	border-top: 0;
	border-right: 0;
}
.lxp-bracket::after,
.lxs-grid::after {           /* ⌉ oben rechts */
	right: 0;
	top: 0;
	border-bottom: 0;
	border-left: 0;
}


/* ==========================================================================
   2. Aspirin-Molekuel (Prototyp 1 Kugel-Stab, Prototyp 2 Strukturformel)
   ========================================================================== */

.asp-page {
	max-width: 600px;
	margin: 0 auto;
	padding: 1rem;
}
.asp-page svg {
	width: 100%;
	height: auto;
	overflow: visible;
	display: block;
	margin: 0 auto;
}

/* Fuehrungslinie + Beschriftung: in beiden Versionen identisch. */
.asp-a .lead,
.asp-b .lead {
	stroke: var(--proto-blue);
	stroke-width: 1.5;
	opacity: .55;
}
.asp-a .label,
.asp-b .label {
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	fill: var(--proto-blue);
}
/* Fokus: Maus-Klick ohne Kasten, Tastatur mit Markierung (a11y). */
.asp-a .o:focus,
.asp-b .o:focus { outline: none; }

/* --- Prototyp 1: Kugel-Stab --- */
.asp-a .stick {
	stroke: var(--proto-blue);
	stroke-width: 7;
	stroke-linecap: round;
	opacity: .9;
}
.asp-a .c     { fill: url(#aspBlue); }
.asp-a .o     { cursor: pointer; }
.asp-a .o-dot { fill: url(#aspRed); }
.asp-a .o:hover .o-dot { filter: brightness(1.12); }
.asp-a .o:focus-visible .o-dot { stroke: #111; stroke-width: 2; }

/* --- Prototyp 2: Strukturformel --- */
.asp-b .bond {
	stroke: var(--proto-blue);
	stroke-width: 3;
	stroke-linecap: round;
}
.asp-b .atom {
	font-family: inherit;
	font-weight: 500;
	font-size: 22px;
	dominant-baseline: central;
}
.asp-b .o { fill: var(--proto-red); cursor: pointer; }
.asp-b .o:hover { fill: #d94452; }
.asp-b .o:focus-visible { stroke: #111; stroke-width: .6; }
.asp-b .c   { fill: var(--proto-blue); }
.asp-b .sub { font-size: 14px; }


/* ==========================================================================
   3. Network Graph (Prototyp 4) – Form + Regler-Panel
   ========================================================================== */

.lxp-graph {
	display: block;
	width: 100%;
	margin: 0 auto;
	height: auto;
	overflow: visible;   /* Labels duerfen ueber die viewBox hinausragen */
}

/* Kanten des Graphen */
.lxpg4-edge {
	fill: none;
	stroke: var(--proto-red);
	stroke-width: 3.5;
	stroke-linecap: round;
}

/* Begriffe in Blau, Halo in Seitenfarbe trennt sie von kreuzenden Kanten.
   font-size in viewBox-Einheiten: die SVG skaliert mit, deshalb muss die
   Schrift auf schmalen Screens GROESSER werden, nicht kleiner. */
.lxp-node-label {
	fill: var(--proto-blue);
	font-weight: 700;
	font-size: 27px;
	text-anchor: middle;
	font-family: inherit;
	paint-order: stroke;
	stroke: var(--proto-bg);
	stroke-width: 6px;
	stroke-linejoin: round;
}

/* Die Bewegung läuft über requestAnimationFrame in prototypes.js, nicht
   ueber CSS-Keyframes: nur so lassen sich die Regler live auswerten. Bewegt
   werden ausschliesslich die Kontrollpunkte der Bezierkurven, Anfangs- und
   Endpunkt bleiben fix. Ohne JavaScript steht der Graph still.

   Regler-Panel */
.proto-controls {
	max-width: 46rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--proto-blue);
	font-size: .95rem;
}
/* Eine Zeile pro Regler: Name | Schieber | Wert. Der Name hat feste Breite,
   der Schieber nimmt den Rest. */
.proto-controls label {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 .7rem;
}
.proto-ctl-name { font-weight: 700; }
.proto-controls label > .proto-ctl-name { flex: 0 0 8.5rem; }
.proto-controls input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;          /* sonst kann der Schieber die Zeile aufblaehen */
	accent-color: var(--proto-red);
}
.proto-controls output {
	flex: 0 0 5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Gruppen-Überschrift im Regler-Panel */
.proto-ctl-gruppe {
	margin: 0 0 .9rem;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--proto-red);
}
.proto-ctl-gruppe:not(:first-child) { margin-top: 1.5rem; }

.proto-ctl-reset {
	font: inherit;
	font-size: .85rem;
	padding: .35rem .9rem;
	color: var(--proto-blue);
	background: none;
	border: 1px solid var(--proto-blue);
	cursor: pointer;
}
.proto-ctl-reset:hover { color: var(--proto-red); border-color: var(--proto-red); }

.proto-ctl-hint,
.proto-ctl-out {
	margin: .9rem 0 0;
	font-size: .82rem;
	line-height: 1.5;
}
.proto-ctl-out code {
	background: none;
	color: var(--proto-red);
	font-size: .95em;
}


/* ==========================================================================
   4. Prototyp 5 – Rote Kreise
   ========================================================================== */

.lxp-circles {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	justify-content: center;
}
.lxp-circle {
	flex: 1 1 240px;
	min-width: 210px;
	max-width: 300px;
	aspect-ratio: 1 / 1;   /* Hoehe folgt der Breite -> bleibt rund */
	border-radius: 50%;
	background: var(--proto-red);
	color: var(--proto-bg);   /* weiss auf Rot */
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2.4rem;
	box-sizing: border-box;
}
.lxp-circle h3 {
	font-weight: 700;
	color: var(--proto-bg);
	margin: 0 0 .5rem;
	font-size: 1.02rem;
	line-height: 1.2;
}
.lxp-circle p {
	margin: 0;
	font-size: .72rem;
	line-height: 1.4;
}


/* ==========================================================================
   5. Prototyp 6 – L-Klammern als Kasten
   ========================================================================== */

.lxp-brackets {
	display: flex;
	flex-wrap: wrap;
	gap: 2.75rem;
}
.lxp-bracket {
	--corner: 42px;
	position: relative;
	flex: 1 1 280px;
	max-width: 360px;
	padding: 2.25rem 2.4rem;
}
.lxp-bracket h3 {
	font-weight: 700;
	color: var(--proto-blue);
	margin: 0 0 .7rem;
	font-size: 1.1rem;
	line-height: 1.2;
}
.lxp-bracket p {
	margin: 0;
	color: var(--proto-blue);
	font-size: .9rem;
	line-height: 1.5;
}


/* ==========================================================================
   6. Startseiten-Prototyp – Zickzack-Zweispalter (eigene Seite, eigenes
      Block-Pattern; Klassen lxs / lxs-grid / lxs-c / lxs-t / lxs-uline)

   DOM-Reihenfolge = Mobile-Reihenfolge: C1 T1 C2 T2 C3 T3 (gestapelt).
   Auf Desktop wird das Zickzack explizit per grid-column/grid-row gesetzt.
   ========================================================================== */

/* Mobile-first: eine Spalte. .lxs-grid ist zugleich die Box, welche die
   L-Klammer traegt -> position:relative + Innenabstand. */
.lxs-grid {
	--corner: clamp(28px, 4vw, 44px);
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 1.5rem;
	position: relative;
	box-sizing: border-box;
	padding: clamp(1.5rem, 5vw, 2.5rem);
}
/* Variante ohne L-Klammer */
.lxs--plain .lxs-grid::before,
.lxs--plain .lxs-grid::after { content: none; }
.lxs--plain .lxs-grid { padding: 0; }
/* Variante zentriert */
.lxs--center .lxs-grid { margin-inline: auto; }

/* Crayon-Unterstreichung: handgezeichnete rote Linie unter einzelnen Phrasen.
   Rauheit aus einem SVG mit feTurbulence-Displacement (Data-URI). nowrap
   haelt die Phrase auf einer Zeile, damit das ::after sie komplett abdeckt. */
.lxs-uline {
	position: relative;
	white-space: nowrap;
	padding-bottom: .14em;
}
.lxs-uline::after {
	content: "";
	position: absolute;
	left: -.05em;
	right: -.05em;
	bottom: -.02em;
	height: .36em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='-6' y='-8' width='112' height='40'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6 0.7' numOctaves='2' seed='4' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.55 0.55 0 0.05' result='ga'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08 0.5' numOctaves='2' seed='9' result='d'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='d' scale='4.5' result='s'/%3E%3CfeComposite in='s' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='2' y='3' width='96' height='18' rx='8' fill='%23ba202e' filter='url(%23c)'/%3E%3C/svg%3E") no-repeat;
	background-size: 100% 100%;
	-webkit-mask: linear-gradient(90deg, #0000, #000 7px, #000 calc(100% - 7px), #0000);
	mask: linear-gradient(90deg, #0000, #000 7px, #000 calc(100% - 7px), #0000);
	pointer-events: none;
	animation: lxs-uline-draw .9s ease-out both,
	           lxs-uline-live 4.5s ease-in-out .9s infinite;
}
@keyframes lxs-uline-draw {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes lxs-uline-live {
	0%, 100% { transform: translateY(0)    rotate(0); }
	50%      { transform: translateY(.6px) rotate(-.3deg); }
}

/* T – Fliesstext */
.lxs-t {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
}
.lxs-t p { margin: 0; }

/* C – große Akzent-Phrase */
.lxs-c {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.7rem, 7vw, 2.3rem);
	line-height: 1.1;
}

/* Block-Margins der Kinder killen -> Abstände kommen nur aus den Grid-Gaps.
   Damit rendern HTML-Version (<div><p>) und Pattern (<p>) gleich. */
.lxs-grid > * { margin: 0; }

/* --- Desktop: 2 Spalten + explizites Zickzack --- */
@media (min-width: 782px) {
	/* Kein eigener Width-Breakout: .lxs fuellt seine Eltern-Gruppe. In einem
	   alignwide-Block ist das exakt der Header-Rahmen (Logo bis Sprach-
	   Switcher), inkl. korrekter wideSize-Kappung auf breiten Bildschirmen. */
	.lxs-grid {
		/* Spalten auf Inhaltsbreite begrenzen; die Grid-Box selbst auf
		   Inhaltsbreite schrumpfen (fit-content) und zentrieren. Dadurch
		   umschliesst die L-Klammer (auf dieser Box) genau den Inhalt statt
		   der vollen Blockbreite. */
		grid-template-columns: minmax(0, 30rem) minmax(0, 30rem);
		width: fit-content;
		max-width: 100%;
		margin-inline: 0;   /* linksbuendig statt zentriert */
		column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
		row-gap: clamp(1.5rem, 3vw, 2.75rem);
		align-items: center;
		padding: clamp(2rem, 3vw, 3rem);
	}

	/* DOM: 1=C1 2=T1 3=C2 4=T2 5=C3 6=T3
	   Ziel:  Reihe1  T1 | C1
	          Reihe2  C2 | T2
	          Reihe3  T3 | C3 */
	.lxs-grid > :nth-child(1) { grid-column: 2; grid-row: 1; } /* C1 */
	.lxs-grid > :nth-child(2) { grid-column: 1; grid-row: 1; } /* T1 */
	.lxs-grid > :nth-child(3) { grid-column: 1; grid-row: 2; } /* C2 */
	.lxs-grid > :nth-child(4) { grid-column: 2; grid-row: 2; } /* T2 */
	.lxs-grid > :nth-child(5) { grid-column: 2; grid-row: 3; } /* C3 */
	.lxs-grid > :nth-child(6) { grid-column: 1; grid-row: 3; } /* T3 */

	.lxs-c { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
}


/* ==========================================================================
   7. Mobil (< 782px = WP-Breakpoint)
   ========================================================================== */

@media (max-width: 781px) {
	/* Graph-Labels: die SVG skaliert auf ~1/3 runter, deshalb müssen die
	   Begriffe in viewBox-Einheiten deutlich groesser sein, um lesbar zu
	   bleiben. Halo mitskalieren, sonst frisst er die Buchstaben. */
	.lxp-node-label {
		font-size: 48px;
		stroke-width: 10px;
	}
	/* Kanten mitskalieren, sonst bleiben von 3.5 viewBox-Einheiten keine
	   ganzen Bildschirm-Pixel uebrig und der Graph wirkt ausgewaschen. */
	.lxpg4-edge { stroke-width: 7; }

	/* Abstand zwischen den Prototypen kleiner, sonst scrollt man durch Leere. */
	.lxp-section { margin-bottom: 3rem; }

	/* Kreise: Text darf nicht aus dem Kreis laufen -> weniger Innenabstand. */
	.lxp-circle { padding: 1.9rem; }

	/* Klammer-Kaesten: volle Breite, kleinere Ecken. */
	.lxp-bracket {
		--corner: 32px;
		max-width: none;
		padding: 1.75rem 1.9rem;
	}
	.lxp-brackets { gap: 2rem; }

	/* Regler: nebeneinander bleibt vom Schieber nichts uebrig. Deshalb
	   Name + Wert in die erste Zeile, Schieber ueber die volle Breite darunter. */
	.proto-controls { padding: 1rem; }
	.proto-controls label {
		flex-wrap: wrap;
		gap: .25rem .75rem;
		margin-bottom: 1.1rem;
	}
	.proto-controls label > .proto-ctl-name { flex: 1 1 auto; }
	.proto-controls output { flex: 0 0 auto; }
	.proto-controls input[type="range"] {
		flex: 1 1 100%;
		order: 3;          /* unter Name und Wert */
	}
}


/* ==========================================================================
   8. Bewegung reduzieren (a11y) – gilt fuer alle animierten Prototypen
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.lxs-uline::after {
		animation: none;
		clip-path: none;
	}
}