/**
 * site.css — Nepal Swiss
 *
 * Site-eigene Regeln, die der guladev-Master nicht abdeckt.
 * Erzeugt am 12.08.2026 aus dem Abgleich der 26 gerenderten Seiten der
 * alten Site. Bericht: ~/Desktop/nepalswiss-css-abgleich.md
 *
 * WIRD NACH color-theme.css GELADEN — die Hausfarben stehen bereit:
 *     --rgb_red 230,0,11 · --rgb_darkgrey 40,40,40 · --sitecolor = darkgrey
 *     --sitefgcolor #282828 (Farbe) · --sitefgcolor_rgb 40,40,40 (Tripel)
 *
 * ZWEI TEILE nach unterschiedlichem Regelwerk:
 *
 *   TEIL A — Selektoren, die in KEINER geladenen CSS der neuen Site
 *            vorkommen. Ganze Regel übernommen.
 *   TEIL B — Selektoren, die der Master kennt. NUR Farbe, Typografie und
 *            Inhalt. Keine Abstände, keine Geometrie: die setzt der Master
 *            bereits, sonst zählen sie doppelt. Bei bosshard-kälin ist eine
 *            Seite dadurch von 1,42 % auf 12,12 % Abweichung gerutscht.
 *
 * NAVIGATION FEHLT ABSICHTLICH — 37 Regeln, die erst verteilt werden, wenn
 * theme-nav-logocenter steht: Mechanik ins Plugin, Gestaltung hierher.
 *
 * Document & Code @copyright by SteckDesign
 * Änderungen durch Dritte sind nicht erlaubt.
 */

/*  @import muss VOR allen Regeln stehen. Die vier Hausschriften liegen in
 *  library/gula-custom/webfonts/themefonts/ — aus dem alten Theme übernommen,
 *  dort wurden sie ebenso per @import aus der style.css geladen.            */
@import url("../webfonts/themefonts/themefonts.css");


/* ==========================================================================
 * TEIL 0 — Grössenbasis und Schriften
 *
 * Muss ganz oben stehen: alle --size-* leiten sich aus --fontsize ab, und
 * die Titel-Token aus den Familien.
 * ========================================================================== */

:root {

	/*  --fontsize skaliert mit der Fensterbreite. Der Master geht bis 20px,
	 *  diese Site immer bis 24px. Bei 1280px Fenster sind das 19,8px gegen
	 *  17,5px — gut 13 Prozent, und weil jede --size-* daraus folgt, betrifft
	 *  es Schrift UND Abstände der ganzen Seite.                            */
	--fontsize: calc(14px + (24 - 14) * ((100vw - 300px) / (2000 - 300)));
	--lineheight: calc( var( --fontsize ) * 1.5 );

	/*  Schriftfamilien. Wichtig: --title-font zeigt auf die HANDSCHRIFT —
	 *  im Master steht dort die Grotesk. Daran hängen sämtliche Titel.      */
	--font-family-sans:   "Noto Sans", sans-serif;
	--font-family-serif:  "Caveat", serif;
	--font-family-hand:   "PT Script Eclipse", sans-serif;
	--font-family-script: "PT Script Lightning", sans-serif;

	--body-font:         var( --font-family-sans );
	--title-font:        var( --font-family-hand );
	--title-font-serif:  var( --font-family-serif );
	--title-font-hand:   var( --font-family-hand );
	--title-font-script: var( --font-family-script );

	--bodyweight: 300;
	--titleweight: 500;
}



/* ==========================================================================
 * TEIL A — Selektoren, die der Master nicht kennt
 * ========================================================================== */

/* --- Blog -------------------------------------------------------- */

.blog_recent--title h3 {   /* style-child.css */
	color: rgba( var(--sitecolor), 1 );
}
.blog_recent--title h4 {   /* style-child.css */
	color: rgba( var(--sitecolor), 1 );
}
.blog_recent--title h5 {   /* style-child.css */
	color: rgba( var(--sitecolor), 1 );
}
.blog_recent--title h6 {   /* style-child.css */
	color: rgba( var(--sitecolor), 1 );
}
.blogsingle--content h1.serif, .blogsingle--content h2.serif {   /* style-child.css */
	letter-spacing: 0px;
	word-spacing: -0px;
	text-transform: none;
}
a.blogbasic--link h3 {   /* style-child.css */
	text-transform: uppercase;
	line-height: calc( var( --size-1 ) * 1.6 )!important;
	letter-spacing: calc( var( --size-1 ) * 0.1 );
	word-spacing: calc( var( --size-1 ) * -0.2 );
	color: rgba( var(--sitefgcolor_rgb), 1 )!important;
}

