/*
 * components.css  --  benannte Bauteile
 *
 * Was hier steht, hat einen Namen: Footer, Copyright, Tabelle, Video,
 * Zitat. Grundlagen stehen in base.css, das Seitengeruest in layout.css,
 * Abstaende in spacing.css (erzeugt).
 *
 * Uebernommen aus guladevs style.css, Abschnitt fuer Abschnitt, OHNE die
 * stillgelegten Regeln: dort standen ganze Bloecke in Blockkommentaren --
 * Code, den niemand mehr liest und niemand zu loeschen wagt. Sie sind hier
 * nicht mit umgezogen; wer sie braucht, findet sie in der git-Geschichte
 * von guladev.
 *
 * NICHT die Kommentar-Endmarke in den Fliesstext schreiben. Genau das stand
 * hier: die Zeile nannte "/*" und "*" + "/" als Beispiel -- und die zweite
 * Folge beendete den Dateikopf mitten im Satz. Alles bis zum naechsten
 * Semikolon wurde dann verworfen, und die Regel "blockquote" fiel weg.
 * Gemessen: components.css 49 statt 54 Regeln, Zitate ohne Einzug.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */



/* =================================================================
   BLOCKQUOTE
   ================================================================= */


    blockquote {
        margin-left: 0px;
        margin-bottom: calc(var( --size-1 ) * 0.25);
        margin-right: 0%;
        padding-top: 0em;
        padding-right: 0px;
        padding-left: calc(var( --size-1 ) * 2);
        padding-bottom: calc(var( --size-1 ) * 0.25);
        position: relative;
        border-left: 0px solid rgba(102,113,138,1.00);
    }
    blockquote strong {
        font-style: bold;
    }
    blockquote:before {
        font-family: Georgia, serif;
        display: block;
        content: "\201C";
        font-size: calc(var( --size-1 ) * 5);
        position: absolute;
        left: -8px;
        top: calc(var( --size-1 ) * 1);
    }
    blockquote cite {
        font-size: calc(var( --size-1 ) * 0.85);
        display: block;
        margin-top: calc(var( --size-1 ) * 0.3);
    }
    blockquote cite:before {
        content: "\2014 \2009";
    }


/* =================================================================
   Footer
   ================================================================= */

#footer {
	font-size: calc( var( --size-1 ) * 0.8 );
}
#footer img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* 
 * Footer Spalten
 */
 

#footer .sidebar-mitglieder h3 {
    font-size: calc( var( --size-1 ) * 1.25 );
    text-transform: uppercase;
    letter-spacing: 1px;
	margin-bottom: var( --size-05 );
}
#footer .S01 h4, #footer .S02 h4, #footer .S03 h4, #footer .S04 h4,
#footer .S01 h5, #footer .S02 h5, #footer .S03 h5, #footer .S04 h5,
#footer .S01 h6, #footer .S02 h6, #footer .S03 h6, #footer .S04 h6 {
    text-transform: uppercase;
    letter-spacing: 1px;
	margin-bottom: var( --size-05 );
}
.footer .S01 h3, .footer .S02 h3, .footer .S03 h3, .footer .S04 h3 {
    text-transform: none;
    letter-spacing: 0px;
	margin-bottom: calc( var( --size-1 ) * 0 );
}

/*	--- Footer - Footernav ---
	Links intern ---*/

    
    .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
    {
        color: var(--sitefgcolor);
    }

    .footer_content .S02 li:before,
    .footer_content .S03 li:before,
    .footer_content .S04 li:before {
        background-color: transparent;
        border-radius: 0%!important;
        content: none!important;
        display: block;
        margin-right: 0px!important;
        margin-bottom: 0px!important;
        height: 0px!important;
        width: 0px!important;
        margin-left: 0rem!important;
    }


/* =================================================================
   Copyright
   ================================================================= */


