/**
 * site.css  --  Stubä Productions auf Gula 5
 *
 * Nur, was diese Site anders braucht als der Master. Ermittelt beim Umzug
 * von "stube" (gula-setup, 2022) auf gula5 am 21.10.2026, am gerenderten
 * Ergebnis gemessen (Vergleichsklon stubeproductions26alt), nicht aus der
 * alten style.css abgeschrieben.
 *
 * Die Navigation steht in css/navi.css.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */


/*
 * SCHRIFT: Inter, dazu Staatliches und Amandella fuer die Titelklassen
 * (Dateien: webfonts/stube-webfonts/, eingebunden in functions.php).
 */
:root {
	--font-family-sans:         "Inter", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	--font-family-staatliches:  "Staatliches", Helvetica, "sans-serif";
	--font-family-lismete:      "Amandella-Script", Georgia, "serif";
	--font-family-hockete:      "Special Elite", Helvetica, "sans-serif";
}


/*
 * GRUNDMASSE wie bisher (stube/library/grid/root.css):
 *   Schrift  14 bis 24 px (gula5 bis 20 px). Titel, Abstaende (--size-*)
 *            und Zeilenhoehen haengen daran.
 *   Zeile    1,35 x Schrift (gula5 1,6)
 *   Gewicht  Text 300 (wie gula5), Titel 700 (gula5 500)
 */
:root {
	--fontsize:    calc(14px + (24 - 14) * ((100vw - 300px) / (2000 - 300)));
	--lineheight:  calc( var( --fontsize ) * 1.35 );
	--bodyweight:  300;
	--titleweight: 700;
}


/*
 * FARBEN. Schrift, Grund, Links und Copyright stehen in den Theme Options
 * (Reiter Farben): Schrift und Link #ffffff, ueberfahren weiss zu 60 %,
 * Grund #661b1a (gilt, wo eine Seite keine eigene Farbe hat), Copyright
 * weiss auf #263238, markierter Text #fdc300. Startseite, Lismätä und
 * Hockätä tragen ihre Grundfarbe als Seitenfarbe (Seitenmaske).
 *
 * Hier das alte Farbvokabular, soweit Inhalt und Plugins es lesen. Als
 * RGB-TRIPEL, weil es als rgba( var(--x), a ) gelesen wird.
 */
:root {
	--yelloworange: 253, 195, 0;
	--rgb_orange:   243, 145, 0;
	--rgb_redorange: 234, 89, 1;

	--yelloworange-50: #fff8e0;
	--yelloworange-100: #feedb3;
	--yelloworange-200: #fee180;
	--yelloworange-300: #fed54d;
	--yelloworange-400: #fdcc26;
	--yelloworange-500: #fdc300;
	--yelloworange-600: #fdbd00;
	--yelloworange-700: #fcb500;
	--yelloworange-800: #fcae00;
	--yelloworange-900: #fca100;
}


/*
 * DIE DREI SHOWS. Hockätä schreibt hellblau auf Blau.
 * Alt: stube/style.css, body.hockete.
 */
body.hockete {
	color: #81e4fc;
}
body.hockete .spi_imgcaption {
	font-size: calc( var( --fontsize ) * 0.7 );
	color: #81e4fc;
	line-height: 1.2;
	margin-top: calc( var( --fontsize ) * 0.3 );
}


/*
 * TITELSCHRIFTEN der Redaktion (Klassen im Inhalt bzw. Feld "Font" der
 * Spalten): .stubefont 11 Zellen, .lismetefont 5, .hocketefont 0.
 */
.stubefont   { font-family: var( --font-family-staatliches ); font-style: var( --font-normal ); }
.lismetefont { font-family: var( --font-family-lismete );     font-style: var( --font-normal ); }
.hocketefont { font-family: var( --font-family-hockete );     font-style: var( --font-normal ); }


/*
 * TITEL ERBEN DIE SCHRIFTFARBE: weiss, auf Hockätä hellblau (body.hockete).
 * gula5 faerbt h1-h6 mit --title_color (ohne Wert ein Grau, gemessen
 * rgb(131,162,168)). currentColor in der Variablen loest am Titel zur
 * geerbten Farbe auf -- auch beim Aufzaehlungspunkt, der dieselbe
 * Variable liest. Darum kein Wert in den Theme Options (Titel).
 */
:root {
	--title_color: currentColor;
}


