/*
 * site.css  --  was steckdesign.ch von Gula 5 unterscheidet
 *
 * DURCH MESSEN GEBAUT, nicht abgeschrieben. Der Vorgaenger sdesign hatte
 * 1426 Zeilen style.css mit 217 Regeln und 718 Deklarationen. Verfahren
 * (07.09.2026): die alte style.css per XHR in die laufende Seite holen, ueber
 * das CSSOM zerlegen, je Regel einen Klon des ersten Trefferelements daneben
 * setzen, die alten Angaben darauf anwenden und den BERECHNETEN Stil
 * vergleichen. Was gleich herauskommt, liefert Gula 5 schon.
 *
 * Ergebnis ueber Startseite, /design/ und /referenzen/:
 *   111 / 104 / 99 Deklarationen geprueft
 *   90  /  89 /  88 davon deckungsgleich  --  rund 88 Prozent
 *
 * Der Rest steht unten. Dazu tot, weil im ganzen Inhalt null Mal vorhanden:
 * .spalte_40_60, .titel-big/-large/-extralarge, dl.base*, dl.image_left,
 * table.themetable, .vh100/.vh75/.vh50/.vhtheme, .contentwidth-70/-60,
 * .fade-up/-in/-left, .fadeInBlock, alle .gallery.gallery-columns-*
 * (30 Regeln, die Site benutzt keine WP-Galerien), input:focus (kein
 * Formular auf der Site). Und wortgleich in Gula 5 vorhanden: ul li::before,
 * ::selection, blockquote, .wp-caption, .align*, ul.base, .vh100,
 * .contentwidth-90/-80, die ganze Ueberschriften-Staffel.
 *
 * MESSGRENZE, ehrlich benannt: das Klon-Verfahren sieht keine
 * Pseudo-Selektoren (a:hover, ::selection, li::before). Die sind einzeln
 * gegen Gula 5s Blaetter geprueft, nicht gemessen.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */


/*	============================================================
 *	TOKEN
 *
 *	Die vier Werte, in denen sdesigns root.css vom Master abwich -- Datei
 *	gegen Datei gemessen. Mehr war es nicht.
 */
:root {
	--fontsize: calc(14px + (24 - 14) * ((100vw - 300px) / (2000 - 300)));
	--font-family-sans: "Inter", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	--bodyweight: 400;
	--titleweight: 600;

	/*	Der aktuelle Eintrag im Shortcode-Menue [listmenu] -- auf dieser Site
		weiss, nicht Gula 5s Rueckfallblau #0275e7.

		NACHTRAG 08.09.2026, gefunden beim Umzug von steckweb2026. sdesigns
		Kopie von library/gula-theme/func/sc/sc.menu.css war von Hand auf
		var(--nav_linkcurrent_color) umgestellt, und color-theme.css setzte das
		auf rgb(var(--white)). Beim Umzug faellt die Kopie weg, und der
		Elternteil hatte die Farbe fest verdrahtet -- der Fusseintrag "Design"
		stand seither blau, auch LIVE.

		Warum es hier acht Stunden lang niemandem auffiel: die Messung haelt
		die ALTEN Regeln gegen den NEUEN Zustand. Eine Farbe aus einer Datei,
		die es im neuen Theme gar nicht mehr gibt, liegt ausserhalb dessen, was
		das Verfahren ueberhaupt ansieht. rgb(2,117,231) ist ein gueltiger
		berechneter Wert, es fehlt keine Variable, es gibt keinen Logeintrag.

		Der Elternteil bietet die Variable seit gula5 778c614. */
	--sc-menu-fg-current: #ffffff;
	--sc-menu-fg-current-hover: var( --site_linkhover_color );
}


/*	============================================================
 *	SCHRIFT UND TEXT
 */

/*	Gula 5 unterstreicht Links gepunktet. Diese Site nicht. */
a,
a:visited {
	text-decoration: none;
}

/*	Gula 5 setzt strong auf 700. Hier folgt es der Titelstaerke (600) und
	bekommt etwas Laufweite. */
strong {
	font-weight: var( --titleweight );
	letter-spacing: 0.01em;
}

.small {
	font-size: calc(var( --size-1 ) * 0.85);
	line-height: calc(var( --size-1 ) * 1.25);
	margin-bottom: calc( var( --size-1 ) * 0.65 );
}


/*	============================================================
 *	LAYOUT
 */

/*	Sprungziele des Smoothscroll-Plugins: ein unsichtbarer Anker, der um eine
	halbe Navigationshoehe nach oben versetzt ist, damit die feste Navi die
	Zielzeile nicht verdeckt. */
a[id*="dest"] {
	display: block;
	width: 0;
	height: 0;
	position: relative;
	top: calc(-0.5 * var( --size-10 ));
	visibility: hidden;
}


/*	============================================================
 *	DER GROSSE ANFANGSBUCHSTABE
 *
 *	Nicht per background-clip:text, sondern umgekehrt: die Box IST das Bild
 *	und wird mit der Buchstabenform maskiert. Die beiden Variablen kommen aus
 *	den Theme Options (inc/letterimage.php); ist dort nichts gesetzt, greifen
 *	die Rueckfaelle in var().
 */
.d-clip,
.d-mask {
	display: block;
	width: 0.613635em;
	height: 0.727273em;
	margin-block: -0.3393em;
	margin-inline-start: 0.0632em;
	background-image: var(--letter-image, url(../images/D/d-06.webp));
	background-position: var(--letter-position, 50% 50%);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: url(../images/D/d.svg);
	mask-image: url(../images/D/d.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;

	/* Der Buchstabe im Markup bleibt fuer Screenreader stehen, wird aber
	   nicht gemalt -- die sichtbare Form kommt aus der Maske. */
	color: transparent;
}

/*	Ohne Maskenunterstuetzung waere sonst das nackte Foto-Rechteck zu sehen.
	Dann lieber ein schlichter weisser Buchstabe.

	ACHTUNG BEIM MESSEN: mein CSSOM-Laeufer liess @supports zunaechst
	durchlaufen wie eine gewoehnliche Regel und meldete diesen Block darum als
	Abweichung -- er sah aus wie ein Override, der die Maske abschaltet. Ist
	er nicht: in einem maskenfaehigen Browser gilt er nie. */
@supports not ((mask-image: url(../images/D/d.svg)) or (-webkit-mask-image: url(../images/D/d.svg))) {
	.d-clip,
	.d-mask {
		width: auto;
		height: auto;
		line-height: 1;
		margin-block: 0;
		margin-inline-start: 0;
		background-image: none;
		color: #fff;
	}
}