/* ==========================================================================
   KNT Internet - Barrierefreiheit und Gestaltung
   ==========================================================================
   Wird als LETZTES Stylesheet geladen und ueberschreibt gezielt Regeln aus
   bootstrap.css / style.css / responsive.css. Reihenfolge nicht aendern.
   Hintergrund und Pruefergebnisse:
   docs/plans/2026-08-06-wcag-aa-kundenportal.md
   ========================================================================== */

:root {
	--knt-blau: #2b6ca3;
	--knt-blau-dunkel: #175a91;
	--knt-blau-hell: #eaf2f9;
	--knt-text: #333;
	--knt-text-leise: #6e6e6e;
	--knt-fokus: #c2410c;
	--knt-rand: #d4dde5;
}


/* --------------------------------------------------------------------------
   1. Fokus sichtbar machen - WCAG 2.4.7
   --------------------------------------------------------------------------
   :focus-visible zeigt den Ring bei Tastaturbedienung, nicht bei jedem
   Mausklick. Der helle Halo traegt ihn auch ueber dunklen Flaechen.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.navbar-toggle:focus-visible {
	outline: 3px solid var(--knt-fokus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
	border-radius: 3px;
	text-decoration: none;
}

/* Rueckfallebene fuer Browser ohne :focus-visible. */
a:focus,
button:focus,
.btn:focus,
.navbar-toggle:focus {
	outline: 3px solid var(--knt-fokus);
	outline-offset: 2px;
}

@supports selector(:focus-visible) {
	a:focus,
	button:focus,
	.btn:focus,
	.navbar-toggle:focus {
		outline: none;
	}
	a:focus-visible,
	button:focus-visible,
	.btn:focus-visible,
	.navbar-toggle:focus-visible {
		outline: 3px solid var(--knt-fokus);
	}
}

/* Bootstraps blauer Schein allein ist zu schwach. */
.form-control:focus {
	border-color: var(--knt-blau);
	box-shadow: 0 0 0 3px rgba(43, 108, 163, 0.18);
}

.form-control:focus-visible {
	outline: 3px solid var(--knt-fokus);
	outline-offset: 1px;
	box-shadow: none;
}


/* --------------------------------------------------------------------------
   2. Sprunglink zum Inhalt - WCAG 2.4.1
   -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 2000;
	display: inline-block;
	padding: 14px 22px;
	background-color: #fff;
	color: var(--knt-blau-dunkel);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid var(--knt-blau-dunkel);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: top 150ms ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	color: var(--knt-blau-dunkel);
	text-decoration: none;
}

/* Zielanker nicht unter der fixierten Leiste parken. */
main[id],
[id="inhalt"] {
	scroll-margin-top: 90px;
}


/* --------------------------------------------------------------------------
   3. Kontraste - WCAG 1.4.3
   -------------------------------------------------------------------------- */

a {
	color: var(--knt-blau);
}

a:hover,
a:focus {
	color: var(--knt-blau-dunkel);
	text-decoration: underline;
}

/* Sekundaertext. */
.titlebar p,
#footer p,
#footer_copy p,
#intro_footer_copy p,
.sign-in-terms p,
.pricing-table .price-period,
.text-muted {
	color: var(--knt-text-leise);
}

/* Auf dunklem Grund bleibt heller Text. */
#intro .titlebar p,
#intro_footer_copy p,
.dark-section .titlebar p {
	color: #e8eef3;
}

/* Primaerschaltflaechen. */
.btn-primary,
.contact-btn.btn-primary {
	background-color: var(--knt-blau);
	border-color: var(--knt-blau-dunkel);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.contact-btn.btn-primary:hover,
.contact-btn.btn-primary:focus {
	background-color: var(--knt-blau-dunkel);
	border-color: var(--knt-blau-dunkel);
	color: #fff;
}

.btn:focus {
	color: inherit;
}

.btn-primary:focus {
	color: #fff;
}


/* --------------------------------------------------------------------------
   4. Icon-Links und Bedienelementgroesse - WCAG 2.4.4 / 2.5.8
   --------------------------------------------------------------------------
   Icon-Links tragen ihren Namen in einem .visually-hidden-<span>.
   -------------------------------------------------------------------------- */

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mindestens 24x24 CSS-Pixel Trefferflaeche. */
.foo_social {
	min-width: 40px;
	min-height: 40px;
	line-height: 40px;
	display: inline-block;
	text-align: center;
}

/* Keine Polsterung auf .navbar-nav > li > a ergaenzen: `line-height: 70px`
   liefert die Trefferflaeche. Zusaetzliche Polsterung macht die Leiste
   hoeher als den Abstand der Inhaltsbereiche weiter unten. */


/* --------------------------------------------------------------------------
   4a. Fixierte Navigationsleiste
   -------------------------------------------------------------------------- */

#header {
	position: relative;
	z-index: 1030;
}