/*	Die Farben kommen aus den Theme Options, Reiter Farben (--opt-copyright-*
	aus library/gula-theme/inc/palette.php). Vorher schrieb copyright_color()
	sie als style-Attribut auf das <section>; der Weg ist entfallen, damit die
	Farbe an EINER Stelle steht und im Stylesheet ueberschreibbar bleibt.

	Ist ein Feld leer, ist die Variable undefiniert und der Browser verwirft
	die ganze Angabe. Bei 'color' heisst das: geerbt -- genau wie vorher, als
	kein Attribut ausgegeben wurde. Bei 'background-color': durchsichtig, und
	auch das war vorher so, denn keine andere Regel faerbt #copyright.
	Nachgemessen auf sechs Sites: null faerbende Regeln fuer dieses Element.
	Ausnahme nepalswiss26 -- dort hat die site.css eine eigene
	#copyright-Regel, die spaeter laedt und bei gleicher Spezifitaet gewinnt.	*/
#copyright {
	padding-top: calc( var( --size-1 ) * 0.25 );
	padding-bottom: calc( var( --size-1 ) * 0.25 );
	font-size: calc( var( --size-1 ) * 0.6 );
    text-align: center;
    letter-spacing: 0px;
    color: var( --opt-copyright-fg );
    background-color: var( --opt-copyright-bg );
}
#copyright .copyright_content {
    display: grid;
    grid-template-columns: auto auto;
    align-content: space-around;
    justify-content: space-between;
}
/*
#copyright .copyright_item {
}
*/
#copyright a, #copyright a:visited {
    color: rgba(var(--white), 1.0);
    text-decoration: none;
}
#copyright a:hover {
    color: rgba(var(--redviolett), 1.0);
    text-decoration: none;
}
#copyright p {
	margin: 0px;
}


/* =================================================================
   Video
   ================================================================= */

.video-wrapper{
	position: relative;
	overflow: hidden;
}
.video-wrapper iframe,
.featured-video video,
video {
	max-width: 100%;
	height: auto;
	z-index: -1;
}


/* =================================================================
   Video
   ================================================================= */

.video-container {
    position: relative;
    aspect-ratio: 16/9;
    max-width: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WP Video Shortcode */
.wp-video { 
    width: 100%!important; 
}
.wp-video .mejs-controls {
    opacity: 0!important;
    transition: all 0.5s ease;
}
.wp-video .mejs-container:hover .mejs-controls {
    opacity: 1!important;
}

iframe {
    max-width: 100%;
}


/* =================================================================
   TABELLE
   ================================================================= */

table {
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    font-size: calc( var( --size-1 ) * 0.9 );
	text-align:left;
	vertical-align:top;
	padding-left: 0px;
	padding-right:0px;
	width:100%;
	margin-bottom: calc( var( --size-1 ) * 1 );
}
th {
	border-bottom: 1px dotted var(--sitefgcolor_t25);
	padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 0.25 );
	vertical-align: top;
}
th {
	background-color: var(--sitefgcolor_t15);
}

td {
	border-bottom: 1px dotted var(--sitefgcolor_t30);
	padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 0.25 );
	vertical-align: top;
}
    
tr:nth-child(odd) {
	background-color: var(--sitefgcolor_t005);
}
tr:nth-child(even) {
	background-color: var(--sitefgcolor_t01);
}

/* 
 * table > div
 */

.display-table { 
    display: table;
    /* border-spacing: calc( var( --fontsize ) * 0.3 ); */
	margin-bottom: calc( var( --size-1 ) * 1 );
}
 .display-table > div {
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 1.75 );
	border-bottom: 1px solid var(--sitefgcolor_t15);
}
.display-table > div:nth-child(odd) {
	background-color: var(--sitefgcolor_t05);
}
.display-table > div:nth-child(even) {
	background-color: var(--sitefgcolor_t01);
}

/* 
 * Theme Table
 */
