/**
 * site.css  --  Singkreis Hittnau auf Gula 5
 *
 * Nur, was diese Site anders braucht als der Master. Ermittelt beim Umzug
 * von "skhittnau" (gula-setup, 2022) auf gula5 am gerenderten Ergebnis,
 * nicht aus der alten style.css abgeschrieben.
 *
 * Bewusst NICHT hier, weil gula5 es so will (gemessen, dem Nutzer gezeigt):
 *   - unter 768 px halbiert gula5 auch die mtop- und mbot-Klassen (skhittnau
 *     nur ptop und pbot). Am Handy 2-37 px weniger Luft je Seite. Entscheid des
 *     Nutzers 17.10.2026 nach Bildvergleich bei 390 px: gula5 behalten.
 *   - Formularfelder in der Hausschrift, Rechnen mit border-box.
 *   - Absaetze, die nur einen Shortcode enthalten, packt gula5 aus.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */


/*
 * SCHRIFT: Merriweather Sans (Dateien: webfonts/merriweather-sans/,
 * eingebunden in functions.php).
 */
:root {
	--font-family-sans: "Merriweather Sans", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}


/*
 * FARBEN. Vorder-/Hintergrund, Links und Titel stehen in den Theme Options
 * (Reiter Farben), nicht hier: #283747 Schrift, #b8bbbe Grund, Link
 * #283747, ueberfahren #941680.
 *
 * Hier nur das alte Farbvokabular von skhittnau (library/grid/root.css),
 * soweit die Site-Plugins es noch benutzen -- gemessen am 17.10.2026 im
 * Browser: alle var(--x) der geladenen Stylesheets gegen die definierten.
 * Ohne diese Zeilen fielen die Deklarationen lautlos aus (Downloads-Liste,
 * Aktuell, Links, Rueckblick). Alle als RGB-TRIPEL, denn sie werden durchweg
 * als rgba( var(--x), a ) gelesen -- eine fertige Farbe dort waere ungueltig.
 *
 * Bewusst NICHT nachdefiniert: --maincolor-2, --maincolor-3, --maincolor-bg,
 * --ahpviolett, --rem, --font-semibold. Die waren schon im alten Theme im
 * Frontend undefiniert (maincolor-* nur in Admin-Stylesheets); sie jetzt zu
 * setzen waere eine Farbaenderung, keine Reparatur.
 */
:root {
	--sitecolor:     40, 55, 71;
	--redviolett:    148, 22, 128;
	--yelloworange:  253, 195, 0;
	--grey:          33, 33, 33;
	--red:           227, 0, 11;
	--deepgreen-50:  #30a170;
	--deepgreen-300: #1f7e62;
}


/*
 * GRUNDMASSE wie bisher -- gemessen am 17.10.2026 bei 1390 px Fenster:
 *
 *   Schrift   alt 20,41 px, gula5 17,85 px   -> skhittnau rechnete bis 24 px
 *             (gula5 bis 20 px). Ein Wert, und alle Groessen stimmen wieder:
 *             Titel, Abstaende (--size-*) und Zeilenhoehen haengen daran.
 *   Zeile     alt 1,5 x Schrift, gula5 1,6
 *   Titel     alt Gewicht 600, gula5 500
 */
:root {
	--fontsize:    calc(14px + (24 - 14) * ((100vw - 300px) / (2000 - 300)));
	--lineheight:  calc( var( --fontsize ) * 1.5 );
	--titleweight: 600;
}


/*
 * SEITENRAND der Bloecke wie bisher: 1 / 2,5 / 5 Schriftgroessen (ab 576
 * bzw. 768 px). skhittnau setzte das an .mainwrapper, gula5 an <section>
 * mit 2 / 4 / 8 -- gemessen bei 1390 px: Titel bei x = 102 (alt) gegen
 * 163 (gula5), Inhaltsbreite 1186 gegen 1063.
 */
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 );
	}
}