.navbar.navbar-fixed-top {
	background-color: #f0f0f0;
	z-index: 1030;
}

/* Deckend, Ton am Abdunkelungsschleier der Startseite orientiert.
   Weisser Navigationstext darauf 17,6:1. */
.navbar.navbar-fixed-top.intro {
	background-color: #0d1a26;
	border-bottom: 1px solid #1d2b38;
}


/* --------------------------------------------------------------------------
   4b. Navigationsleiste - eine Schrift fuer beide Leisten
   --------------------------------------------------------------------------
   style.css pflegt zwei getrennte Regelsaetze (#intro-nav-menu und
   #top-nav-menu). Aenderungen an der Navigation gehoeren hierher, sonst
   laufen die beiden Leisten wieder auseinander.
   -------------------------------------------------------------------------- */

#intro-nav-menu .navbar-nav > li > a,
#top-nav-menu .navbar-nav > li > a {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 70px;
	padding: 0 18px;
	text-transform: uppercase;
}

/* Gleiches Hover-Muster auf beiden Leisten. Weiss auf #2b6ca3 = 5,56:1. */
#intro-nav-menu .navbar-nav > li > a:hover,
#top-nav-menu .navbar-nav > li > a:hover {
	background-color: var(--knt-blau);
	color: #fff;
}

/* Eingeklapptes Menue: kleinere Zeilenhoehe, fuer beide Leisten gleich. */
@media only screen and (max-width: 991px) {
	#intro-nav-menu .navbar-nav > li > a,
	#top-nav-menu .navbar-nav > li > a {
		line-height: 50px;
		text-align: center;
	}
}

/* Abstand unter der fixierten Leiste. Gilt fuer alle fuenf Wrapper -
   style.css erfasst #contact-page-wrapper nicht. */
#about-page-wrapper,
#pricing-page-wrapper,
#works-page-wrapper,
#faq-page-wrapper,
#contact-page-wrapper {
	margin-top: 0;
	padding-top: 110px;
}


/* --------------------------------------------------------------------------
   5. Formulare - WCAG 1.3.1 / 3.3.1 / 3.3.2
   -------------------------------------------------------------------------- */

.form-group label {
	display: block;
	margin-bottom: 6px;
	color: var(--knt-text);
	font-weight: 700;
}

/* Eingabefelder: weisse Flaeche, Rahmen mit 4,09:1 gegen Weiss (WCAG 1.4.11).
   style.css faerbt input[type="text"] grau - das las sich als "gesperrt". */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background-color: #fff;
	color: var(--knt-text);
	height: auto;
	padding: 11px 14px;
	font-size: 16px; /* verhindert den Auto-Zoom von iOS Safari */
	border: 1px solid #737f8a;
	border-radius: 4px;
	box-shadow: none;
}

/* Gesperrte Felder sollen als solche erkennbar sein. */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
input[disabled],
textarea[disabled],
select[disabled] {
	background-color: #eceff2;
	border-color: #b3bcc5;
	color: #666;          /* 4,97:1 auf #eceff2 */
	cursor: not-allowed;
	opacity: 1;           /* Bootstraps Abblendung wuerde den Kontrast druecken */
}

/* Pflichtfelder nicht allein ueber Farbe - WCAG 1.4.1 */
.pflicht-hinweis {
	color: var(--knt-text-leise);
	font-size: 14px;
	margin-bottom: 18px;
}

.feld-pflicht::after {
	content: " *";
	color: #a3320d;
	font-weight: 700;
}

.help-block:empty {
	display: none;
}

.form-group.has-error .form-control {
	border-color: #a3320d;
	border-width: 2px;
}

.form-group.has-error .help-block,
.formular-fehler {
	color: #a3320d; /* 6,24:1 auf Weiss */
	font-weight: 700;
}

.formular-fehler {
	display: block;
	margin-top: 8px;
	padding: 12px 14px;
	background-color: #fdf1ed;
	border-left: 4px solid #a3320d;
	border-radius: 3px;
}

.formular-hinweis {
	display: block;
	margin-top: 18px;
	padding: 16px 18px;
	background-color: var(--knt-blau-hell);
	border-left: 4px solid var(--knt-blau);
	border-radius: 3px;
	color: var(--knt-text);
}