/* --- Footer und Copyright ---------------------------------------- */

@media (min-width: 768px) {
.footer_content .S02 li a:before, .footer_content .S03 li a:before, .footer_content .S04 li a:before {   /* style.css */
	position: relative;
	top: 0px;
	display: inline-block;
	font-family: 'FontAwesome';
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 0px;
	padding-right: 10px;
	padding-left: 0px;
	padding-bottom: 0;
	content: "\f105";
	margin-left: 0px;
}
}
@media (min-width: 768px) {
.footer_content .S02 ul li a, .footer_content .S03 ul li a, .footer_content .S04 ul li a {   /* style.css */
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
}
}
@media (min-width: 768px) {
.footer_content .S02 ul li, .footer_content .S03 ul li, .footer_content .S04 ul li {   /* style.css */
	border-top: 1px dotted rgba(var(--sitecolor), 0.6);
	margin: 0px;
	padding: 0px;
}
}
@media (min-width: 768px) {
.footer_content .S02 ul, .footer_content .S03 ul, .footer_content .S04 ul {   /* style.css */
	width: 100%;
	margin-top: 1px;
	border-bottom: 1px dotted rgba(var(--sitecolor), 0.6);
}
}

/* --- Buttons und Links ------------------------------------------- */

a[name] {   /* style.css */
	display: block;
	width: 0;
	height: 0;
	position: relative;
	top: calc(-0.5 * var( --size-3 ));
	visibility: hidden;
}

/* --- Typografie und Titel ---------------------------------------- */

.hand {   /* style.css */
	font-family: var( --title-font-hand );
	font-style: var( --font-normal );
	letter-spacing: 2px;
	word-spacing: -2px;
}

/* ==========================================================================
 * TEIL B — bekannte Selektoren, nur Farbe/Typografie/Inhalt
 * ========================================================================== */

/* --- Sonstiges --------------------------------------------------- */

.clearfix::after {   /* style.css */
	content: "";
}
.fs2 {   /* style.css */
	font-size: calc( var( --fontsize ) * 0.7 );
}
.scroll-up {   /* style-child.css */
	background-color: #1C1C1C;
}
@media (min-width: 768px) {
.scroll-up {   /* style-child.css */
	background-color: #1C1C1C;
}
}
.small {   /* style.css */
	font-size: calc(var( --size-1 ) * 0.85);
	font-weight: var( --bodyweight );
	font-style: var( --font-normal );
	line-height: calc(var( --size-1 ) * 1.2);
}
.text-center {   /* style.css */
	text-align: center!important;
}
.text-left {   /* style.css */
	text-align: left!important;
}
a, a:visited {   /* style.css */
	color: inherit;
	text-decoration: none;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-underline-offset: calc(var( --size-1 ) * 0.3);
	text-decoration-thickness: 1px;
}
body {   /* style.css */
	font: var( --font-normal ) var( --bodyweight ) var( --fontsize )/var( --lineheight ) var( --body-font );
	letter-spacing: 0px;
	color: rgba( var(--sitecolor), 1.0);
	background-color: rgba( var(--site-bgcolor), 1.0);
}
strong {   /* style.css */
	font-weight: var( --weight-600 );
	font-style: var( --font-normal );
	letter-spacing: 0.01em;
}
ul {   /* style.css */
	list-style: none;
	text-align: left;
}
ul li:before {   /* style.css */
	background-color: rgba(var(--rgb_red), 1.0);
	content: "";
}
@media (min-width: 768px) {
ul li:before {   /* style.css */
	background-color: rgba(var(--rgb_red), 1.0);
	content: "";
}
}
ul.base {   /* style.css */
	font-size: calc( var( --fontsize ) * 0.9 );
	list-style: none;
}
ul.base li {   /* style.css */
	font-weight: var( --bodyweight );
	background-color: rgba(var(--tablebg), 0.15);
}

/* --- Typografie und Titel ---------------------------------------- */