/*
 * NAVIGATION -- gula-nav-logocenter so eingestellt, dass sie aussieht wie
 * die alte Theme-Navi (skhittnau/library/navigation/navi.css):
 *
 *   - Leiste transparent (das Hintergrundbild der Seite laeuft durch)
 *   - Logo 8 Schriftgroessen breit, Polster 1,5 oben / 0,7 unten, im Raster
 *     56 % / 44 % rechtsbuendig in der ersten Spalte -- sitzt damit nicht
 *     exakt in der Mitte, sondern wie bisher (bei 1390 px: x 603 bis 766)
 *   - Burger #545454, beim Ueberfahren #e29e0c, oben statt mittig
 *   - Rand wie die Bloecke (1 / 2,5 / 5)
 *
 * (Bis 17.10.2026 stand hier ein Ersatz fuer .nav_brand-home img -- im
 * Plugin fehlte das " img" im Selektor. Im Master behoben, be935a4.)
 */
:root {
	--nav-bg:   transparent;
	--nav-icon: #545454;
}
.nav-outer {
	padding-left:  var( --size-1 );
	padding-right: var( --size-1 );
}
@media (min-width: 576px) {
	.nav-outer {
		padding-left:  var( --size-25 );
		padding-right: var( --size-25 );
	}
}
@media (min-width: 768px) {
	.nav-outer {
		padding-left:  var( --size-5 );
		padding-right: var( --size-5 );
	}
}
.nav_wrapper {
	grid-template-columns: 56% 44%;
	grid-template-areas: 'logo expander';
	align-items: stretch;
	padding-top: 0;
	padding-bottom: 0;
}
.navitem_logo {
	justify-self: end;
}
.navitem_exp {
	align-self: start;
}
.nav_brand,
.nav_brand-home {
	width: calc( var( --fontsize ) * 8 );
	padding-top: calc( var( --size-1 ) * 1.5 );
	padding-bottom: calc( var( --size-1 ) * 0.7 );
}
a.nav-expander {
	font-weight: 400;
	padding-top: calc( var( --size-1 ) * 0.8 );
	padding-right: 1.0em;
	padding-left: 1.0em;
	padding-bottom: 0.5em;
}
a.nav-expander .fa-solid {
	margin-top: var( --size-2 );
}
a.nav-expander .fa-solid:hover {
	color: #e29e0c;
	opacity: 1;
}

/*
 * Die Menue-Ueberlagerung: Eintraege 3,5 vh gross in der Seitenfarbe, der
 * aktuelle weiss (Gewicht 300 wie die anderen), keine Trennlinien, Liste in
 * 85 vh zentriert. Schliessen-Kreuz wie bisher im Fluss oben rechts statt
 * absolut gesetzt, beim Ueberfahren #e29e0c.
 */
:root {
	--nav-fg:         #283747;
	--nav-fg-hover:   rgba( 255, 255, 255, 0.9 );
	--nav-fg-current: #ffffff;
	--nav-line:       transparent;
}
.main-nav {
	height: 85vh;
	width: 90%;
}
.main-nav .menu-item,
.main-nav .menu-item:visited {
	font-size: 3.5vh;
	line-height: 1.5;
}
.main-nav .menu-item a {
	padding-left: 0;
	padding-right: 0;
}
.main-nav li {
	border-bottom: 0 !important;   /* Plugin: 1px (unsichtbar, aber hoch) mit !important */
}
.main-nav li.current-menu-item a,
.main-nav li.current_page_item a {
	font-weight: 300;
}
.ps-close-nav {
	position: relative;
	top: 0;
	right: 0;
	margin-top: 40px;
	margin-right: 13px;
}
.ps-close-nav:hover:before,
.ps-close-nav:hover:after {
	border-top-color: #e29e0c;
}


/*
 * LINKS OHNE UNTERSTREICHUNG -- gula5 unterstreicht punktiert, skhittnau
 * nicht (a, a:visited { text-decoration: none }). Betraf jeden Link im Text.
 */
