/**
 * site.css  --  Alexandra Steck auf Gula 5
 *
 * Nur, was diese Site anders braucht als der Master. Ermittelt beim Umzug
 * von "gula" (GULADEV PS-27, 2018, Bootstrap 4) auf gula5 am 22.10.2026,
 * am gerenderten Ergebnis gemessen (alexandra26alt gegen alexandra26,
 * 1390 und 390 px), nicht aus der alten style.php abgeschrieben.
 *
 * Farben (Grund #262626, Schrift/Links/Titel #d8d8d8, Navi) stehen in den
 * Theme Options, nicht hier.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */


/*
 * SCHRIFT: Montserrat (Text), Bebas Neue (Titel) -- eingebunden in
 * functions.php. Grundmasse wie bisher: 18 px, darunter 576 px 13,6 px
 * (gula5 fliessend 14 bis 20 px), Zeile 1,5, Gewicht 400 fuer Text und
 * Titel.
 *
 * Zeilenhoehe am <body> OHNE Einheit: die alte Site vererbte 1,5, gula5
 * vererbt einen Pixelwert. Mit Pixelwert bekaeme jede kleinere Schrift
 * (Quellenangabe unter den Videos, Formular) die Zeilenhoehe des Textes.
 */
:root {
	--font-family-sans: "Montserrat", Helvetica, Arial, "Lucida Grande", sans-serif;
	--title-font:       "Bebas Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	--fontsize:         13.6px;
	--lineheight:       calc( var( --fontsize ) * 1.5 );
	--bodyweight:       400;
	--titleweight:      400;
}
@media (min-width: 576px) {
	:root { --fontsize: 18px; }
}
body {
	line-height: 1.5;
}


/*
 * BREITEN wie bisher: die Container von Bootstrap 4 (plus 1378 px ab
 * 1600 px aus dem alten Theme). gula5 rechnet die Breite fliessend aus
 * Seitenpolstern -- die Kacheln wurden damit 12 px breiter, About 70 px
 * schmaler. --alexandra-container ist die Aussenbreite des alten
 * .container; darunter 576 px die ganze Fensterbreite.
 */
:root { --alexandra-container: 100vw; }
@media (min-width:  576px) { :root { --alexandra-container:  540px; } }
@media (min-width:  768px) { :root { --alexandra-container:  720px; } }
@media (min-width:  992px) { :root { --alexandra-container:  960px; } }
@media (min-width: 1200px) { :root { --alexandra-container: 1140px; } }
@media (min-width: 1600px) { :root { --alexandra-container: 1378px; } }

main > section.block {
	padding-left: 0;
	padding-right: 0;
}

/* Videos: Raster = Container minus 2 x 30 px (alt col + pleft30/pright30). */
.block-medien .medien-raster {
	width: calc( var( --alexandra-container ) - 60px );
	margin-left: auto;
	margin-right: auto;
}

/* Inhaltsbreite 60 = alt offset-2 col-8 (ab 768), offset-1 col-10 (576),
   darunter volle Containerbreite; je minus 2 x 15 px Polster. */
.contentwidth-60 {
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	width: calc( var( --alexandra-container ) - 30px );
}
@media (min-width: 576px) {
	.contentwidth-60 { width: calc( var( --alexandra-container ) * 10 / 12 - 30px ); }
}
@media (min-width: 768px) {
	.contentwidth-60 { width: calc( var( --alexandra-container ) * 8 / 12 - 30px ); }
}


/*
 * NAVIGATION (gula-nav-onepage). Alt: Bootstrap-Leiste, fest ueber dem
 * Kopfbild (die Seite beginnt unter der halbdurchsichtigen Leiste),
 * Menuepunkte LINKS im Container, Schrift 400. Das Plugin schiebt die
 * Seite um 5,15 Schriftgroessen nach unten und setzt die Punkte rechts.
 */