.lead {   /* style.css */
	font-size: calc(var( --size-1 ) * 1.1);
	font-weight: var( --bodyweight );
	font-style: var( --font-normal );
	line-height: calc(var( --lineheight ) * 1.15);
}
.serif {   /* style.css */
	font-family: var( --title-font-serif );
	font-weight: 600;
	font-style: var( --font-normal );
	letter-spacing: 0px;
	word-spacing: -0px;
	text-transform: none;
}
.titel-big {   /* style.css */
	font-size: calc( var( --fontsize ) * 3.9 );
	line-height: calc( var( --size-1 ) * 4.3);
	letter-spacing: calc(var( --size-1 ) * 0.25);
	word-spacing: calc(var( --size-1 ) * -0.19);
}
.upcase {   /* style.css */
	text-transform: uppercase;
}
h1, .h1 {   /* style.css */
	font-size: calc( var( --fontsize ) * 2 );
	line-height: calc( var( --size-1 ) * 2.2 );
	letter-spacing: calc(var( --size-1 ) * 0.13);
	word-spacing: calc(var( --size-1 ) * -0.19);
}
h1, h2, h3, .h1, .h2, .h3 {   /* style.css */
	font-family: var( --title-font );
	font-style: var( --font-normal );
	font-weight: var( --titleweight );
	text-transform: uppercase;
	color: rgba(var(--rgb_red), 1.0);
}
h2, .h2 {   /* style.css */
	font-size: calc( var( --fontsize ) * 1.6 );
	line-height: calc( var( --size-1 ) * 1.8);
	letter-spacing: calc(var( --size-1 ) * 0.13);
	word-spacing: calc(var( --size-1 ) * -0.19);
}
h3, .h3 {   /* style.css */
	font-size: calc( var( --fontsize ) * 1.45 );
	line-height: calc( var( --size-1 ) * 1.65);
	letter-spacing: calc(var( --size-1 ) * 0.13);
	word-spacing: calc(var( --size-1 ) * -0.19);
}
h4, h5, h6, .h4, .h5, .h6 {   /* style.css */
	font-family: var( --title-font );
	font-weight: var( --titleweight );
	font-style: var( --font-normal );
	text-transform: uppercase;
	color: rgba(var(--rgb_red), 1.0);
}
h6, .h6 {   /* style.css */
	font-size: calc( var( --fontsize ) * 1);
	line-height: calc( var( --size-1 ) * 1.2);
	letter-spacing: calc(var( --size-1 ) * 0.08);
	word-spacing: calc(var( --size-1 ) * -0.19);
}

/* --- Blog -------------------------------------------------------- */

.blog-sidebar .latest-basic--content h6 {   /* style-child.css */
	color: rgba( var(--sitecolor), 1 );
}
.blog-sidebar a.latest-basic--link {   /* style-child.css */
	color: rgba( var(--sitecolor), 1 );
}
.blogsingle--content h1 {   /* style-child.css */
	line-height: calc( var( --size-1 ) * 2.2 );
	letter-spacing: calc( var( --size-1 ) * 0.13 );
	word-spacing: calc( var( --size-1 ) * -0.19 );
	text-transform: uppercase;
}
.blogsingle--content h2 {   /* style-child.css */
	line-height: calc( var( --size-1 ) * 1.8 );
	letter-spacing: calc( var( --size-1 ) * 0.13 );
	word-spacing: calc( var( --size-1 ) * -0.19 );
	text-transform: uppercase;
}
.blogsingle--titel h1 {   /* style-child.css */
	letter-spacing: calc(var( --size-1 ) * 0.15);
	word-spacing: calc(var( --size-1 ) * -0.2);
	color: rgba( var(--sitecolor), 1 );
}
a.blogbasic--link h3:hover {   /* style-child.css */
	color: var(--site_linkhover_color)!important;
}

/* --- Definitionslisten ------------------------------------------- */

dl.base_wide dt, dl.base_time dt, dl.base dt {   /* style.css */
	font-weight: var( --bodyweight );
}

/* --- Footer und Copyright ---------------------------------------- */

@media (min-width: 768px) {
#copyright {   /* style.css */
	font-size: calc( var( --fontsize ) * 0.8 );
	text-align: center;
	letter-spacing: 0px;
	color: rgba(var(--white), 1.0);
	background-color: rgba(var(--copyright_bg), 1.0);
}
}
@media (min-width: 768px) {
#footer {   /* style.css */
	font-size: calc( var( --fontsize ) * 1 );
	color: rgba(var(--sitecolor), 1.0);
}
}
@media (min-width: 768px) {
.footer_content .S02 ul li a:active, .footer_content .S02 ul li a:focus, .footer_content .S02 ul li a:hover, .footer_content .S03 ul li a:active, .footer_content .S03 ul li a:focus, .footer_content .S03 ul li a:hover, .footer_content .S04 ul li a:active, .footer_content .S04 ul li a:focus, .footer_content .S04 ul li a:hover {   /* style.css */
	color: rgba(var(--redviolett), 1.0);
}
}