table.themetable {
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    font-size: calc( var( --size-1 ) * 0.9 );
	text-align:left;
	vertical-align:top;
	padding-left: 0px;
	padding-right:0px;
	width:100%;
	margin-bottom: calc( var( --size-1 ) * 1 );
}

.themetable th {
	border-bottom: 1px dotted rgba(var(--tablebg), 0.5);
	padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 0.25 );
	vertical-align: top;
}
.themetable th {
    font-family: var( --title-font );
    font-weight: var( --weight-700 );
	background-color: rgba(var(--tablebg), 0.5);
}

.themetable td {
	border-bottom: 1px dotted rgba(var(--tablebg), 0.5);
	padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 0.25 );
	vertical-align: top;
}
    
.themetable tr:nth-child(odd) {
	background-color: rgba(var(--tablebg), 0.15);
}
.themetable tr:nth-child(even) {
	background-color: rgba(var(--tablebg), 0.25);
}

table.themetable a {
	color: rgba(var(--tablebg), 1);
	text-decoration: none;
}
table.themetable a:visited {
	color: rgba(102,113,138,1.00);
	text-decoration: none;
}
table.themetable a:hover {
	color: rgba(var(--tablebg), 0.25);
}

@media screen and (max-width:767px) {
	
	table.themetable {
		border:none;
	}
    .themetable thead {
		display:none;
	}
	.themetable tr {
		float: left;
		width: 100%;
        padding-top: calc( var( --size-1 ) * 0.4 );
        padding-bottom: calc( var( --size-1 ) * 0.1 );    
	}
	.themetable td {
		float: left;
		width: 100%;
        padding-top: calc( var( --size-1 ) * 0.4 );
        padding-bottom: calc( var( --size-1 ) * 0.1 );    
	}
	.themetable td::before {
		content:attr(data-label);
		word-wrap: break-word;
		min-width: 30%;
		float:left;
		font-weight: 700;
	}
}

/* 
 * Grid Table
 */
ul.base {
    width: 100%!important;
    display: inline-grid;
    grid-template-columns: repeat(7, auto);
    /*grid-template-columns: auto auto auto;*/
    grid-template-rows: auto;
    font-size: calc( var( --size-1 ) * 0.9 );
    margin: 0px;
    padding: 0px;
	/* margin-bottom: calc( var( --size-1 ) * 0.75 );  */
    list-style: none;
}
ul.base li {
    margin-left: 0px;
    font-weight: var( --bodyweight );
	padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 1 );
    margin-bottom: 0px;
    border-bottom: 1px solid rgba(var(--tablebg), 0.15);
    background-color: rgba(var(--tablebg), 0.15);
}
ul.base li.header {
    font-family: var( --title-font );
    font-weight: var( --weight-700 );
	background-color: rgba(var(--tablebg), 0.3);
}
ul.base li:before { /* the custom styled bullets */
    background-color: transparent;
    border-radius: 0;
    content: "";
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 0px;
    width: 0px;
    margin-left: 0rem;
}

@media screen and (max-width:767px) {

    ul.base {
        grid-template-columns: repeat(1, auto);
    }
    ul.base li::before {
        content:attr(data-label);
        word-wrap: break-word;
        min-width: 30%;
        font-family: var( --title-font );
        font-weight: var( --weight-700 );
        background-color: rgba(var(--tablebg), 0.3);
    }
    ul.base li.header {
        display: none;
    }

}

/* 
 * Grid Table
 */
.base-wrapper {
    display: grid;
    grid-template-columns: repeat(7, auto);
    font-size: calc( var( --size-1 ) * 0.9 );
    /*overflow-x: scroll;*/
}
.base-wrapper > div {
    font-weight: var( --bodyweight );
	padding-top: calc( var( --size-1 ) * 0.4 );
	padding-bottom: calc( var( --size-1 ) * 0.1 );
	padding-left: calc( var( --size-1 ) * 0.25 );
	padding-right: calc( var( --size-1 ) * 0.25 );
    border-bottom: 1px solid rgba(var(--tablebg), 0.3);
    background-color: rgba(var(--tablebg), 0.15);
}
.base-wrapper > div strong {
    font-family: var( --title-font );
    font-weight: var( --weight-700 );
}
.base-wrapper > div:nth-child(-n+7) {
	background-color: rgba(var(--tablebg), 0.25);
}