body {
	margin-top: 0;
}
.navigation .mainwrapper {
	width: var( --alexandra-container );
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.nav_wrapper {
	/* Kein Logo: die leere Logo-Spalte des Plugins schob die Punkte zur Mitte. */
	grid-template-areas: "navi";
	padding-top: 4px;
	padding-bottom: 9px;
}
nav ul {
	font-weight: 400;
}
nav ul li a,
nav ul li a:visited {
	padding: 10px 30px 3px 0;
}
nav ul li.current a,
nav ul li.current a:hover {
	font-weight: 400;
}
@media screen and (min-width: 800px) {
	.navitem_nav { justify-self: start; }
	/* alt inline-block mit -5 px: die Punkte rueckten je 5 px zusammen */
	nav ul li { margin-right: -5px; }
}
/*
 * Handy (Plugin: bis 799 px, alt Bootstrap bis 767 px): Leiste 46 px hoch,
 * ab 576 px 52 px; Menuezeichen LINKS (Plugin: rechts), drei Striche
 * 22 x 2 px im Abstand von 8 px wie das Bootstrap-Zeichen (navbar-dark).
 * Die Farbe der Striche steht in den Theme Options (Menuezeichen).
 */
@media only screen and (max-width: 799px) {
	.nav_wrapper {
		min-height: 46px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.nav-mobile {
		top: 0;
		left: 0;
		right: auto;
		width: 62px;
		height: 46px;
	}
	#navbar-toggle {
		left: 20px;
		top: 0;
		width: 22px;
		height: 46px;
		padding: 0;
	}
	#navbar-toggle span,
	#navbar-toggle span:before,
	#navbar-toggle span:after {
		width: 22px;
		height: 2px;
		border-radius: 1px;
	}
	#navbar-toggle span        { top: 22px; }
	#navbar-toggle span:before { top: -8px; }
	#navbar-toggle span:after  { bottom: -8px; }
	.navigation .mainwrapper {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* offen: Punkte ab 33 px, Leiste 175 px hoch -- wie die Bootstrap-Schublade */
	nav ul {
		padding: 33px 0 9px;
	}
	nav ul li a {
		padding: 10px 30px 3px 0;
	}
}
@media only screen and (min-width: 576px) and (max-width: 799px) {
	.nav_wrapper { min-height: 52px; }
	.nav-mobile,
	#navbar-toggle { height: 52px; }
	#navbar-toggle span { top: 25px; }
	nav ul { padding-top: 39px; }
}


/*
 * KOPFBILD: Titel in Bebas Neue, Sperrung 4 px, wie bisher in drei Stufen.
 */
.headerimage .overlay-content h1 {
	font-family: var( --title-font );
	font-weight: 400;
	letter-spacing: 4px;
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
}
.headerimage .overlay-content h1.titel-big {
	font-size: 36.8px;
	line-height: 1;
}
/* Unter 768 px sass der Titel alt 30 px tiefer (Platz fuer die Leiste). */
@media (max-width: 767px) {
	.headerimage .overlay-content { padding-top: 30px; }
}
@media (min-width: 576px) {
	.headerimage .overlay-content h1           { font-size: 36px; }
	.headerimage .overlay-content h1.titel-big { font-size: 72px; }
}
@media (min-width: 768px) {
	.headerimage .overlay-content h1           { font-size: 45px; }
	.headerimage .overlay-content h1.titel-big { font-size: 90px; }
}


/*
 * BLOCKTITEL (About, Kontakt) -- vorher das Plugin gula-haupttitel im
 * Theme, jetzt eine Zelle von gula-gridspalten (Klasse aus dem Umzug).
 */
.alexandra-blocktitel {
	font-family: var( --title-font );
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: normal;
	margin: 10px 0 30px;
}
@media (min-width: 576px) {
	.alexandra-blocktitel { font-size: 45px; }
}
/* Nur direkte Kinder: sonst trifft es auch die Absaetze im Kontaktformular. */
.gridcolumns .gcontent > p:last-child {
	margin-bottom: 0;
}

/* Nach-oben-Knopf (gula-smoothscroll): der Master nimmt die Seitenfarbe --
   hier #262626 auf #262626, der Kreis waere unsichtbar. Alt #1c1c1c. */
.scroll-up {
	background-color: #1c1c1c;
}

/* Bildnachweis unter dem Portraet: alt 80 % (gula5 85 %, feste Zeile). */
.small {
	font-size: 80%;
	line-height: 1.5;
}


/*
 * KONTAKTFORMULAR (CF7 #5). Das Raster kommt aus gula5 (src/wp/cf7.php,
 * .g5-form-raster / .g5-voll / .g5-form-fuss) -- hier steht nur, wie die
 * Felder dieser Site aussehen: dunkel durchscheinend mit grauem Rahmen,
 * kleine Beschriftung, roter Stern, heller Knopf. Masse wie bisher
 * (Bootstrap 4 im alten Theme).
 *
 * Schrift der Eingabe: alt #282828 mit !important (Vorgabe des Themes fuer
 * helle Sites) -- auf diesem Grund war Getipptes kaum zu lesen. Jetzt die
 * Schriftfarbe der Site. Bewusste Abweichung.
 *
 * Bootstrap rechnete in rem -- im alten Theme 18 px, am Handy 16 px. gula5
 * laesst rem bei 16 px.
 */
:root { --alexandra-rem: 16px; }
@media (min-width: 576px) {
	:root { --alexandra-rem: 18px; }
}
.wpcf7,
.wpcf7 p {
	font-size: 80%;
}
.wpcf7 label {
	display: inline-block;
	width: 100%;
	font-size: 80%;
	margin: 0;
}
/* Fuss: der Master stellt Quiz | Knopf auch am Handy nebeneinander. Hier
   gibt es kein Quiz, die linke Haelfte ist leer -- unter 768 px wie bisher
   der Knopf ueber die ganze Breite. */
@media (max-width: 767px) {
	.wpcf7 .g5-form-fuss { display: block; }
}
/* Abstand unter jedem Feld wie bisher 1rem (gula5: 0,65 Schriftgroessen) */
.wpcf7 .g5-form-raster p {
	margin-bottom: var( --alexandra-rem );
}
.wpcf7 .text-danger {
	color: #dc3545;
	font-size: 130%;
}
/* .wpcf7-form-control:not(.wpcf7-submit) schlaegt die Master-Regeln
   (.wpcf7 input[type=text] usw.), die Spamfalle traegt die Klasse nicht. */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
	display: block;
	width: 100%;
	height: calc( 1.5em + .75em + 2px );
	padding: .375em .75em;
	font-family: var( --font-family-sans );
	font-size: var( --alexandra-rem );
	font-weight: 400;
	line-height: 1.5;
	color: var( --sitefgcolor );
	background-color: rgba( 159, 159, 159, .15 );
	border: 1px solid #565656;
	border-radius: .25em;
}
.wpcf7 textarea.wpcf7-form-control:not(.wpcf7-submit) {
	height: 130px;
}
/* Fokus wie bisher (Bootstrap): weisses Feld, dunkle Schrift, blauer Rand.
   gula5 macht das Feld 60 % weiss -- mit heller Schrift unlesbar. */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
	color: #282828;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 calc( var( --alexandra-rem ) * .2 ) rgba( 0, 123, 255, .25 );
}
.wpcf7 .wpcf7-form-control::placeholder {
	color: #808080;
	opacity: 1;
}
/* Knopf: eigene Klasse btn-send (cf7.php laesst ihn damit in Ruhe). Gleiche
   Spezifitaet wie die Master-Regel .wpcf7 input[type=submit]:not(.btn),
   die hier sonst greift -- die spaetere gewinnt. */
.wpcf7 input.wpcf7-submit.btn-send {
	display: block;
	width: 100%;
	height: calc( 1.5em + .75em + 2px );
	margin-top: 15px;
	padding: .375em .75em;
	font-family: var( --font-family-sans );
	font-size: var( --alexandra-rem );
	font-weight: 400;
	line-height: 1.5;
	color: #000;
	background-color: #cfcfcf;
	border: 1px solid #bababa;
	border-radius: .25em;
	cursor: pointer;
}
.wpcf7 input.wpcf7-submit.btn-send:hover,
.wpcf7 input.wpcf7-submit.btn-send:focus {
	background-color: #bababa;
	border: 1px solid #a3a3a3;
}