/* ==================================================================
   DROMOLOGIE — GLOBALE EBENE
   Laeuft auf ALLEN Seiten, Startseite eingeschlossen.
   Enthaelt: Effektklassen, Kopfzeile, Index, Messsucher.
   Zahlenwerte kommen aus den Einstellungen, nicht aus dieser Datei.
   ================================================================== */

:root{
  --dromo-v:0;             /* Scrolltempo 0 bis 1 */
  --dromo-split:0px;       /* Farbversatz */
  --dromo-stretch:1;       /* Breitenzerrung */
  --dromo-logo-faktor:1.8; /* wie viel staerker das Logo reagiert */
  --dromo-signal:#E10600;
}

/* ================= EFFEKT ALS KLASSE =================
   Im Block-Editor: Block > Erweitert > Zusaetzliche CSS-Klasse(n)
     dromo-split    roter und cyanfarbener Versatz beim Scrollen
     dromo-zerren   zusaetzlich leichte Breitenzerrung
   ==================================================== */
.dromo-split{
	text-shadow:
		var(--dromo-split,0px) 0 0 rgba(225,6,0,.85),
		calc(var(--dromo-split,0px) * -1) 0 0 rgba(0,170,255,.5);
}
.dromo-zerren{
	transform: scaleX(var(--dromo-stretch,1));
	transform-origin: left center;
}
/* Automatik. Wird im Backend eingeschaltet und legt den Farbversatz
   ohne Zutun auf alle Ueberschriften im Inhalt. Wer einzelne Elemente
   lieber von Hand auszeichnet, laesst den Schalter aus und benutzt
   die Klassen oben. */
body.dromo-auto h1,
body.dromo-auto h2,
body.dromo-auto h3,
body.dromo-auto .wp-block-post-title,
body.dromo-auto .wp-block-site-title{
	text-shadow:
		var(--dromo-split,0px) 0 0 rgba(225,6,0,.85),
		calc(var(--dromo-split,0px) * -1) 0 0 rgba(0,170,255,.5);
}

@media (prefers-reduced-motion: reduce){
	.dromo-split{text-shadow:none}
	.dromo-zerren{transform:none}
	body.dromo-auto h1,body.dromo-auto h2,body.dromo-auto h3,
	body.dromo-auto .wp-block-post-title,
	body.dromo-auto .wp-block-site-title{text-shadow:none}
}

/* ================= KOPFZEILE ================= */
#dromo-kopf{
	position:fixed; top:var(--dromo-oben,22px); left:0; right:0;
	z-index:2147482000; pointer-events:none;
	display:flex; align-items:center; justify-content:space-between;
	padding:0 var(--dromo-rechts,22px) 0 var(--dromo-links,22px);
	font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
#dromo-kopf > *{pointer-events:auto}

/* Logo. Faerbt sich ueber currentColor mit, reagiert staerker auf
   Tempo als normaler Text: Faktor aus den Einstellungen. */
#dromo-logo{display:block; color:currentColor; line-height:0}
#dromo-logo svg{
	display:block; fill:currentColor;
	height:var(--dromo-logo-hoehe,39px); width:auto;
	transform:scaleX(calc(1 + (var(--dromo-stretch,1) - 1) * var(--dromo-logo-faktor,1.8)));
	transform-origin:left center;
	filter:
		drop-shadow(calc(var(--dromo-split,0px) * var(--dromo-logo-faktor,1.8)) 0 0 rgba(225,6,0,.9))
		drop-shadow(calc(var(--dromo-split,0px) * var(--dromo-logo-faktor,1.8) * -1) 0 0 rgba(0,170,255,.6));
}
@media (prefers-reduced-motion: reduce){
	#dromo-logo svg{transform:none;filter:none}
}

/* INDEX-Knopf */
#dromo-kopf .knopf{
	background:var(--dromo-signal); border:1px solid var(--dromo-signal); color:#FAFAFA;
	font:inherit; font-size:.72rem; font-weight:500; letter-spacing:.2em;
	padding:.8rem 1.15rem; border-radius:0; cursor:pointer;
	transition:background-color .12s,color .12s,border-color .12s;
}
#dromo-kopf .knopf:hover{background:#FAFAFA;border-color:#FAFAFA;color:var(--dromo-signal)}

/* ================= INDEX ================= */
#dromo-indexbox{
	position:fixed; inset:0; z-index:2147482500;
	background:#FAFAFA; color:#111; display:none;
	padding:clamp(2rem,7vw,6rem); overflow:auto;
	font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
html.dromo-index-offen #dromo-indexbox{display:block}
html.dromo-index-offen body{overflow:hidden}
#dromo-indexbox h2{font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:800;text-transform:lowercase;letter-spacing:-.045em;
	font-size:clamp(2.6rem,7vw,5.5rem);line-height:.9;margin:0 0 .5rem}
#dromo-indexbox p.vor{font-family:inherit;font-weight:400;color:#3A3A38;font-size:.9rem;
	margin:0 0 3rem;max-width:46ch;line-height:1.6}
#dromo-indexbox ul{list-style:none;margin:0;padding:0;columns:2;column-gap:4rem;max-width:960px}
@media (max-width:700px){#dromo-indexbox ul{columns:1}}
#dromo-indexbox li{break-inside:avoid;border-bottom:1px solid rgba(0,0,0,.16)}
#dromo-indexbox li a{display:block;padding:.85rem 0;font-family:inherit;font-size:1.05rem;
	font-weight:500;letter-spacing:-.02em;color:#111;text-decoration:none}
#dromo-indexbox li a:hover{color:var(--dromo-signal)}
#dromo-indexbox .zu{position:absolute;top:24px;right:26px;background:none;border:0;
	font-family:"DM Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.2em;
	cursor:pointer;color:#111}

/* ================= MESSSUCHER ================= */
html.dromo-sucher-an body{cursor:none}
html.dromo-sucher-an input,
html.dromo-sucher-an textarea,
html.dromo-sucher-an select,
html.dromo-sucher-an button,
html.dromo-sucher-an [contenteditable="true"]{cursor:auto}
@media (pointer:coarse){html.dromo-sucher-an body{cursor:auto}}

#dromo-sucher{
	position:fixed; z-index:2147483000; pointer-events:none;
	width:300px; height:219px; margin:-106px 0 0 -155px;
	left:-9999px; top:-9999px;
	mix-blend-mode:difference; color:#F2F2EE;
}
#dromo-sucher svg{width:100%;height:100%;display:block;overflow:visible}
#dromo-sucher .rahmen {fill:none;stroke:currentColor;stroke-width:3.1;stroke-linecap:butt;opacity:.92}
#dromo-sucher .klammer{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:butt;opacity:.8}
#dromo-sucher .feld   {fill:currentColor;opacity:.9}
@media (prefers-reduced-motion: reduce){
	#dromo-sucher{display:none!important}
	html.dromo-sucher-an body{cursor:auto}
}