/* --- Buttons und Links ------------------------------------------- */

a:hover {   /* style.css */
	color: var( --site_linkhover_color );
}


/* ==========================================================================
 * TEIL C — Navigation
 *
 * Die MECHANIK steckt im Plugin theme-nav-logocenter (Vollbild-Overlay,
 * Logo mittig, Schalter rechts). Hier steht ausschliesslich, was diese
 * Site anders macht: helle Überlagerung mit roter Schrift statt der
 * dunklen Master-Variante, grössere Schrift, Versalien.
 *
 * Zwei Klassen wurden beim Umstieg umbenannt — hier bereits abgebildet:
 *     .nav_item_logo      ->  .navitem_logo
 *     .nav_item_nav       ->  .navitem_exp
 *     .nav-expander-negativ -> .nav-expander
 * ========================================================================== */

/* --- eigene Bausteine dieser Site --------------------------------- */

.main-nav .sub-menu li a {   /* navi.css */
	color: rgba( var(--rgb_red), 1 )!important;
}
.main-nav li.menu-item a {   /* navi.css */
	color: rgba( var(--rgb_red), 1 )!important;
	background-color: transparent;
	text-decoration: none;
}
.main-nav li.menu-item a:active, .main-nav li.menu-item a:hover {   /* navi.css */
	color: rgba( var(--rgb_red), 1.0 )!important;
	background-color: transparent;
}
.main-nav ul.sub-menu li {   /* navi.css */
	font-size: 2.5vh;
	color: rgba( var(--rgb_red), 1 )!important;
}
a.nav-expander:hover {   /* navi.css, war a.nav-expander-negativ:hover */
	cursor: pointer;
}
a.nav-expander:hover {   /* navi.css */
	cursor: pointer;
}

/* --- Farbe und Typografie über die Master-Variante ---------------- */

.aside {   /* navi.css */
	/*  NUR der Hintergrund gehört hierher: die Überlagerung dieser Site ist
	 *  weiss, die des Masters nimmt --nav_bgcolor.
	 *
	 *  KEIN opacity: 0 — das stand hier und hat die Navigation lahmgelegt.
	 *  site.css lädt NACH der nav.css des Plugins, und .aside{opacity:0} hat
	 *  dieselbe Spezifität wie .open{opacity:1} dort. Beim Klick sprang
	 *  visibility auf visible, opacity blieb auf 0 — die Überlagerung war
	 *  unsichtbar, lag aber mit z-index 2000 über der Seite und schluckte
	 *  jeden weiteren Klick, auch den aufs Logo.
	 *  Den Ausgangszustand (opacity 0, visibility hidden) setzt das Plugin.  */
	background: rgba(var(--white), 1);
}
.main-nav {   /* navi.css */
	text-align: center;
}
.main-nav .menu-item, .main-nav .menu-item:visited {   /* navi.css */
	font-family: var( --title-font );
	font-size: 3.5vh;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 3px;
	word-spacing: -4px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: rgba( var(--rgb_red), 1.0 )!important;
}
.main-nav .menu-item:active, .main-nav .menu-item:focus, .main-nav .menu-item:hover {   /* navi.css */
	color: var( --black )!important;
	background-color: transparent;
}
/*	Aktive Menuepunkte — 12.08.2026 zweifach korrigiert:
 *
 *	1. KINDSELEKTOR statt Nachfahre. Vorher stand hier
 *	   `li.current-menu-ancestor a` — das trifft JEDEN Link im Ast, also auch
 *	   saemtliche Untermenuepunkte. Auf /projekte/zusammen-lernen/ waren
 *	   deshalb alle fuenf Unterpunkte schwarz statt nur der aktive, und sie
 *	   erbten zusaetzlich das font-weight 500 des Elternpunkts. Der Fehler
 *	   stammt aus der alten navi.css und ist auch live so.
 *	2. --sitefgcolor statt --black. --black ist eine Master-Variable (und in
 *	   color-theme.css doppelt definiert: Z. 13 als Tripel, Z. 278 als Hex).
 *	   Die Site-Vordergrundfarbe ist #282828, nicht reines Schwarz.
 */