/*
 * SEITENRAND der Bloecke wie bisher: 1 / 2,5 / 5 Schriftgroessen (ab 576
 * bzw. 768 px). stube setzte das an .mainwrapper, gula5 an <section> mit
 * 2 / 4 / 8 -- gemessen bei 1390 px: Inhaltsbreite 1186 (alt) gegen 1063.
 * Gleiche Regel wie bei skh-g5 (Schwester-Theme).
 */
section {
	padding-left:  var( --size-1 );
	padding-right: var( --size-1 );
}
@media (min-width: 576px) {
	section {
		padding-left:  var( --size-25 );
		padding-right: var( --size-25 );
	}
}
@media (min-width: 768px) {
	section {
		padding-left:  var( --size-5 );
		padding-right: var( --size-5 );
	}
}


/*
 * ABSAETZE mit Abstand oben UND unten (0,65 Schriftgroessen), wie stube.
 * gula5 setzt oben 0 -- jeder Titel in den Spalten ("Auftritte",
 * "Impressionen" ...) rueckte 13 px hoch, die Startseite war 72 px kuerzer.
 */
p {
	margin-top: calc( var( --fontsize ) * 0.65 );
}


/*
 * FETT in 600 mit etwas Sperrung, wie stube (gula5: 700, ohne Sperrung).
 */
:root {
	--strongweight: 600;
}
strong {
	letter-spacing: 0.01em;
}


/*
 * BILDER IM TEXT mit den schmalen Raendern von stube (5 px, rechts/links
 * 20 px Abstand zum Text) und auch am Handy umflossen. gula5 gibt 1em und
 * zentriert sie unter 768 px -- das Instagram-Zeichen auf der Startseite
 * stand dann allein in der Mitte, die Partner-Logos 23 px tiefer.
 * Alt: stube/style.css, .aligncenter/.alignright/.alignleft.
 */
img.aligncenter {
	margin: 5px auto 5px auto;
}
img.alignright {
	margin: 5px 0 10px 20px;
}
img.alignleft {
	margin: 5px 20px 10px 0;
}
p img.alignright,
p img.alignleft {
	margin-top: 5px;
}
@media (max-width:767px) {
	img.alignright {
		display: inline;
		float: right;
		margin: 5px 0 10px 20px;
	}
	img.alignleft {
		display: inline;
		float: left;
		margin: 5px 20px 10px 0;
	}
}


/*
 * TEXTFARBE .yelloworange -- steht 8x im Inhalt (Lismätä, Programm und
 * Events). Alt: stube/style.css. gula5 fuehrt die Klasse nur im nicht
 * geladenen Zusatzblatt css/zusatz/color-wheel.css, dort als fertige Farbe
 * statt als Tripel.
 */
.yelloworange { color: rgba( var(--yelloworange), 1.0 ); }


/*
 * AUFTRITTE-KARTE: Seitenverhaeltnis 1:1,2 (stube-auftritte) wie bisher
 * ohne das Polster gerechnet. stube kannte kein border-box; unter gula5
 * war jede Karte 9 px hoeher (442 statt 433 bei 1390 px).
 */
.sp_auftritt {
	box-sizing: content-box;
}


/*
 * SUCHKNOPF (Suche, 404): gula5 gibt ihm die Schriftfarbe als Grund und
 * schreibt weiss darauf -- auf dieser Site (weisse Schrift) war die
 * Beschriftung unsichtbar. Hier in der Grundfarbe der Seite.
 */
.suchform button[type="submit"] {
	color: var( --sitebgcolor );
}


/*
 * COPYRIGHT-LEISTE mit halber Schriftgroesse Polster (gula5: ein Viertel),
 * wie stube und skh-g5. Farben weiss auf #263238 in den Theme Options.
 * Jede Seite war 10 px kuerzer (1390 px).
 */
#copyright {
	padding-top:    calc( var( --fontsize ) * 0.5 );
	padding-bottom: calc( var( --fontsize ) * 0.5 );
}


/*
 * SPALTENBILDER ohne eigenen Rand: der Master legt um jedes Spaltenbild
 * .column-image-wrapper mit 0,3 Schriftgroessen oben und unten, die alte
 * Kopie von gula-gridspalten setzte das Bild ohne Huelle. Gemessen auf
 * Lismätä (Block 154, drei Plakate): 12 px hoeher. Ein Element mehr im
 * Selektor, weil gula-gridspalten.css nach dieser Datei laden kann.
 */
.grid_wrapper .column-image-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}