/*
Theme Name: Goerdes Webdesign Theme
Theme URI: https://goerdes.eu/
Description: Barrierearmes Child Theme für Twenty Twenty-One.
Author: Andreas Gördes
Template: twentytwentyone
Version: 1.0.0
Text Domain: goerdes-webdesign-theme
*/

/* Seitenhintergrund und Grundtext */

body {
	background-color: var(--goerdes-color-background);
	color: var(--goerdes-color-text);
}

/* Hauptflächen */

.site,
.site-main,
.entry-content,
.widget-area,
.comments-area {
	color: var(--goerdes-color-text);
}

/* Beiträge und Seiten etwas ruhiger auf weißem Grund */

.singular .entry,
.site-main > article {
	background-color: var(--goerdes-color-surface);
}

/* Links: immer erkennbar, nicht nur über Farbe */

a {
	color: var(--goerdes-color-link);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
}

a:hover,
a:focus {
	color: var(--goerdes-color-link-hover);
	text-decoration-thickness: 0.12em;
}

/* Tastaturfokus: deutlich sichtbar */

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
summary:focus,
[tabindex]:focus {
	outline: 3px solid var(--goerdes-color-focus);
	outline-offset: 3px;
	background-color: var(--goerdes-color-focus-background);
}

/* Moderner Fokus, wo vom Browser unterstützt */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--goerdes-color-focus);
	outline-offset: 3px;
	background-color: var(--goerdes-color-focus-background);
}

/* Navigation */

.primary-navigation a,
.footer-navigation a {
	color: var(--goerdes-color-link);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
}

.primary-navigation a:hover,
.primary-navigation a:focus,
.footer-navigation a:hover,
.footer-navigation a:focus {
	color: var(--goerdes-color-link-hover);
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a {
	color: var(--goerdes-color-active);
	font-weight: 700;
}

/* Buttons und Absende-Schaltflächen */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	background-color: var(--goerdes-color-link);
	color: var(--goerdes-color-surface);
	border: 2px solid var(--goerdes-color-link);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--goerdes-color-link-hover);
	border-color: var(--goerdes-color-link-hover);
	color: var(--goerdes-color-surface);
}

/* Buttons mit Tastaturfokus: Text bleibt lesbar */

button:focus,
button:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible,
input[type="reset"]:focus,
input[type="reset"]:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible {
	background-color: var(--goerdes-color-focus-background);
	color: var(--goerdes-color-text);
	border-color: var(--goerdes-color-focus);
}

/* Formulare */

input,
textarea,
select {
	color: var(--goerdes-color-text);
	background-color: var(--goerdes-color-surface);
	border: 2px solid var(--goerdes-color-border-strong);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--goerdes-color-focus);
}

/* Trennlinien und Tabellen */

hr,
.wp-block-separator {
	border-color: var(--goerdes-color-border);
}

table,
th,
td {
	border-color: var(--goerdes-color-border);
}

/* Hinweise, falls du solche Klassen später verwendest */

.goerdes-hinweis {
	background-color: var(--goerdes-color-notice-background);
	border-left: 6px solid var(--goerdes-color-notice-border);
	color: var(--goerdes-color-text);
	padding: 1rem;
}

.goerdes-hinweis a {
	color: var(--goerdes-color-link);
}

/* Skip-Link sichtbar und klar, sobald er fokussiert wird */

.skip-link:focus {
	background-color: var(--goerdes-color-focus-background);
	color: var(--goerdes-color-text);
	outline: 3px solid var(--goerdes-color-focus);
	outline-offset: 3px;
}