/*
	Theme Name: Hello Elementor Child — Nardini-Realschule
	Theme URI: https://wp.yatafu.de/
	Description: Child-Theme für die Website der Nardini-Realschule Mallersdorf.
		Enthält die selbst gehosteten Schriften und die Basis-Styles, die
		Elementor nicht abdeckt. Farben werden hier NICHT definiert — die
		liegen als globale Farben im Elementor-Kit.
	Author: Nardini-Realschule Mallersdorf
	Template: hello-elementor
	Version: 1.0.0
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
*/

/* ===========================================================================
   Schriften
   ---------------------------------------------------------------------------
   Selbst gehostet, nicht von Googles Servern. Elementor laedt Google Fonts
   sonst direkt beim Besucher und uebertraegt dabei dessen IP-Adresse in die
   USA. Das ist in Deutschland abmahnfaehig (LG Muenchen I, 3 O 17493/20),
   und die Besucher dieser Seite sind ueberwiegend Eltern minderjaehriger
   Kinder.

   Beide Familien sind variable Schriften: eine Datei deckt die gesamte
   Strichstaerkenachse ab. Es gibt deshalb nur vier Dateien - aufrecht und
   kursiv je Familie, zusammen rund 115 KB - und nicht eine Datei je Schnitt.

   Der deklarierte Bereich ist 400 bis 600, obwohl das Gestaltungsraster nur
   400 und 500 vergibt. Grund: <strong> im Fliesstext loest im Browser 700
   aus. Bei einem Bereich von 400 bis 500 wuerde das auf 500 gekappt und waere
   von normalem Text kaum zu unterscheiden. Da es eine variable Schrift ist,
   kostet der zusaetzliche Spielraum kein einziges Byte.

   Kein unicode-range: ausgeliefert wird ohnehin nur der lateinische
   Zeichensatz. Fehlt ein Zeichen, faellt der Browser fuer dieses eine Zeichen
   auf die naechste Schrift zurueck - dafuer braucht es die Angabe nicht.
   =========================================================================== */

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/source-serif-4-latin-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/source-serif-4-latin-var-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/source-sans-3-latin-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/source-sans-3-latin-var-italic.woff2') format('woff2');
}

/* ===========================================================================
   Basis-Styles
   ---------------------------------------------------------------------------
   Sparsam gehalten. Alles, was Elementor ueber das Kit steuert - Farben,
   Schriftgroessen, Abstaende zwischen Absaetzen - steht bewusst NICHT hier.
   Doppelte Regeln an zwei Orten sind der sichere Weg zu Widerspruechen.

   Farben kommen ueber Elementors globale CSS-Variablen. So bleibt das Kit die
   einzige Stelle, an der eine Farbe definiert ist.
   =========================================================================== */

/* --- Lesespalte ------------------------------------------------------------
   Die Layoutbereiche bleiben bei den 1140px, die Elementor vorgibt. Fuer
   Fliesstext ist das zu breit: Zeilen mit 120 Zeichen und mehr sind muehsam zu
   lesen, weil das Auge den Zeilenanfang nicht mehr sicher findet.

   42rem ergeben bei der eingestellten Schriftgroesse rund 70 bis 80 Zeichen.

   Die Klasse wirkt nur dort, wo sie vergeben ist. Sie im Editor auf die
   Textcontainer zu legen, ist redaktionelle Arbeit und gehoert zur
   Ueberarbeitung der einzelnen Seiten.
   -------------------------------------------------------------------------- */

.nrs-lesespalte {
	max-width: 42rem;
}

/* Zentrierte Textcontainer sollen auch zentriert bleiben. */
.nrs-lesespalte.nrs-zentriert {
	margin-inline: auto;
}

/* --- Links im Fliesstext ---------------------------------------------------
   Normal- und Hoverfarbe sind beide "accent" - eine Unterscheidung allein
   ueber die Farbe gibt es also nicht, und sie waere auch keine gute: wer
   Farben schlecht unterscheidet, saehe gar keinen Unterschied.

   Stattdessen die Unterstreichung: im Ruhezustand duenn, beim Ueberfahren und
   bei Tastaturfokus dicker. Das ist unabhaengig von Farbwahrnehmung sichtbar.

   Bewusst nur im Fliesstext. Buttons, Navigation und Icon-Listen sind als
   solche erkennbar und brauchen keine Unterstreichung.
   -------------------------------------------------------------------------- */

.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a,
.elementor-widget-toggle .elementor-tab-content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible,
.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus-visible,
.elementor-widget-toggle .elementor-tab-content a:hover,
.elementor-widget-toggle .elementor-tab-content a:focus-visible {
	text-decoration-thickness: 2px;
}

/* --- Dateiangabe hinter einem Download ---------------------------------------
   "(PDF, 225 KB)" hinter dem Linktext. Bewusst leiser als der Link selbst und
   ausdruecklich NICHT mit unterstrichen - es ist eine Angabe ueber den Link,
   nicht Teil von ihm. Wer auf dem Telefon im Funkloch steht, soll vorher
   sehen, worauf er sich einlaesst.
   -------------------------------------------------------------------------- */

.nrs-datei {
	color: var(--e-global-color-grau);
	font-size: 0.875em;
	white-space: nowrap;
}