/*	----------------------------------------------------------
	Passwortformular

	Uebernommen aus guladevs
	library/gula-theme/css/style-child-css/passwordform.css.

	WARUM HIER UND NICHT IN EINER EIGENEN DATEI: das Formular ist
	Theme-Markup (src/passwort.php), also gehoert seine Gestaltung zu den
	Bauteilen. In guladev haengt es an style-child.css -- der Ablage fuer
	SITE-Eigenes. Dort war es am falschen Platz: jede Site erbte es, aber
	geaendert hat es die Site nie.

	AUFGEFALLEN am 05.09.2026: gula5 hatte seit heute frueh das Formular
	(src/passwort.php), aber keine einzige Regel dafuer -- weder
	.post-password-form noch .pwform_fields kamen in css/ vor. Das Formular
	haette also nackt dagestanden, mit den Vorgaben des Browsers.

	--input_bg und --submit_bg stehen in colors.css, nicht hier: guladev
	definiert sie mitten im Blatt in einem eigenen :root-Block. Variablen
	gehoeren in gula5 an eine Stelle.	*/

grid_wrapper.pwform_fields {
	grid-template-columns: max-content max-content;
	grid-gap: calc( var( --fontsize ) * 0.3 );
}

.post-password-form input[type="password"],
.post-password-form input[type="submit"] {
	font-size: var( --fontsize );
	color: rgba( var( --white ), 1 );
	border: none;
	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="password"] {
	background-color: rgba( var( --input_bg ), 0.7 );
	padding-top: 0;
}

.post-password-form input[type="submit"] {
	background-color: rgba( var( --submit_bg ), 0.6 );
}

.post-password-form input[type="submit"]:hover {
	background-color: rgba( var( --submit_bg ), 1 );
}

.post-password-form h6,
.post-password-form p {
	line-height: 1.3;
}

/*	----------------------------------------------------------
	Kontaktformular (Contact Form 7)

	Uebernommen aus guladevs
	library/gula-theme/css/style-child-css/kontaktform.css -- das zweite
	Teilblatt, das die style-child.css des Masters importierte. Da gula5
	style-child.css nicht mehr laedt (Begruendung in src/assets.php), waere
	es sonst ersatzlos verschwunden.

	ES GESTALTET FREMDES MARKUP (.wpcf7-*), nicht eigenes. Das ist der
	Grund, warum es hier steht und nicht als Site-Sache gilt: das Formular
	sieht auf jeder Site des Hauses gleich aus, und keine Site hat diese
	Regeln je geaendert -- geprueft an den style-child.css der Flotte, wo
	sie ueberall nur als @import stehen.

	Unveraendert uebernommen, nur der Dateikopf ist weg.	*/


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

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

/* ---| Kontaktformular: Hausschrift fuer die Felder |--------------

	NEU am 05.09.2026, auf Ansage des Nutzers -- guladev hat das nirgends.

	Gemessen am Formular auf devwp5/kontaktformulare/: KEINE einzige Regel
	setzte die Schrift der Eingabefelder. Sie liefen auf Arial 400, der
	Vorgabe des Browsers, mitten in einer Seite in Roboto 300. Aufgefallen
	ist es, weil ich zuerst dem PLATZHALTER die Hausschrift gegeben hatte
	und er damit anders aussah als das Feld darunter.

	Der Platzhalter bekommt hier ausdruecklich KEINE eigene Schriftregel:
	er erbt sie vom Feld, und nur so bleiben beide gleich, egal was hier
	spaeter steht.

	font-size bleibt aussen vor. Formularfelder erben die Groesse nicht,
	aber sie ist auch nicht das Problem gewesen -- gemessen 17,88px, das
	ist var(--fontsize) und passt.

	'inherit' waere bequemer als die Token, ist aber falsch: das Feld steht
	je nach Block in einer Ueberschrift oder in einer Randspalte und wuerde
	deren Schnitt erben. Hier soll immer der Fliesstext-Schnitt stehen.	*/