a,
a:visited {
	text-decoration: none;
}


/*
 * FUSS in voller Schriftgroesse (gula5: 0,8) und Gewicht 300, Spalten 2-4
 * mit halbem Abstand darunter -- wie skhittnau/style.css. Gemessen: jeder
 * Fuss-Absatz 20,4 statt 16,3 px, das machte jede Seite 30-80 px kuerzer.
 */
#footer {
	font-size: calc( var( --fontsize ) * 1 );
	font-weight: 300;
}
#footer .S02,
#footer .S03,
#footer .S04 {
	margin-bottom: var( --size-05 );
}


/*
 * COPYRIGHT-LEISTE mit halber Schriftgroesse Polster (gula5: ein Viertel).
 * Farben weiss auf #233448 stehen in den Theme Options (Reiter Farben).
 */
#copyright {
	padding-top:    calc( var( --fontsize ) * 0.5 );
	padding-bottom: calc( var( --fontsize ) * 0.5 );
}


/*
 * AKTUELL-KACHELN: das runde Bild steht mit einer Schriftgroesse Rand links
 * und rechts in der Spalte (skh-aktuell/skhaktuell.css). gula5 gibt jedem
 * .module width: 100% -- zusammen mit dem Rand lief das Bild 41 px ueber
 * die Spalte hinaus und wurde groesser (368 statt 327 px bei 1390). Die
 * alte Breite war "auto".
 */
.module.skhaktuellbild {
	width: auto;
}


/*
 * .small als Textgroesse (0,85) -- gula5 kennt die Klasse nur fuer Listen.
 * Steht im Inhalt z. B. unter der Festschrift auf /verein/.
 */
.small {
	font-size:     calc( var( --fontsize ) * 0.85 );
	line-height:   calc( var( --fontsize ) * 1.1 );
	margin-bottom: calc( var( --fontsize ) * 0.65 );
}


/*
 * DEFINITIONSLISTEN dl.base / dl.base_wide (Vorstand auf /verein/) wie in
 * skhittnau: dl.base stapelt schon unter 1200 px (gula5 erst unter 576),
 * und gestapelt steht unter jedem Eintrag 1,5 Zeilen Luft (gula5 0,5).
 * Gemessen bei 390 px: /verein/ war 525 px kuerzer.
 */
@media (max-width: 1199px) {
	dl.base,
	dl.base_no_line {
		grid-template-columns: 1fr;
	}
	dl.base dt {
		grid-column-start: 1;
		border-bottom: 0;
		margin-bottom: calc( var( --fontsize ) * 0.1 );
	}
	dl.base dd {
		grid-column-start: 1;
		margin-bottom: calc( var( --fontsize ) * 1.5 );
	}
}
@media (max-width: 575.98px) {
	dl.base_wide dd {
		margin-bottom: calc( var( --fontsize ) * 1.5 );
	}
}


/*
 * LISTEN wie bisher: Abstand unter der ganzen Liste (0,65), keiner zwischen
 * den Eintraegen (gula5: 0,2 je Eintrag), Aufzaehlungspunkt WEISS (gula5:
 * Titelfarbe, hier also dunkel). Gemessen auf /chor/ und /verein/: jeder
 * Eintrag 4 px tiefer, die Seiten 20-65 px laenger.
 */
ul,
ol {
	margin-bottom: calc( var( --fontsize ) * 0.65 );
}
ul li,
ol li {
	margin-bottom: 0;
}
ul li::before {
	background-color: #ffffff;
}


/*
 * NACH-OBEN-KNOPF wie bisher: 50 px auch am Handy (gula-smoothscroll heute:
 * 35 px), dunkel #1C1C1C statt der Grundfarbe -- auf dem hellgrauen Grund
 * dieser Site waere ein Knopf in #b8bbbe kaum zu sehen. Pfeil 20 px.
 */
.scroll-up {
	width: 50px;
	height: 50px;
	background-color: #1C1C1C;
}
.scroll-up .triangle {
	top: 50%;
	width: 20px;
	height: 20px;
}


