/*
 * AVS – Grundlayer
 *
 * Nur Grundwerte fuer Text, Links, Bilder und Bedienbarkeit.
 * Keine Bausteine, kein Layout einzelner Abschnitte – die kommen
 * spaeter in eigenen Dateien dazu.
 *
 * Alle Werte stammen aus tokens.css. Direkte Hexwerte oder
 * Pixelgroessen gehoeren nicht in diese Datei.
 */

/* --- Grundeinstellung ------------------------------------------------- */

body {
	background-color: var(--avs-hintergrund);
	color: var(--avs-text);
	font-family: var(--avs-schrift-text);
	font-size: var(--avs-groesse-m);
	line-height: var(--avs-zeile-normal);
	-webkit-font-smoothing: antialiased;
}

/* --- Ueberschriften --------------------------------------------------- */

h1, h2, h3, h4 {
	font-family: var(--avs-schrift-titel);
	color: var(--avs-titel);
	line-height: var(--avs-zeile-eng);
	text-wrap: balance;
}

/* Enger gesetzt als die Voreinstellung. Weit laufende Grossschriften
   wirken nach Blog; ein Anbieter liest sich kompakter. */
/* Die Antiqua traegt bei gleicher Groesse mehr als eine Grotesk und
   braucht deshalb weniger Fettung. 600 statt 700 wirkt praeziser. */
h1 {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: var(--avs-fett-halb);
	letter-spacing: -0.012em;
}

h2 {
	font-size: clamp(1.5rem, 2.3vw, 2.05rem);
	font-weight: var(--avs-fett-halb);
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--avs-groesse-l);
	font-weight: var(--avs-fett-halb);
	letter-spacing: -0.01em;
}

h4 { font-size: var(--avs-groesse-m); font-weight: var(--avs-fett-halb); }

/* Zahlen laufen tabellarisch – Entfernungen und Mengen stehen dadurch
   untereinander buendig statt zu flattern. */
.avs-zahl,
.avs-leiste__wert,
.avs-fach__nr,
.avs-ortsliste__km {
	font-family: var(--avs-schrift-daten);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --- Fliesstext ------------------------------------------------------- */

p {
	text-wrap: pretty;
}

/* Lesebreite fuer laufenden Text. Abschnitt 3.1 warnt vor der Textwand –
   begrenzte Zeilenlaenge ist die erste Massnahme dagegen. */
.avs-lesebreite {
	max-width: var(--avs-breite-schmal);
}

/* --- Links ------------------------------------------------------------ */

a {
	color: var(--avs-link);
	text-underline-offset: 0.15em;
	transition: color var(--avs-dauer-kurz) var(--avs-verlauf);
}

a:hover,
a:focus {
	color: var(--avs-link-hover);
}

/* --- Bedienbarkeit ---------------------------------------------------- */

/* Sichtbarer Fokus fuer Tastaturbedienung. Wird nicht entfernt. */
:focus-visible {
	outline: 2px solid var(--avs-akzent);
	outline-offset: 2px;
}

/* --- Bilder ----------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

/* --- Tabellen --------------------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--avs-groesse-s);
}

th, td {
	padding: var(--avs-abstand-3) var(--avs-abstand-4);
	border-bottom: var(--avs-rahmen);
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: var(--avs-fett-halb);
	color: var(--avs-anthrazit);
}

/* --- Container -------------------------------------------------------- */

.avs-container {
	width: 100%;
	max-width: var(--avs-breite-inhalt);
	margin-inline: auto;
	padding-inline: var(--avs-rand);
}

.avs-abschnitt {
	padding-block: var(--avs-abschnitt);
}

/* --- Reduzierte Bewegung ---------------------------------------------- */

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