/* ---| Das eigene Suchformular |----------------------------------

	searchform.php ist Theme-Markup, und 404.php ruft es auf. Bis zum
	05.09.2026 gestaltete es NIEMAND: gemessen auf der 404 von mktaylor26
	stand dort Arial 13,33px -- die nackte Vorgabe des Browsers -- neben
	einem gestalteten Suchfeld der Site im Kopf derselben Seite.

	Aufgefallen ist es bei der Sichtpruefung; keine Zahl meldet so etwas.
	Der Grund ist banal: alle Formularregeln dieses Blattes haengen an
	.wpcf7 oder .post-password-form. Ein Formular, das das Theme selbst
	ausgibt, fiel zwischen beide.

	guladev hatte das Problem nicht, weil seine 404-Seite gar kein
	Suchformular zeigt. Es gehoert aber dorthin: wer auf einer toten
	Adresse landet, sucht als naechstes.

	Dieselben Werte wie beim Kontaktformular -- nicht abgeschrieben,
	sondern aus denselben Token.								*/

.suchform input[type="search"] {
	font-family: var( --body-font );
	font-weight: var( --bodyweight );
	font-size: var( --fontsize );
	width: 100%;
	max-width: calc( var( --size-1 ) * 18 );
	padding: calc( var( --size-1 ) * 0.3 );
	background-color: rgba( var( --white ), 1.0 );
	border: 1px solid rgba( var( --sitefgcolor_rgb ), 0.3 );
}

.suchform button[type="submit"] {
	font-family: var( --body-font );
	font-weight: var( --bodyweight );
	font-size: var( --fontsize );
	padding: calc( var( --size-1 ) * 0.3 ) calc( var( --size-1 ) * 0.6 );
	background-color: rgba( var( --sitefgcolor_rgb ), 1.0 );
	color: rgba( var( --white ), 1.0 );
	border: 0;
	cursor: pointer;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="search"],