/*
 * ZURUECK-LINK: der Pfeil in voller Schriftgroesse ohne eigenen Abstand,
 * wie bisher -- die Luecke machen die zwei &nbsp; im Markup (functions.php).
 * gula5 (css/sc.backlink.css) verkleinert ihn auf 0,8 und rueckt ihn ab;
 * jenes Blatt laedt NACH dieser Datei, darum ein Element mehr im Selektor.
 */
.gula-backlink a i {
	top: 0;
	font-size: inherit;
	margin-right: 0;
}


/*
 * GALERIE-UNTERSCHRIFT: Die Master-Fassung von gula-sc-inlinemedia setzt den
 * Bildtext als <p> in span.im-caption (alt: blosser Text). Der Absatz brachte
 * 0,65 Schriftgroessen Abstand mit -- /chor/ (Plakate) 26 px laenger.
 */
.im-caption p {
	margin: 0;
}


/*
 * LIGHTBOX. Der Hintergrund steht in den Theme Options (Farben > Plugins >
 * "Lightbox, Hintergrund", seit gula-lightbox 1.3.0) -- auf dieser Site
 * #c2c4c5, der sichtbare Seitengrund (rgba(134,137,140,0.5) ueber Weiss, am
 * Bild gemessen). Wunsch des Nutzers 17.10.2026: deckend, so hell wie die
 * Seite, dunkle Knoepfe. Bis dahin stand die Farbe fest hier.
 *
 * Dunkel schaltet das Plugin auf hellem Grund selbst (.gula-lb--hell). Hier
 * nur der Ton dafuer: die Seitenfarbe statt des Plugin-Schwarz. Gebunden an
 * --hell, damit ein dunkler Grund in den Optionen weiter weisse Knoepfe hat.
 *
 * FancyBox (gula-lightbox4) folgt demselben Feld; ohne Wert bleibt es bei
 * seiner Vorgabe --sitebgcolor.
 */
html .gula-lb.gula-lb--hell {
	--gula-lb-fg:      #283747;
	--gula-lb-btn:     rgba( 40, 55, 71, 0.7 );
	--gula-lb-btn-hov: #283747;
}
.fancybox__backdrop {
	background: var( --lightbox-bg, var( --sitebgcolor ) );
}


/*
 * MITGLIEDER-LOGIN (Fuss): Checkbox "Angemeldet bleiben" in Schriftgroesse.
 * Bis 17.10.2026 stand sie in der Browser-Vorgabe (13 x 13 px) neben 20 px
 * Text -- auch im alten Theme schon. Auf Wunsch des Nutzers vergroessert;
 * das ist eine bewusste Aenderung, kein Umzugsrest. Ausrichtung so, dass
 * die Mitte des Kastens auf der Mitte der Kleinbuchstaben sitzt.
 */
.members-login-form input[type="checkbox"] {
	font-size: var( --fontsize );
	width: 1em;
	height: 1em;
	margin: 0 0.3em 0 0;
	vertical-align: -0.15em;
}


/*
 * <strong> mit 0,01 em Laufweite wie bisher. Gewicht 700 ist in beiden
 * Themes gleich.
 */
strong {
	letter-spacing: 0.01em;
}


/*
 * BUTTONS: weisse Schrift und weisser Rand auf transparentem Grund, beim
 * Ueberfahren Schrift in der Seitenfarbe auf 35 % Weiss.
 *
 * Alt stand das in der Plugin-Kopie gula-sc-buttons/buttons-custom.css --
 * site-eigen, beim Nachzug auf den Master waere es verloren gegangen.
 *
 * Die Variablen sitzen am Element, nicht an :root: gula-sc-buttons laedt
 * sein Stylesheet erst, wenn ein Button-Shortcode rendert, also im Fuss --
 * NACH dieser Datei. Ein :root-Wert hier wuerde von dessen :root
 * ueberschrieben; am Element gewinnt er.
 */