/* --- Tastaturfokus ---------------------------------------------------------
   Wer nicht mit der Maus arbeitet, muss jederzeit sehen koennen, wo er sich
   befindet. Das ist keine Feinheit, sondern die Voraussetzung dafuer, dass die
   Seite ueberhaupt bedienbar ist.

   :focus-visible statt :focus - so bekommt der Mausklick keinen Rahmen, die
   Tastaturnavigation aber schon.

   Die erste Zeile setzt currentColor und wirkt damit auch dann, wenn die
   Elementor-Variable einmal fehlen sollte. Ohne sie waere die zweite Zeile
   im Fehlerfall ungueltig und der Fokus unsichtbar.

   outline: none ohne Ersatz gibt es hier nirgends.
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid currentColor;
	outline-color: var(--e-global-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf farbigen Flaechen - Buttons, Kopf- und Fusszeile - waere Terrakotta auf
   Terrakotta nicht zu sehen. Dort der helle Grundton. */
.elementor-button:focus-visible,
.elementor-widget-nav-menu .elementor-item:focus-visible {
	outline-color: var(--e-global-color-background);
}

/* --- Vertikaler Rhythmus ---------------------------------------------------
   Nur innerhalb von Fliesstextbloecken. Die Abstaende ZWISCHEN den Widgets
   regelt Elementor; hier einzugreifen wuerde jedes Seitenlayout stoeren.

   Der erste Absatz eines Blocks bekommt keinen Abstand nach oben - sonst
   entstuende dort eine Luecke, die im Editor niemand erklaeren kann.
   -------------------------------------------------------------------------- */

.elementor-widget-text-editor :is(h2, h3, h4, h5, h6),
.elementor-widget-theme-post-content :is(h2, h3, h4, h5, h6) {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.elementor-widget-text-editor > :first-child,
.elementor-widget-theme-post-content > :first-child,
.elementor-widget-text-editor :is(h2, h3, h4, h5, h6):first-child,
.elementor-widget-theme-post-content :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* Aufzaehlungen sollen nicht am Rand kleben. */
.elementor-widget-text-editor :is(ul, ol),
.elementor-widget-theme-post-content :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.elementor-widget-text-editor li + li,
.elementor-widget-theme-post-content li + li {
	margin-top: 0.4em;
}

/* --- Bewegung reduzieren ---------------------------------------------------
   Wer im Betriebssystem angegeben hat, weniger Bewegung sehen zu wollen, hat
   dafuer meist einen handfesten Grund - Schwindel, Migraene, Uebelkeit. Die
   Angabe zu ignorieren ist keine Geschmacksfrage.

   Nicht auf 0 gesetzt, sondern auf 0,01ms: Ereignisse wie transitionend
   feuern dann weiterhin, und Skripte, die darauf warten, haengen nicht.
   -------------------------------------------------------------------------- */

@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;
	}
}

/* --- Tabellen --------------------------------------------------------------
   Fuer die Stundentafeln auf "Bildungsangebote". Eine Tabelle mit sieben
   Spalten passt auf kein Telefon; sie bekommt deshalb einen eigenen
   Scrollbereich, statt die ganze Seite quer zu schieben.

   Der Scrollbereich braucht tabindex="0" im HTML, damit man ihn auch mit der
   Tastatur erreicht - ohne das ist der rechte Teil der Tabelle fuer alle
   unerreichbar, die keine Maus benutzen (WCAG 2.1.1).

   min-width auf der Tabelle selbst: ohne sie quetscht der Browser die Spalten
   zusammen, bis nichts mehr zu scrollen ist und die Fachnamen einzeln
   untereinander umbrechen.

   Farben ueber Elementors globale Variablen, nicht als Hexwert - das Kit
   bleibt die einzige Stelle, an der eine Farbe definiert ist.
   -------------------------------------------------------------------------- */

.nrs-tabelle {
	overflow-x: auto;
}

.nrs-tabelle table {
	border-collapse: collapse;
	width: 100%;
	min-width: 32rem;
}

.nrs-tabelle :is(th, td) {
	padding: 0.4em 0.6em;
	text-align: right;
	border-bottom: 1px solid var(--e-global-color-petrolHell);
	white-space: nowrap;
}

.nrs-tabelle :is(th, td):first-child {
	text-align: left;
	white-space: normal;
}

.nrs-tabelle thead th {
	color: var(--e-global-color-grau);
	font-weight: 500;
}

.nrs-tabelle tbody th {
	font-weight: 400;
}

.nrs-tabelle tfoot th,
.nrs-tabelle tfoot td {
	border-top: 1px solid var(--e-global-color-grau);
	border-bottom: 0;
	font-weight: 500;
}

/* --- Nur fuer Vorlesesoftware ----------------------------------------------
   Eine Tabellenbeschriftung, die sichtbar nichts beitraegt, weil die
   Ueberschrift darueber dasselbe sagt - fuer eine Vorlesesoftware aber der
   Unterschied zwischen "Tabelle mit 7 Spalten" und "Wochenstunden je
   Jahrgangsstufe, Tabelle mit 7 Spalten".

   Nicht display:none und nicht visibility:hidden - beides nimmt das Element
   auch aus der Vorlesereihenfolge.
   -------------------------------------------------------------------------- */

.nrs-versteckt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}