.wpcf7 input[type="password"],
.wpcf7 input[type="submit"],
.wpcf7 textarea,
.wpcf7 select {
	font-family: var( --body-font );
	font-weight: var( --bodyweight );
}

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

	DREI VARIABLEN GETAUSCHT, 05.09.2026. guladev schreibt hier
	--font-regular, --fontweight und --sitecolor. Keine der drei ist
	IRGENDWO definiert -- nicht in guladev, nicht in gula5;
	bin/g5-vokabular meldete sie als tot, je fuenf Aufrufe.

	Eine unbekannte Variable macht die ganze Deklaration ungueltig
	("invalid at computed-value time"), und die Eigenschaft faellt auf
	`inherit` zurueck. Bei font-family und font-weight faellt das nicht auf,
	die erben ohnehin. Beim `color` schon: die Regel steht mit !important da
	und ueberschreibt damit jede gueltige Platzhalterfarbe davor -- mit
	`inherit`. Der Platzhalter nimmt also die Textfarbe an, statt 60% davon.

	SCHRIFT UND GEWICHT SIND GANZ RAUS, nicht ersetzt. Der erste Versuch
	setzte --body-font und --bodyweight ein. Am fertigen Formular gemessen
	war auch das falsch:

	   Feld            Arial 400   -- die Vorgabe des BROWSERS; keine
	                               einzige Regel setzt die Feldschrift
	   Platzhalter     Roboto 300  -- nach meinem Versuch

	Ein Platzhalter, der anders aussieht als der Text, den man gleich
	hineinschreibt, ist schlechter als gar keine Regel. In guladev waren
	die Deklarationen ungueltig und der Platzhalter erbte die Feldschrift
	-- das ist das richtige Verhalten, und ohne die zwei Zeilen stellt es
	sich von selbst ein.

	OFFEN, weil Gestaltungsfrage und nicht Neubau: den FELDERN die
	Hausschrift zu geben (.wpcf7 input, .wpcf7 textarea). Dann waeren beide
	Roboto. guladev tut das nirgends.

	UND BEI DER FARBE ZWEIMAL HINGESEHEN. Der erste Versuch war
	--sitefgcolor_t60, also 60% der SEITEN-Textfarbe. Am fertigen Formular
	gemessen (devwp5/kontaktformulare/, 05.09.2026) war das falsch:

	   Feldtextfarbe          rgb(0,0,0)      schwarz
	   Platzhalter, Versuch 1 weiss / 60%     auf hellgrauem Feld
	   Platzhalter, guladev   rgb(0,0,0)      geerbt, weil ungueltig
	   Platzhalter, jetzt     schwarz / 60%

	--sitefgcolor ist die Textfarbe der SEITE (hier weiss auf dunkel), nicht
	die des Eingabefelds -- das steht auf einem hellen Grund und schreibt
	schwarz. Ein weisser Platzhalter darauf ist kaum zu lesen, und er passt
	nicht zu dem, was die Redaktion beim Tippen sieht.

	currentColor loest im ::placeholder die Farbe DES FELDES auf. Damit
	steht da, was gemeint war -- "60% der Textfarbe" -- und zwar auf jedem
	Grund, hell wie dunkel. color-mix statt rgba(), weil currentColor keine
	rgb-Liste ist.

	SICHTBARE FOLGE: der Platzhalter ist 60% deckend statt voll. In guladev
	war die Absicht dieselbe, nur wirkungslos.	*/

.wpcf7 .placeholder,
::placeholder {
    color: color-mix( in oklab, currentColor, transparent 40% ) !important;
}
::-webkit-input-placeholder {
    color: color-mix( in oklab, currentColor, transparent 40% ) !important;
}
:-moz-placeholder {
    color: color-mix( in oklab, currentColor, transparent 40% ) !important;
}
::-moz-placeholder {
    color: color-mix( in oklab, currentColor, transparent 40% ) !important;
}
:-ms-input-placeholder {
    color: black !important;
}

.wpcf7 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 );
}
/*	AUF DIESELBE TYPENLISTE GEZOGEN am 05.09.2026, auf Ansage des Nutzers.

	guladev gestaltet nur text, email und password. tel, url, number, date
	und search bekamen NICHTS -- kein Hintergrund, keinen Rahmen, keine
	volle Breite, kein Polster und keine Schriftgroesse. Gemessen am
	Formular "Rezept" auf devwp5/kontaktformulare/: 13,3px gegen 17,9px,
	und das Datumsfeld stand als kleines natives Kaestchen zwischen breiten
	Eingabezeilen.

	Der Grund ist keine Absicht, sondern das Alter der Datei: als sie
	entstand, gab es die HTML5-Typen noch kaum. Ein Formular mit einem
	Datums- oder Telefonfeld sah seither anders aus als eines ohne.

	NICHT in der Liste: submit (hat eigene Regeln weiter unten) und select
	(kommt in keinem der geprueften Formulare vor -- eine ungetestete
	Regel ist schlechter als keine). textarea hat seinen eigenen Block. */

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=password],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 input[type=number],
.wpcf7 input[type=date],
.wpcf7 input[type=search] {
    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 );
}

.wpcf7 .members-login-form input[type=text],
.wpcf7 .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 );
}

.wpcf7 textarea:focus,
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=password]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 input[type=url]:focus,
.wpcf7 input[type=number]:focus,
.wpcf7 input[type=date]:focus,
.wpcf7 input[type=search]:focus {
    background-color: rgba(var(--white), 0.6);
}
.wpcf7 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;
}
.wpcf7 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;
}