:root{
	--href-outline-farbe: #fab407;
	--href-focus-background: rgba(255,255,255,.5);
}


/* Hyperlinks */
a:focus{ outline: 3px dotted var(--href-outline-farbe); }
/* Formulare Plugin 'Contact Form 7' https://contactform7.com/ */
input[type="text"]:focus,input[type="email"]:focus,textarea:focus{ outline: 3px dotted var(--href-outline-farbe); }
input[type="submit"]:focus{ outline: 3px dotted var(--href-outline-farbe); }
input[type="checkbox"]:focus-visible{ outline: 3px dotted var(--href-outline-farbe); }


/* ### the7-Theme ################################################################################################# */
#page .skip-link{
	background-color: #fff;
	text-transform:uppercase;
	font-size:1.2rem;
	font-weight:600;
	outline: 3px dotted var(--href-outline-farbe);
	color: var(--the7-base-color);
	box-shadow: none;
}
#page .skip-link:focus{ z-index: 99999; }

/* Korrektur CSS für Top-Bar Naviagtion. Eventuell abgleichen mit den Einstellungen im Backend -> The Options -> Top-Bar & Header -> Microwidgets */
.masthead .top-bar .menu-select, .masthead .top-bar .mini-nav nav > ul:not(.mini-sub-nav) > li > a{
	color: var(--the7-links-color);
	font: 500 16px / 22px "Source Sans 3", Helvetica, Arial, Verdana, sans-serif;
	text-transform:uppercase;
}
.masthead .top-bar .menu-select, .masthead .top-bar .mini-nav nav > ul:not(.mini-sub-nav) > li:not(.last) > a{
	margin-right: 16px;
}

/* ### Plugin 'Contact form 7' ################################################################################### 
Im Backend bei dem entsprechenden Formular unter Zusätzliche Einstellungen folgendes eintragen: 'acceptance_as_validation:on' 
Damit auch bei nicht markierter Datenschutz-Checkbox der Submit-Button per Tastatur wählbar ist.
*/
.wpcf7-not-valid-tip{ display:block; }



/*
Navigationen

Seit HTML5 gibt es ein <nav>-Tag. Dieses sollten Sie unbedingt bei der Programmierung einer Webseiten-Navigation verwenden. 
Die Navigationspunkte werden als unordered list, unsortierte Liste, erstellt.

Damit die Navigationsmenüpunkte auch per Tastenkürzel ausgeführt werden können, bekommen sie das Attribut accesskey. 
Die gesetzten Tastenkürzel können in Kombination mit der Taste „Alt“ ausgeführt werden. 

Das aria-label-Attribut definiert einen Zeichenfolgewert, der verwendet werden kann, um ein Element zu benennen.

ARIA-Rollen liefern semantische Bedeutung für Inhalte und ermöglichen es Screenreadern und anderen Tools, mit einem Objekt in einer Weise zu interagieren, die den Erwartungen der Benutzer an diesen Objekttyp entspricht.

'Skip Navigation' einbauen

The7 Theme

Erforderliche angepasste Templates:

template-parts/header/primary-menu.php


*/