/*
 * site.css  --  steckimage.ch
 *
 * DIE EINZIGE GESTALTUNGSABLAGE DIESER SITE. Nicht abgeschrieben, sondern
 * gemessen: der Vorgaenger "simage" trug 1430 Zeilen in style.css und 161 in
 * color-theme.css. Jede Regel daraus wurde im laufenden Browser gegen den
 * neuen Zustand gehalten -- altes Blatt per synchronem XHR holen, ueber das
 * CSSOM zerlegen, je Regel einen Klon des ersten Trefferelements danebensetzen,
 * die alten Angaben darauf anwenden, BERECHNETEN Stil vergleichen. Was gleich
 * herauskam, liefert gula5 schon und steht hier nicht.
 *
 * Dazu eine zweite Messung, die die erste kontrolliert: jede uebrige Regel
 * gegen die Blaetter des Elternteils halten (inklusive @import -- CSSImportRule
 * hat .styleSheet, nicht .cssRules) und melden, was dort schon wortgleich
 * steht. Sie hat hier fuenf Bloecke wieder herausgeworfen (ul, ul li, section,
 * .contentwidth-*, #copyright .copyright_content) und die transition an `a`.
 *
 * WAS DIE ERSTE FASSUNG VON 210 REGELN UEBRIG LIESS:
 *   146  tot -- kein Element auf der Seite traegt den Selektor
 *    26  Medienbedingung trifft bei 1390 px nicht zu
 *    19  Pseudo-Selektoren, einzeln gegen den Elternteil geprueft
 *     9  bitgleich mit dem, was gula5 ohnehin liefert
 *    10  abweichend -- davon 5 vom Elternteil absichtlich anders geregelt
 *
 * Die Farben stehen NICHT hier, sondern in den Theme Options -- gula5 erzeugt
 * dieselben Variablen aus acht Werten (src/palette.php). Die Werte und ihre
 * Herleitung: ~/Desktop/steckimage2026-baseline/FARBWERTE.md.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */

/* ------------------------------------------------------------------
 *	1 -- Die vier Token aus der alten root.css
 *
 *	Das ist die gesamte Drift von simages root.css gegen den Master:
 *	vier Zeilen. Sie sind der Grund, warum ohne diese Datei JEDES der
 *	260 gemessenen Elemente abwich -- Schriftfamilie, Schriftgrad und
 *	Gewicht vererben sich auf alles.
 * ------------------------------------------------------------------ */

: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 Menue -- weiss, nicht blau.
	 *
	 *	sc.menu.css traegt im Master das feste #0275e7. Die drei
	 *	steck-Themes hatten ihre KOPIE dieser Datei auf
	 *	var(--nav_linkcurrent_color) umgestellt, und das war hier weiss.
	 *	Beim Umzug faellt die Kopie weg. gula5 schreibt seit dem
	 *	sweb-Umzug var( --sc-menu-fg-current, #0275e7 ) -- wirkungsfrei,
	 *	bis eine Site die Variable setzt.
	 *
	 *	Gemessen, nicht angenommen: ohne diese Zeile stehen auf der
	 *	Startseite genau zwei Menuelinks ("Foto", "Startseite") in
	 *	rgb(2,117,231) statt rgb(255,255,255).
	 */
	--sc-menu-fg-current: #ffffff;
}


/* ------------------------------------------------------------------
 *	2 -- Links ohne Unterstrich
 *
 *	gula5s base.css gibt `a` einen gepunkteten Unterstrich. Diese Site
 *	hatte nie einen (gemessen: 17 Links auf der Startseite). Die
 *	transition steht schon im Elternteil und wird NICHT wiederholt --
 *	das ist einer der Bloecke, die die Gegenprobe herausgeworfen hat.
 * ------------------------------------------------------------------ */

a,
a:visited {
	text-decoration: none;
}


/* ------------------------------------------------------------------
 *	3 -- strong
 *
 *	Der Elternteil gestaltet `strong` gar nicht, die Site schon:
 *	Titelgewicht statt fett, dazu eine Spur Laufweite. Auf der
 *	Startseite betrifft das 82 Elemente.
 * ------------------------------------------------------------------ */

strong {
	font-weight:    var( --titleweight );
	font-style:     var( --font-normal );
	letter-spacing: 0.01em;
}


/* ------------------------------------------------------------------
 *	4 -- Der Sprunganker des Smoothscroll-Plugins
 *
 *	144 Anker auf 126 Adressen. Eine unsichtbare Marke, die um eine
 *	halbe Zeilenhoehe nach oben versetzt ist, damit das Ziel nicht
 *	unter der festen Navigation verschwindet.
 * ------------------------------------------------------------------ */

a[id*="dest"] {
	display:    block;
	width:      0;
	height:     0;
	position:   relative;
	top:        calc(-0.5 * var( --size-10 ));
	visibility: hidden;
}


/* ------------------------------------------------------------------
 *	5 -- Das Bild im grossen Anfangsbuchstaben
 *
 *	Nicht per background-clip:text, sondern umgekehrt: die Box IST das
 *	Bild und wird mit der Buchstabenform maskiert. Dadurch haengt der
 *	Bildausschnitt nicht mehr an Zeilenhoehe und Zellenbreite.
 *	images/F/f.svg enthaelt den Buchstabenpfad (viewBox 1512.73 x
 *	2045.75).
 *
 *	Groesse in em, damit die Typo-Klasse (fs50vw) sie weiter steuert:
 *	Hoehe 0.727273em ist die Versalhoehe, Breite = Hoehe x 0.739450
 *	(Seitenverhaeltnis des SVG) = 0.537782em. Stimmen die beiden nicht
 *	zusammen, steht der Buchstabe wegen mask-size:contain zu klein in
 *	einer zu weiten Box.
 *
 *	PFADE: die Datei liegt jetzt in css/, die Bilder eine Ebene hoeher.
 *	Darum ../images/ statt images/ -- relative URLs in einem Blatt
 *	loesen gegen DIESES Blatt auf, nicht gegen das Dokument.
 * ------------------------------------------------------------------ */

.f-clip,
.f-mask {
	display: block;
	width:   0.537782em;
	height:  0.727273em;

	/*	Die Buchstabenbox nimmt echte Hoehe ein und wuerde die Section
		von 902 auf 1028px aufblaehen. Der negative Rand nimmt das
		zurueck: ab -0.1em liegt die Section wieder auf 902px und der
		Buchstabe da, wo die Textglyphe stand. Tiefere Werte aendern
		nichts mehr. */
	margin-block: -0.1em;

	/*	Waagrecht fehlt der Maskenbox die linke Vorbreite der Glyphe
		(Inter Bold: 178 Einheiten von 2816), sonst steht der Buchstabe
		40px weiter links als die Textfassung. */
	margin-inline-start: 0.0632em;

	background-image:    var(--letter-image, url(../images/F/f-01.webp));
	background-position: var(--letter-position, 50% 50%);
	background-repeat:   no-repeat;
	background-size:     cover;

	-webkit-mask-image:    url(../images/F/f.svg);
	        mask-image:    url(../images/F/f.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. */
@supports not ((mask-image: url(../images/F/f.svg)) or (-webkit-mask-image: url(../images/F/f.svg))) {

	.f-clip,
	.f-mask {
		width:            auto;
		height:           auto;
		line-height:      1;
		background-image: none;
		color:            #fff;
	}
}