.btn-theme {
	--theme_fg:           #ffffff;
	--theme_bg:           transparent;
	--theme_border:       #ffffff;
	--theme_hover_fg:     #283747;
	--theme_hover_bg:     rgba( 255, 255, 255, 0.35 );
	--theme_hover_border: #ffffff;
}


/*
 * GROSSER SEITENTITEL .titel-extralarge -- 969 Verwendungen (die <h1> der
 * Seiten: "Chor", "Kontakt" ...). Stand in skhittnau/style.css, gula5 kennt
 * die Klasse nicht. Werte unveraendert.
 */
.titel-extralarge {
	font-size:      calc( var( --fontsize ) * 2.6 );
	line-height:    calc( var( --fontsize ) * 2.8 );
	margin-bottom:  calc( var( --fontsize ) * 0.5 );
	letter-spacing: 0rem;
	word-spacing:   -0.25rem;
}


/* ===========================================================================
 * AUS skhittnau/style-child.css -- die Site-Datei des alten Themes, hier
 * unveraendert eingefuegt: Blaettern in Aktuell/Rueckblick, Kontaktformular,
 * Passwortformular. --font-regular und --fontweight waren schon im alten
 * Theme undefiniert und bleiben es (die Angaben erben, wie bisher).
 * ======================================================================== */

/* --------------------------------------------------- */
/*  Aktuell/Mitglieder Seitennavigation */
/* --------------------------------------------------- */
.wp-prev-next {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var( --size-1 );
}
.next-link a,
.prev-link a {
	border: 1px solid rgba(var(--redviolett), 1.0);
	color: rgba(var(--redviolett), 1.0);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	padding: calc( var( --fontsize ) * 0.35 ) calc( var( --fontsize ) * 0.7 );
	font-size: calc( var( --fontsize ) * 1.075 );
	line-height: 1.5;
	border-radius: .3rem;
	cursor: pointer;
	transition: all .2s ease-in-out;
}
.next-link a:hover,
.prev-link a:hover {
	border: 1px solid rgba(var(--white), 1.0);
	color: rgba(var(--sitecolor), 1.0);
	transition: all .2s ease-in-out;
}

.next-link {
	margin-right: auto;
}
.next-link .fa {
	margin-right: var( --size-05 );
}
.next-link a:hover .fa,
.prev-link a:hover .fa {
	color: rgba(var(--white), 1.0);
}

.prev-link{
	margin-left: auto;
}
.prev-link .fa {
	margin-left: var( --size-05 );
}


.page-pagination {
	text-align: center;
	height: calc( var( --fontsize ) * 2 );
}
.page-pagination a.page-numbers:hover {
    background: none;
    margin-top: -15px;
	font-size: calc( var( --fontsize ) * 2);
	color: rgba(var(--redviolett), 1.0);
}
.page-pagination span.page-numbers.current {
	display: inline-block;
	width: calc( var( --fontsize ) * 2 );
	margin-top: -15px;
	font-size: calc( var( --fontsize ) * 2);
	font-weight: 500;
	color: rgba(var(--white), 1.0);
}
.page-pagination a.page-numbers {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;
	width: calc( var( --fontsize ) * 2 );
	font-size: calc( var( --fontsize ) * 1.5);
	font-weight: 500;
	color: #000;
	text-decoration: none;
	-webkit-transition: all 0.3s;  
	-moz-transition: all 0.3s; 
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s; 
	transition: all 0.3s;
}
.page-pagination a.prev.page-numbers {
	margin-right: calc( var( --fontsize ) * 1 );
	color: rgba(var(--white), 1.0);
}
.page-pagination a.next.page-numbers {
	margin-left: calc( var( --fontsize ) * 1 );
	color: rgba(var(--white), 1.0);
}
.page-pagination a.prev.page-numbers:hover,
.page-pagination a.next.page-numbers:hover {
	color: rgba(var(--redviolett), 1.0);
}


/* --------------------------------------------------- */
/*  Kontaktformulare */
/* --------------------------------------------------- */