/* --------------------------------------------------------------------------
   6. Kundenbereich - Rechnungstabelle
   -------------------------------------------------------------------------- */

.rechnungen-karte {
	background-color: #fff;
	border: 1px solid var(--knt-rand);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(20, 40, 60, 0.06);
	overflow: hidden;
	margin-bottom: 40px;
}

.rechnungen-karte table {
	margin-bottom: 0;
}

.rechnungen-karte caption {
	padding: 18px 22px 14px;
	color: var(--knt-text);
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	border-bottom: 1px solid var(--knt-rand);
}

.rechnungen-karte thead th {
	background-color: #f4f7fa;
	border-bottom: 2px solid var(--knt-rand) !important;
	color: var(--knt-text);
	font-weight: 700;
	white-space: nowrap;
	padding: 14px 16px !important;
}

/* `th` mitnennen: die Rechnungsnummer steht als <th scope="row"> in der
   Zeile und wuerde sonst Bootstraps Polsterung und Fettung behalten. */
.rechnungen-karte tbody td,
.rechnungen-karte tbody th {
	padding: 14px 16px !important;
	vertical-align: middle !important;
	text-align: left;
	font-weight: 400;
	color: var(--knt-text);
}

.rechnungen-karte tbody tr:hover {
	background-color: var(--knt-blau-hell);
}

