/*
 * 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);
	}
}

/* --- Datenband und angehobene Karte auf schmalen Bildschirmen ----------- */

/*
 * Auf dem Telefon war die Ueberlappung ein Fehler: Der Bildkopf ist
 * dort deutlich niedriger, die Karte schnitt in Telefonnummer und
 * Schaltflaeche. Ausserdem brach das Band dreispaltig um, wodurch
 * ein Feld allein in der zweiten Zeile stand und lange Woerter wie
 * "Wöchentlich" mitten im Wort getrennt wurden.
 *
 * Loesung: keine Ueberlappung, ein Feld pro Zeile, Wert und
 * Beschriftung nebeneinander statt untereinander. Das spart Hoehe
 * und macht jede Angabe in einem Blick lesbar.
 */

@media (max-width: 767px) {

	.avs-anhebung {
		margin-top: 0;
		padding: var(--avs-abstand-4) var(--avs-abstand-4) var(--avs-abstand-2);
		box-shadow: var(--avs-schatten-1);
	}

	.avs-bildkopf--mit-leiste {
		padding-bottom: clamp(2rem, 6vw, 3rem);
	}

	/* Ein Feld je Zeile, Wert links, Beschriftung rechts. */
	.avs-leiste {
		display: block;
		border-bottom: 0;
	}

	.avs-leiste li,
	.avs-anhebung .avs-leiste li,
	.avs-bildkopf .avs-leiste li {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--avs-abstand-4);
		min-width: 0;
		padding: var(--avs-abstand-3) 0;
		border-right: 0;
		border-bottom: 1px solid var(--avs-linie);
		text-align: left;
	}

	.avs-leiste li:last-child {
		border-bottom: 0;
	}

	.avs-leiste li + li {
		padding-left: 0;
	}

	.avs-leiste__wert {
		flex: none;
		font-size: 1.15rem;
		white-space: nowrap;
	}

	.avs-leiste__label {
		margin-top: 0;
		text-align: right;
		font-size: 0.62rem;
		line-height: 1.35;
	}

	/* Auf dunklem Grund die Trennlinie anpassen. */
	.avs-leiste--hell li,
	.avs-bildkopf .avs-leiste li {
		border-bottom-color: rgba(255, 255, 255, 0.16);
	}
}

/* --- Umbruch in Werten und Beschriftungen ------------------------------- */

/*
 * Werte werden nie getrennt. Ein "Wöchentli-ch" ueber zwei Zeilen
 * ist schlimmer als ein etwas kleinerer Grad.
 */
.avs-leiste__wert,
.avs-leiste__einheit {
	hyphens: manual;
	overflow-wrap: normal;
	word-break: keep-all;
}

@media (max-width: 400px) {
	.avs-leiste__wert {
		font-size: 1.05rem;
	}

	.avs-leiste__label {
		font-size: 0.58rem;
	}
}

/* --- Bildkopf auf dem Telefon ------------------------------------------- */

/*
 * Auf schmalen Bildschirmen bleibt im Bildkopf nur, was traegt:
 * Ueberschrift und die beiden Schaltflaechen. Der Fliesstext darunter
 * wiederholt ohnehin, was in den Abschnitten steht, kostet aber die
 * halbe Bildhoehe – und drueckt die Handlungsaufforderung nach unten
 * aus dem Sichtfeld.
 */

@media (max-width: 767px) {

	.avs-bildkopf__lead {
		display: none;
	}

	.avs-bildkopf h1 {
		margin-bottom: var(--avs-abstand-5);
		max-width: none;
	}

	/* Schaltflaechen nebeneinander statt gestapelt: zwei halbe
	   Breiten sparen eine Zeile und bleiben mit 48 Pixel Hoehe
	   sicher zu treffen. */
	.avs-bildkopf__aktionen,
	.avs-bildkopf__spalten .avs-bildkopf__aktionen {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--avs-abstand-2);
		min-width: 0;
		margin-bottom: var(--avs-abstand-3);
	}

	.avs-bildkopf__aktionen .avs-knopf {
		flex: 1 1 50%;
		min-width: 0;
		justify-content: center;
		text-align: center;
		padding-inline: var(--avs-abstand-3);
		font-size: 0.82rem;
		line-height: 1.25;
		min-height: 3rem;
	}

	/* Der Pfeil braucht auf halber Breite zu viel Platz. */
	.avs-bildkopf__aktionen .avs-knopf .avs-icon {
		display: none;
	}
}

@media (max-width: 400px) {
	.avs-bildkopf__aktionen .avs-knopf {
		font-size: 0.76rem;
		padding-inline: var(--avs-abstand-2);
	}
}