.main-nav .sub-menu li.current-menu-item > a, .main-nav .sub-menu li.current_page_item > a {   /* navi.css */
	font-weight: 700;
	color: var( --sitefgcolor )!important;
	background-color: transparent;
}
.main-nav li.current-menu-ancestor > a, .main-nav li.current-menu-parent > a {   /* navi.css */
	font-weight: 500;
	color: var( --sitefgcolor )!important;
}
.main-nav li.current-menu-item > a, .main-nav li.current_page_item > a {   /* navi.css */
	font-weight: 500;
	color: var( --sitefgcolor )!important;
	background-color: transparent;
}
.main-nav li.current-menu-item > a:hover, .main-nav li.current_page_item > a:hover {   /* navi.css */
	color: var( --sitefgcolor )!important;
}
.main-nav li:before {   /* navi.css */
	background-color: transparent;
	content: "";
}
.nav_brand img:hover {   /* navi.css */
	opacity: 0.8;
}
.ps-close-nav {   /* navi.css */
	background: transparent;
}
.ps-close-nav:after {   /* navi.css */
	content: "";
}
.ps-close-nav:before {   /* navi.css */
	content: "";
}
a.nav-expander {   /* navi.css */
	font-size: calc(var( --size-1 ) * 0.8 );
	font-weight: 300;
	text-decoration: none;
	text-transform: uppercase;
}
a.nav-expander .fa-solid {   /* navi.css */
	color: rgba(var(--rgb_red), 1);
}
a.nav-expander .fa-solid:hover {   /* navi.css */
	color: rgba(var(--rgb_redorange), 1);
}
a.nav-expander {   /* navi.css, war a.nav-expander-negativ */
	font-size: calc(var( --size-1 ) * 0.8 );
	font-weight: 300;
	text-decoration: none;
	text-transform: uppercase;
}
a.nav-expander .fa-solid {   /* navi.css, war a.nav-expander-negativ .fa-solid */
	color: rgba(var(--rgb_red), 1);
}
a.nav-expander .fa-solid:hover {   /* navi.css, war a.nav-expander-negativ .fa-solid:hover */
	color: rgba(var(--rgb_redorange), 1);
}

/* --- Logogrösse ---------------------------------------------------
 *
 * Bewusste Ausnahme vom Regelwerk „keine Geometrie in Teil B": Das
 * Plugin setzt --fontsize × 4, diese Site hatte immer × 6. Das ist die
 * Grösse des Logos selbst und nicht Teil des Abstandssystems, das der
 * Master verwaltet — hier droht also kein doppeltes Zählen.
 *
 * max-height/max-width: 100% und der Hover mit opacity: 0.8 sind in
 * Plugin und alter Site identisch und deshalb NICHT wiederholt.
 */

.nav_brand,
.nav_brand-home {
	width: calc( var( --fontsize ) * 6 );
}

/* --- Kopfzeile ohne Luft -------------------------------------------
 *
 * Das Plugin gibt dem .nav_wrapper oben --size-1 × 1.5 und unten × 1.25.
 * Diese Site hatte dort nie einen Abstand — das Logo sitzt bündig oben,
 * und der erste Block schliesst direkt an. Die alte navi.css setzte
 * überhaupt keine Abstände im Kopfbereich, auch .nav_brand hatte alle
 * vier Paddings ausdrücklich auf 0.
 */

.nav_wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- Kreuz der Überlagerung und Menübreite ---------------------------
 *
 * Das Plugin zeichnet das Schliesskreuz in WEISS — passend zu seiner
 * dunklen Überlagerung. Diese Site hat eine weisse: unsichtbar auf weiss.
 *
 * Die Breite: das Plugin nimmt width:max-content, die alte Site 90%. Reicht
 * der Platz für den längsten Menüpunkt nicht, klemmt max-content und die
 * Zeilen brechen um. Das ist eine ÜBERSCHREIBUNG des Layoutwertes, kein
 * Draufrechnen — dieselbe Begründung wie bei den Section-Rändern.
 */