.rechnungen-karte .spalte-betrag {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Gleichbreite Ziffern in den Nummernspalten. */
.rechnungen-karte tbody th,
.rechnungen-karte tbody td:first-child {
	font-variant-numeric: tabular-nums;
}

.download-link {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 7px 13px;
	background-color: #fff;
	border: 1px solid var(--knt-blau);
	border-radius: 4px;
	color: var(--knt-blau);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.download-link:hover,
.download-link:focus {
	background-color: var(--knt-blau);
	border-color: var(--knt-blau-dunkel);
	color: #fff;
	text-decoration: none;
}

.download-link .fa {
	margin-right: 6px;
}

.kein-evn {
	color: var(--knt-text-leise);
	font-size: 14px;
}

.begruessung {
	padding: 26px 30px;
	background-color: var(--knt-blau-hell);
	border-left: 4px solid var(--knt-blau);
	border-radius: 6px;
	margin-bottom: 32px;
}

.begruessung h1 {
	margin-top: 0;
	font-size: 30px;
	color: var(--knt-text);
}

.begruessung p {
	color: var(--knt-text);
	margin-bottom: 0;
}

.sitzung-info {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(43, 108, 163, 0.25);
	color: var(--knt-text-leise);
	font-size: 15px;
}

/* Schmale Anzeigen: Tabelle scrollt horizontal. */
.tabelle-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


/* --------------------------------------------------------------------------
   7. Typografie und Feinschliff
   -------------------------------------------------------------------------- */

body {
	color: var(--knt-text);
}

/* WCAG 1.4.12 */
p,
li {
	line-height: 1.6;
}

/* Das Logo ist eine Wortmarke, keine Ueberschrift. */
/* Fester Pixelwert: als em haengt die Wortmarke an der Leistenschrift. */
.navbar-brand .knt-wortmarke {
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}

.navbar-brand .knt-wortmarke small {
	font-size: 65%;
	font-weight: 400;
}

h1:empty,
h2:empty,
h3:empty,
h4:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   7f. Startseite - Wortmarke und Kontaktschaltflaechen
   -------------------------------------------------------------------------- */

.knt-logo,
.knt-logo small {
	color: #9fd3ff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.knt-logo:hover,
.knt-logo:hover small {
	color: #6fb7ff;
}

.contact-buttons {
	margin-top: 26px;
}

.contact-buttons .col-md-12 {
	margin-bottom: 14px;
}

.contact-buttons .col-md-12:last-child {
	margin-bottom: 26px;
}

.contact-btn {
	display: block;
	width: 88%;
	max-width: 420px;
	margin: 0 auto;
	padding: 14px 20px;
	font-size: 1.05em;
	border-radius: 6px;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.contact-btn:hover,
.contact-btn:focus {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.contact-btn:active {
	transform: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.contact-btn .fa {
	font-size: 1.15em;
	margin-right: 10px;
	vertical-align: middle;
}

@media (max-width: 480px) {
	.contact-btn { width: 94%; font-size: 1em; padding: 13px 16px; }
	.contact-buttons .col-md-12 { margin-bottom: 12px; }
}


/* --------------------------------------------------------------------------
   7e. Impressum - Kontaktdaten und Datenschutz sichtbar trennen
   --------------------------------------------------------------------------
   Beides stand fast ohne Abstand untereinander und las sich wie ein Block.
   Deutlicher Abstand plus Trennlinie machen zwei Abschnitte daraus.
   -------------------------------------------------------------------------- */

.datenschutz-titel {
	margin-top: 70px;
	padding-top: 45px;
	border-top: 1px solid var(--knt-rand);
}

.datenschutz-titel h2 {
	margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   7d. FAQ - Rhythmus zwischen den Frage-Antwort-Bloecken
   --------------------------------------------------------------------------
   Abstand nach oben groesser als der zwischen Frage und Antwort, damit sich
   optisch gruppiert, was zusammengehoert. Die Fragen sind h3, nicht h4.
   -------------------------------------------------------------------------- */

.question {
	margin-bottom: 0;
	padding-top: 34px;
}

.question:first-of-type {
	padding-top: 8px;
}

.question h3,
.question h4 {
	color: #111;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 10px;
}

.question p {
	color: #555;
	margin-bottom: 0;
}

/* Zwischenueberschriften beginnen einen Themenblock. Direktes Kind (`>`):
   im Impressum stecken die h2 in .question und brauchen keine Trennlinie. */
#faqs_column_1 > h2,
#faqs_column_2 > h2 {
	margin-top: 54px;
	padding-top: 26px;
	border-top: 1px solid var(--knt-rand);
}

#faqs_column_1 > h2:first-child,
#faqs_column_2 > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}


/* --------------------------------------------------------------------------
   7c. Startseite - Abdunkelungsschleier ueber dem Hintergrundfoto
   --------------------------------------------------------------------------
   Macht den Kontrast des weissen Textes unabhaengig vom Motiv: bei 64 %
   Deckung ueber dem hellstmoeglichen Bildpunkt bleiben 5,25:1.
   -------------------------------------------------------------------------- */

body.welcome_page::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg,
		rgba(8, 20, 32, 0.72) 0%,
		rgba(8, 20, 32, 0.64) 45%,
		rgba(8, 20, 32, 0.80) 100%);
	pointer-events: none;
	z-index: 0;
}

body.welcome_page > * {
	position: relative;
	z-index: 1;
}

/* Die Claims der Startseite sind Absaetze, keine Ueberschriften. */
#intro_slogan .intro-claim {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #000, 0 2px 2px #333;
	margin: 0 0 4px;
	color: #fff;
}

@media (max-width: 1199px) {
	#intro_slogan .intro-claim { font-size: 18px; }
}

@media (max-width: 767px) {
	#intro_slogan .intro-claim { font-size: 16px; }
}

/* Der Kontaktkasten wird ueber Raster-Offsets zentriert. Hier KEIN `width`
   auf .form_register setzen - gleiche Spezifitaet wie die Spaltenklassen,
   spaeter geladen, der Kasten liefe sonst ueber die volle Breite.
   Unter 992 px setzt responsive.css `margin-left: 0`; nur das wird hier
   zurueckgenommen. */
@media only screen and (max-width: 991px) {
	.form_register {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Der Kastentitel ist ein h2; die h4-Regel in style.css greift nicht mehr. */
.form_register h2 {
	color: #fff;
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 18px;
}

@media (max-width: 480px) {
	.form_register h2 { font-size: 17px; }
}

#intro_slogan {
	text-align: center;
}


/* --------------------------------------------------------------------------
   7b. Haken-Liste ("Wechseln ist einfach")
   -------------------------------------------------------------------------- */

ul.haken-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.haken-liste li {
	position: relative;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	padding-left: 28px;
}

ul.haken-liste li .fa-check {
	position: absolute;
	left: 0;
	top: 3px;
	color: var(--knt-blau);
	font-size: 18px;
	margin-right: 0;
}


/* --------------------------------------------------------------------------
   7a. Tarifboxen - Preis und Bandbreite sind Absaetze, keine Ueberschriften
   -------------------------------------------------------------------------- */

.pricing-table .plan-price .plan-preis {
	color: #222;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 0;
}

.pricing-table.featured .plan-price .plan-preis {
	color: #f7f7f7;
}

.pricing-table ul.features .plan-tempo {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 4px;
}

.pricing-table .plan-title {
	margin: 0;
}


/* WCAG 2.3.3 - Bewegung auf Wunsch abschalten. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.skip-link,
	.navbar,
	#footer_icons {
		display: none !important;
	}
}