/**
 * site.css — Nepal Swiss auf gula5 (Kind-Theme nes-g5)
 *
 * Herkunft: library/gula-custom/css/site.css des Vorgaengers nepalswiss
 * (12.08.2026 aus dem Regelabgleich der alten Site entstanden, Teile A–F
 * unten unveraendert), dazu oben die site-eigenen Farben aus dessen
 * color-theme.css. Umzug auf gula5 am 19.10.2026.
 *
 * WAS NICHT MEHR HIER STEHT:
 *  - Die Hausschriften: eigenes Handle nesg5-fonts (functions.php), kein
 *    @import mehr.
 *  - Die Farben, fuer die gula5 ein Palettenfeld hat: Theme Options,
 *    Reiter Farben (Vordergrund #282828, Hintergrund #ffffff, Link
 *    ueberfahren / Titel / Markierung #e6000b, Tabelle #233448). Dort aendert
 *    sie die Redaktion; ein zweiter Wert hier wuerde das Feld verdecken.
 *
 * WIRD NACH gula5 GELADEN (Handle g5-site, haengt an gula-style).
 *
 * Document & Code @copyright by SteckDesign
 * Änderungen durch Dritte sind nicht erlaubt.
 */


/* ==========================================================================
 * TEIL 00 — Hausfarben, die gula5 nicht kennt
 *
 * Aus nepalswiss/library/gula-custom/css/color-theme.css. Quelle der Werte
 * war das alte Theme (library/grid/root.css Z. 60–75 und color-custom.css).
 *
 * TRIPEL, keine Farben: --rgb_red, --rgb_redorange, --rgb_darkgrey, --red,
 * --redviolett, --site-bgcolor. Sie werden als rgba( var(--x), a )
 * eingesetzt -- eine fertige Farbe dort waere ungueltig und fiele still weg.
 * ========================================================================== */

:root {
	--rgb_red:        230, 0, 11;     /* Hausfarbe */
	--rgb_redorange:  234, 89, 1;     /* Hover (Hamburger, Kreuz der Ueberlagerung) */
	--rgb_darkgrey:   40, 40, 40;
	--redviolett:     148, 22, 128;   /* Footer-Links, .redviolett */
	--red:            227, 0, 11;     /* .red -- u. a. der Footer-Titel */
	--red-400:        #e72630;        /* nes-cpt-slider, Button-Hover */
	--red-600:        #d2020b;
	--site-bgcolor:   255, 255, 255;  /* Body-Hintergrund */

	/*  --sitecolor: alter Themename, von den Regeln unten 11-mal benutzt.
	 *  gula5 laesst ihn bewusst undefiniert (README, Entscheid 5) -- auf
	 *  DIESER Site war er definiert, also bleibt er hier.                  */
	--sitecolor:      var( --rgb_darkgrey );

	/*  Kein Palettenfeld mehr in gula5 (nur drei Navis lesen sie).  */
	--nav_linkcurrent_color: rgba( var( --rgb_red ), 1.0 );
}

/*  Standen im Farbabschnitt von guladevs root.css und griffen nur hier, weil
 *  --red und --redviolett auf dieser Site Tripel sind.  */
.red            { color: rgba( var(--red), 1.0 ); }
.bg-red         { background-color: rgba( var(--red), 1.0 ); }
.redviolett     { color: rgba( var(--redviolett), 1.0 ); }
.bg-redviolett  { background-color: rgba( var(--redviolett), 1.0 ); }


/* ==========================================================================
 * 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 ---------------------------------------- */

/*	Die zwei Farbangaben sind hier entfallen -- sie stehen jetzt in den Theme
	Options, Reiter Farben (copyright_fgcolor #ffffff, copyright_bgcolor
	#e6000b) und kommen ueber --opt-copyright-* in der #copyright-Regel des
	Themes an. Werte 1:1 uebernommen: --white war 255,255,255 und
	--copyright_bg 230, 0, 11, beide mit Alpha 1.0.

	ABSICHTLICHE AENDERUNG dabei: die Angaben standen in dieser
	@media-Regel, waren also nur ab 768px wirksam -- unter 768px war der
	Streifen durchsichtig mit dunkler Schrift (gemessen bei 375px:
	rgb(40,40,40) auf rgba(0,0,0,0)). Die Regel des Themes steht in keiner
	Media-Query, der Streifen ist jetzt auf JEDER Breite weiss auf rot.
	So gewuenscht.

	Die drei uebrigen Angaben bleiben: die Schriftgroesse rechnet hier
	relativ (--fontsize) und weicht vom Master ab (--size-1).	*/
@media (min-width: 768px) {
#copyright {   /* style.css */
	font-size: calc( var( --fontsize ) * 0.8 );
	text-align: center;
	letter-spacing: 0px;
}
}
@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 */
	/*	02.09.2026: color entfallen -- steht jetzt in den Theme Options,
		Feld "Navigation, Schrift" (farbe_nav_fg = #e6000b), und kommt ueber
		--nav-fg aus theme-nav-logocenter.	*/
	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.
	 *
	 *  02.09.2026: die background-Zeile ist entfallen -- Feld "Menue, Flaeche"
	 *  (farbe_nav_menu_bg = #ffffff), ueber --nav-menu-bg. Wertgleich zum
	 *  Rueckfall des Plugins (--nav_bgcolor ist hier ebenfalls weiss), aber
	 *  sie hat das neue Feld blockiert.  */
}
.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 */
	/*	02.09.2026: color entfallen -- Feld "Navigation, aktuelle Seite"
		(farbe_nav_fg_current = #282828, der Wert von --sitefgcolor).	*/
	font-weight: 500;
	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;
}
/*	02.09.2026: entfallen -- Feld "Menuezeichen" (farbe_nav_icon = #e6000b),
	ueber --nav-icon. Dieselbe Regel stand hier ZWEIMAL, einmal als
	"war a.nav-expander-negativ .fa-solid"; beide sind weg. Die
	:hover-Varianten mit --rgb_redorange bleiben.	*/
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: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 );
}

/*  19.10.2026, Umzug auf gula5: .small und .titel-big kennt gula5 gar nicht
 *  -- sie standen in guladevs style.css, nicht in root.css (dieselbe Luecke
 *  wie frueher .lead). Schrift und Zeilenhoehe setzt Teil B oben; verloren
 *  ging nur der Abstand darunter. Gemessen: .small (IBAN-Zeile im Footer,
 *  jede Seite) 13,3 -> 0 px, h1.titel-big (Startseite) 30,7 -> 9,2 px.
 *  Werte aus guladev/style.css Z. 101 und 185.  */
.small {
	margin-bottom: calc( var( --size-1 ) * 0.65 );
}
.titel-big {
	margin-bottom: calc( var( --size-1 ) * 1.5 );
}

/* ==========================================================================
 * 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 );
}