.main-nav {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.ps-close-nav:before,
.ps-close-nav:after {
	border-top: 4px solid rgba( var( --rgb_red ), 1 );
}
.ps-close-nav:hover:before,
.ps-close-nav:hover:after {
	border-top: 4px solid rgba( var( --rgb_redorange ), 1 );
}

/* --- Feinstand des Schalters ----------------------------------------
 *
 * Gemessen bei 1280px: der Schalter sass 4px zu weit links und 3px zu hoch.
 *
 * Ursache ist ein Mechanikwechsel, kein Fehler. Das alte Theme positionierte
 * ihn absolut (right: --size-1 plus padding-right: 1em, macht zusammen rund
 * 35.6px Abstand zur Kante); das Plugin setzt ihn ins Raster und der Abstand
 * kommt aus dem padding-right von .nav-outer (--size-2, rund 39.5px).
 *
 * Statt die Rastermechanik zu überschreiben — die hält das Logo mittig —
 * nur die Differenz nachgeschoben. In --size-1-Einheiten, damit es bei
 * jeder Fensterbreite stimmt: 4px/19.76px = 0.2, 3px/19.76px = 0.15.
 */

.navitem_exp {
	position: relative;
	left: calc( var( --size-1 ) * 0.2 );
	top:  calc( var( --size-1 ) * 0.15 );
}

/* ==========================================================================
 * TEIL D — Abstände, die der Master gar nicht setzt
 *
 * NACHTRAG mit Lehre. Teil B übernimmt bewusst keine Abstände, damit das
 * Abstandssystem des Masters nicht doppelt gezählt wird. Diese Regel war zu
 * grob: Sie hat auch dort verworfen, wo der Master die Eigenschaft
 * ÜBERHAUPT NICHT setzt — dann ist es kein doppeltes Zählen, sondern ein
 * ersatzloser Verlust.
 *
 * Richtig ist: eine Abstandsangabe nur dann weglassen, wenn der Master
 * denselben Selektor MIT derselben Eigenschaft kennt.
 *
 * Aufgefallen an 7 px in der Blog-Seitenleiste: dem ul fehlte unten der
 * Abstand. Die Prüfung ergab 14 solche Stellen; drei davon sind hier
 * bewusst NICHT nachgetragen — a.nav-expander top/right und
 * .fa-solid margin-top waren die alte Absolut-Positionierung des Schalters,
 * die durch das Nachschieben im Raster ersetzt ist (siehe oben).
 * ========================================================================== */

ul {
	margin-bottom: calc( var( --size-1 ) * 0.6 );
}
ul.base {
	margin-bottom: calc( var( --size-1 ) * 0.75 );
}

.blogsingle--content h1 {
	margin-bottom: calc( var( --size-1 ) * 0.45 );
}
.blogsingle--content h2 {
	margin-bottom: calc( var( --size-1 ) * 0.4 );
}

dl.base_wide dt,
dl.base_time dt,
dl.base dt {
	padding-right: calc( var( --size-1 ) * 1 );
	margin-right: 0px;
	margin-bottom: calc( var( --size-1 ) * 0.5 );
}

.scroll-up {
	width: 50px;
	height: 50px;
}

.nav_brand {
	padding-top: 0px;
	padding-bottom: 0px;
}

/*  ol schliesst unten wie ul ab — im Master fehlt der Wert ganz.  */
ol {
	margin-bottom: calc( var( --size-1 ) * 0.6 );
}

/* ==========================================================================
 * TEIL E — Werte, die BEIDE setzen, aber verschieden
 *
 * Die dritte Kategorie, die in meinem Abgleich zunächst fehlte. Teil A fragt
 * „kennt der Master den Selektor nicht?", Teil D „setzt er die Eigenschaft
 * gar nicht?" — beide finden nichts, wenn der Master denselben Selektor mit
 * derselben Eigenschaft kennt und nur einen ANDEREN Wert hat.
 *
 * Genau daher kam der wachsende Versatz nach unten: Der Master ist
 * durchgängig grosszügiger. Die Abweichungen summieren sich über die Seite —
 * 7 px auf Blogseiten, 14 px auf impressum-datenschutz und kontakt.
 *
 * Von 46 gefundenen Unterschieden waren 16 SCHEINBAR: der Master schreibt
 * var(--size-1) wo das alte Theme var(--fontsize) schreibt. Beide sind
 * wertgleich (--size-1 ist als --fontsize × 1 definiert). Die sind hier
 * bewusst NICHT aufgeführt.
 * ========================================================================== */

/* --- Seitenränder: bestimmen die Textbreite und damit den Umbruch --- */
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 );
	}
}

