/*
 * AVS – Responsive Feinabstimmung
 *
 * Die Bausteine sind bereits fliessend aufgebaut (clamp, auto-fit,
 * Umbruchpunkte in bausteine.css). Diese Datei korrigiert nur, was
 * sich auf kleinen und mittleren Bildschirmen sonst falsch verhaelt.
 *
 * Laedt zuletzt und darf deshalb ueberschreiben.
 */

/* --- Grundsicherung ----------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

/* Nichts darf seitlich ueberstehen. Verhindert das horizontale
   Wackeln, das auf Telefonen entsteht, wenn ein einzelnes Element
   breiter ist als der Bildschirm. */
body {
	overflow-x: hidden;
}

img,
svg,
table {
	max-width: 100%;
}

/* Lange Wortzusammensetzungen sind im Deutschen der Regelfall.
   Ohne Trennung reissen sie auf schmalen Bildschirmen das Layout auf. */
h1, h2, h3 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* --- Tablet und darunter (bis 960px) ------------------------------------ */

@media (max-width: 959px) {

	/* Einstieg: Motiv rutscht unter den Text und wird begrenzt,
	   sonst nimmt es die halbe Bildschirmhoehe ein. */
	.avs-hero__motiv svg {
		max-width: 420px;
		margin-inline: auto;
	}

	.avs-gebiet__motiv svg {
		max-width: 320px;
	}

	/* Der Ablauf ist eine echte Reihenfolge. Sobald die Schritte
	   untereinander stehen, uebernimmt eine Linie links die Fuehrung
	   des Auges – die Reihenfolge bleibt so ablesbar. */
	.avs-schritt {
		padding-top: 0;
		padding-left: var(--avs-abstand-5);
		border-top: none;
		border-left: 2px solid var(--avs-linie);
	}

	.avs-schritt:first-child {
		border-top: none;
		border-left-color: var(--avs-akzent);
	}

	.avs-schritt__nummer {
		margin-bottom: var(--avs-abstand-2);
	}
}

/* --- Telefon (bis 640px) ------------------------------------------------ */

@media (max-width: 639px) {

	/* Grosse Ueberschriften eine Stufe zurueck. */
	.avs-hero h1 {
		font-size: clamp(1.875rem, 7.5vw, 2.5rem);
	}

	.avs-hero__lead {
		font-size: var(--avs-groesse-m);
	}

	/* Knoepfe volle Breite: auf dem Telefon die verlaesslichere
	   Trefferflaeche als zwei schmale Elemente nebeneinander. */
	.avs-hero__aktionen {
		flex-direction: column;
		align-items: stretch;
	}

	.avs-knopf {
		justify-content: center;
		min-height: 3rem;
	}

	.avs-hero__belege {
		flex-direction: column;
		gap: var(--avs-abstand-3);
	}

	.avs-hero__motiv svg {
		max-width: 300px;
	}

	/* Innenabstaende der Karten zurueckgenommen – sonst bleibt fuer
	   den Text kaum Breite uebrig. */
	.avs-karte,
	.avs-kachel,
	.avs-kontakt__box {
		padding: var(--avs-abstand-5) var(--avs-abstand-4);
	}

	.avs-kopf {
		margin-bottom: var(--avs-abstand-6);
	}

	.avs-kopf__lead {
		font-size: var(--avs-groesse-m);
	}

	/* Staedteliste: kleinere Marken, damit mehr Orte pro Zeile passen. */
	.avs-staedte li {
		padding: var(--avs-abstand-1) var(--avs-abstand-3);
	}

	/* Tabellen laufen ueber, statt die Seite zu sprengen. */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* --- Sehr schmal (bis 380px) -------------------------------------------- */

@media (max-width: 379px) {

	.avs-hero h1 {
		font-size: 1.75rem;
	}

	.avs-eyebrow {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}

	.avs-kachel__icon .avs-icon,
	.avs-dienst__icon .avs-icon,
	.avs-schritt__icon .avs-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* --- Zeigegeraet ohne Hover --------------------------------------------- */

/* Auf Touchgeraeten bleibt ein Hover-Zustand nach dem Antippen haengen.
   Die Bewegungseffekte gelten deshalb nur fuer echte Zeigegeraete. */
@media (hover: none) {

	.avs-kachel:hover {
		transform: none;
		box-shadow: var(--avs-schatten-1);
	}

	.avs-knopf--stark:hover .avs-icon {
		transform: none;
	}
}

/* --- Grosse Bildschirme ------------------------------------------------- */

@media (min-width: 1600px) {

	/* Bildmotive duerfen mitwachsen, der Text nicht: laengere Zeilen
	   lesen sich schlechter, nicht besser. */
	.avs-hero__raster {
		max-width: var(--avs-breite-weit);
	}
}