.wpcf7-quiz-label {
	font-size: var( --size-1 );
}

.wpcf7 p input[type="submit"] {
	margin-top: 15px;
}

/* ---| Kontaktformular Platzhaltertext |-------------------------- */

.wpcf7 .placeholder,
::placeholder {
	font-family: var( --font-regular );
	font-weight: var( --fontweight );
    color: rgba(var(--sitecolor), 0.6)!important;
}
::-webkit-input-placeholder {
	font-family: var( --font-regular );
	font-weight: var( --fontweight );
    color: rgba(var(--sitecolor), 0.6)!important;
}
:-moz-placeholder {
	font-family: var( --font-regular );
	font-weight: var( --fontweight );
    color: rgba(var(--sitecolor), 0.6)!important;
}
::-moz-placeholder {
	font-family: var( --font-regular );
	font-weight: var( --fontweight );
    color: rgba(var(--sitecolor), 0.6)!important;
}
:-ms-input-placeholder {
    color: black !important;
	font-family: var( --font-regular );
	font-weight: var( --fontweight );
}

textarea {
    background-color: rgba(var(--white), 0.3);
	border: none;
	border-bottom: 1px solid #fff;
	width: 100%;
	height: var( --size-5 );
	padding-top: var( --size-025 );
	padding-left: var( --size-025 );
	padding-bottom: var( --size-025 );
	font-size: var( --size-1 );
}
input[type=email],
input[type=text],
input[type=password] {
    background-color: rgba(var(--white), 0.3);
	border: none;
	border-bottom: 1px solid #fff;
	width: 100%;
	padding-top: var( --size-025 );
	padding-left: var( --size-025 );
	padding-bottom: var( --size-025 );
	font-size: var( --size-1 );
}

.members-login-form input[type=text],
.members-login-form input[type=password] {
    background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	width: 100%;
	padding-top: var( --size-025 );
	padding-left: var( --size-025 );
	padding-bottom: var( --size-025 );
	font-size: var( --size-1 );
}

textarea:focus,
input[type=email]:focus,
input[type=text]:focus,
input[type=password]:focus {
    background-color: rgba(var(--white), 0.6);
}
input[type=submit] {
	background-color: transparent;
	border: none;
	border: 1px solid #fff;
	border-radius: var( --size-025 );
	padding: var( --size-05 );
	font-size: var( --size-1 );
	cursor: pointer;
}
input[type=submit]:hover {
	background-color: rgba(var(--white), 0.3);
	border: none;
	border: 1px solid #fff;
	border-radius: var( --size-025 );
	padding: var( --size-05 );
	font-size: var( --size-1 );
	cursor: pointer;
}



.post-password-form input[type="password"] {
    font-size: var( --fontsize );
    color: rgba(var(--white), 1.0);
	border: none;
    background-color: rgba(var(--grey), 0.4);
	height: calc( var( --fontsize ) * 2 )!important;
	margin-top: calc( var( --fontsize ) * 0.5 );
	padding-top: 0px;
    padding-left: calc( var( --fontsize ) * 0.5 );
    padding-right: calc( var( --fontsize ) * 0.5 );
    border-radius: 5px;
}
.post-password-form input[type="submit"] {
    font-size: var( --fontsize );
    color: rgba(var(--white), 1.0);
	border: none;
	background-color: rgba(var(--redviolett), 0.6);
	height: calc( var( --fontsize ) * 2 )!important;
	margin-top: calc( var( --fontsize ) * 0.5 );
    padding-left: calc( var( --fontsize ) * 0.5 );
    padding-right: calc( var( --fontsize ) * 0.5 );
    border-radius: 5px;
}
.post-password-form input[type="submit"]:hover {
    color: rgba(var(--white), 1.0);
	border: none;
	background-color: rgba(var(--redviolett), 1);
}
.post-password-form h6 {
	line-height: 1.3;
}
.post-password-form p {
	line-height: 1.3;
}