/* --- Überschriften: je Vorkommen wenige Pixel, in Summe der Versatz --- */
h3, .h3 { margin-bottom: calc( var( --size-1 ) * 0.5 ); }
h4, .h4 { margin-bottom: calc( var( --size-1 ) * 0.4 ); }
h5, .h5 { margin-bottom: calc( var( --size-1 ) * 0.5 ); }
h6, .h6 { margin-bottom: calc( var( --size-1 ) * 0.3 ); }

/* --- Absatz gefolgt von Liste --- */
p ~ ul,
p ~ ol {
	margin-top: calc( var( --size-1 ) * -0.3 );
}
ol {
	margin-bottom: calc( var( --size-1 ) * 0.6 );
}

/* --- Fliesstext-Varianten --- */
.lead {
	font-size: calc( var( --size-1 ) * 1.1 );
	line-height: calc( var( --lineheight ) * 1.15 );
}
.small {
	line-height: calc( var( --size-1 ) * 1.2 );
}

/* --- Footer und Copyright --- */
@media (min-width: 768px) {
	#footer    { font-size: calc( var( --size-1 ) * 1 ); }
	#copyright {
		font-size: calc( var( --size-1 ) * 0.8 );
		padding-top: calc( var( --size-1 ) * 0.35 );
		padding-bottom: calc( var( --size-1 ) * 0.35 );
	}
}

/* --- Aufzählungspunkte: der Master rechnet in px/rem, diese Site relativ --- */
ul li:before {
	width: calc( var( --size-1 ) * 0.4 );
	height: calc( var( --size-1 ) * 0.4 );
	margin-right: calc( var( --size-1 ) * 0.5 );
	margin-bottom: calc( var( --size-1 ) * 0.16 );
	margin-left: calc( var( --size-1 ) * -0.7 );
}
@media (min-width: 768px) {
	ul li:before {
		margin-left: calc( var( --size-1 ) * -0.75 );
	}
}

/* --- Definitionsliste mit Bild links --- */
dl.image_left dt {
	padding-bottom: calc( var( --size-1 ) * 2 );
}

/* ==========================================================================
 * TEIL F — Lightbox in Weiss
 *
 * gula-lightbox liefert eine dunkle Überlagerung (rgba(15,15,18,0.92)) und
 * stellt dafür vier Variablen bereit. Diese Site will Weiss — passend zur
 * ebenfalls weissen Navigations-Überlagerung in TEIL C.
 *
 * WICHTIG: Der Hintergrund allein reicht nicht. Bildunterschrift, Schliess-
 * kreuz und die beiden Pfeile sind im Plugin WEISS — auf weissem Grund also
 * unsichtbar. Alle vier Variablen gehören zusammen umgestellt.
 *
 * Die Farben kommen aus den Hausvariablen, nicht aus festen Werten:
 * --white als Tripel, --sitefgcolor_rgb ist 40,40,40 (#282828). Reines
 * Schwarz wäre falsch, die Site benutzt es nirgends.
 *
 * VOLL DECKEND, nicht 0.96. Am 15.08.2026 beides auf der Live-Seite
 * ausprobiert: Bei 0.96 bleiben die rote Überschrift und der Fliesstext der
 * Seite gut lesbar und ziehen den Blick vom Bild weg. Das funktioniert bei
 * der dunklen Master-Variante, weil Dunkel den hellen Seitengrund schluckt —
 * auf Weiss schimmert dunkler Text durch. Volles Weiss stellt das Bild frei.
 *
 * Nur diese Site. Die anderen guladev-Sites behalten die dunkle Variante —
 * die Umstellung im Plugin selbst würde alle treffen.
 * ========================================================================== */

.gula-lb {
	--gula-lb-bg:      rgba( var( --white ), 1 );
	--gula-lb-fg:      rgba( var( --sitefgcolor_rgb ), 1 );
	--gula-lb-btn:     rgba( var( --sitefgcolor_rgb ), 0.7 );
	--gula-lb-btn-hov: rgba( var( --rgb_red ), 1 );
}

/*	Der Schlagschatten des Plugins ist für dunklen Grund gerechnet (schwarz
	mit 0.5) und wirkt auf Weiss wie ein Balken. Dasselbe gilt für die
	Platzhalterfläche, die während des Ladens sichtbar ist.	*/
.gula-lb__img {
	box-shadow: 0 6px 28px rgba( var( --sitefgcolor_rgb ), 0.18 );
	background: rgba( var( --sitefgcolor_rgb ), 0.06 );
}