/**
 * Fussbereich adhsgruppe.ch.
 *
 * Dunkler Abschluss in --s-ink, weil der Fussbereich viele Links traegt: Auf
 * dunklem Grund ordnen sich die Spalten ruhiger, und das Petrol des Hauses
 * (--s-bright) leuchtet darauf als Hover-Farbe, was auf hellem Grund nicht
 * funktioniert.
 *
 * @package twentytwentyone-child
 */

.adhs-fuss {
	--f-grund: #1c2b28;
	--f-text: #ccd8d5;
	--f-hell: #ffffff;
	--f-leise: #8fa5a1;
	--f-akzent: #06a893;
	--f-linie: rgba(255, 255, 255, 0.13);

	background: var(--f-grund);
	color: var(--f-text);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 2.5rem) 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

.adhs-fuss a {
	color: var(--f-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.adhs-fuss a:hover,
.adhs-fuss a:focus-visible {
	color: var(--f-akzent);
	border-bottom-color: currentColor;
}

.adhs-fuss a:focus-visible {
	outline: 2px solid var(--f-akzent);
	outline-offset: 3px;
}

.adhs-fuss__oben {
	width: min(1240px, 100%);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(15rem, 19rem) 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------- Marke */

.adhs-fuss__name {
	margin: 0 0 0.3em;
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--f-hell);
	letter-spacing: -0.01em;
}

.adhs-fuss__claim {
	margin: 0 0 1.4em;
	color: var(--f-leise);
	max-width: 24em;
}

.adhs-fuss__adresse {
	margin: 0 0 1.5em;
	font-style: normal;
}

.adhs-fuss__hinweis {
	color: var(--f-leise);
}

.adhs-fuss__wege {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

.adhs-fuss .adhs-fuss__knopf {
	display: inline-block;
	padding: 0.62em 1.25em;
	border: 2px solid var(--f-akzent);
	border-radius: 2px;
	background: var(--f-akzent);
	color: #08211d;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.2;
}

.adhs-fuss .adhs-fuss__knopf:hover,
.adhs-fuss .adhs-fuss__knopf:focus-visible {
	background: var(--f-hell);
	border-color: var(--f-hell);
	color: #08211d;
}

.adhs-fuss .adhs-fuss__knopf--offen {
	background: transparent;
	color: var(--f-akzent);
}

.adhs-fuss .adhs-fuss__knopf--offen:hover,
.adhs-fuss .adhs-fuss__knopf--offen:focus-visible {
	background: var(--f-akzent);
	color: #08211d;
}

/* -------------------------------------------------------------- Spalten */

.adhs-fuss__spalten {
	display: grid;
	/* Drei Spalten, nicht vier: «Über die Praxis» hat nur zwei Eintraege und
	   wirkte als eigene Spalte verloren. Sie sitzt jetzt unter «Selbst
	   weiterlesen» in derselben Spalte.
	   minmax(0, 1fr) laesst lange Beschriftungen umbrechen, statt die Spalte zu
	   sprengen - mit auto-fit erzwang die erste Rubrik sonst einen Umbruch. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	align-content: start;
}

/* Die ersten beiden Rubriken reichen ueber beide Zeilen, die dritte und vierte
   teilen sich die letzte Spalte. Ohne das Platzieren landete die vierte Rubrik
   unter der ersten, weil das Raster zeilenweise fuellt. */
@media (min-width: 1151px) {
	.adhs-fuss__spalte:nth-child(1),
	.adhs-fuss__spalte:nth-child(2) {
		grid-row: 1 / span 2;
	}

	.adhs-fuss__spalte:nth-child(3) {
		grid-column: 3;
		grid-row: 1;
	}

	.adhs-fuss__spalte:nth-child(4) {
		grid-column: 3;
		grid-row: 2;
	}
}

.adhs-fuss__rubrik {
	margin: 0 0 0.9em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--f-linie);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--f-hell);
}

/* Block-Widgets bringen ihre Ueberschrift als Heading-Block mit, nicht ueber
   before_title. Darum gelten die Rubrik-Stile auch fuer Ueberschriften, die in
   einem Widget stecken - sonst saehe eine gepflegte Spalte anders aus als eine
   Standardspalte. Dasselbe fuer Listen und Absaetze aus Gutenberg. */
.adhs-fuss__spalte :is(h2, h3, h4),
.adhs-fuss__spalte .wp-block-heading {
	margin: 0 0 0.9em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--f-linie);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--f-hell);
}

.adhs-fuss__spalte p {
	margin: 0 0 0.6em;
}

.adhs-fuss__spalte p:last-child {
	margin-bottom: 0;
}

.adhs-fuss__spalte ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adhs-fuss__spalte li {
	margin-bottom: 0.55em;
	line-height: 1.4;
}

.adhs-fuss__spalte li:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- Fusszeile */

.adhs-fuss__unten {
	width: min(1240px, 100%);
	margin-inline: auto;
	padding: 1.2rem 0 1.5rem;
	border-top: 1px solid var(--f-linie);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 1.5rem;
	font-size: 0.88rem;
	color: var(--f-leise);
}

.adhs-fuss__recht,
.adhs-fuss__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.4rem;
}

.adhs-fuss__recht p,
.adhs-fuss__urheber {
	margin: 0;
}

.adhs-fuss__traeger,
.adhs-fuss__urheber {
	color: var(--f-leise);
}

.adhs-fuss__urheber a {
	color: var(--f-leise);
}

.adhs-fuss__urheber a:hover,
.adhs-fuss__urheber a:focus-visible {
	color: var(--f-akzent);
}

.adhs-fuss__rechtstexte {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Das Eltern-Theme haengt eigene Abstaende und eine Trennlinie an den
   Fussbereich; beides wuerde hier doppelt wirken. */
.site-footer {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}


@media (max-width: 1150px) {
	.adhs-fuss__spalten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.adhs-fuss__oben {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.adhs-fuss__spalten {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adhs-fuss a,
	.adhs-fuss .adhs-fuss__knopf {
		transition: none;
	}
}

/* ============================================================ Leiste oben
   Dieselben Nachweise wie unten, aber ueber dem Kopfbereich - dort werden sie
   gesehen, bevor jemand die Seite verlaesst. Dunkel wie der Fussbereich, damit
   Seitenanfang und Seitenende zusammengehoeren.

   Auf schmalen Schirmen scrollt die Liste seitlich statt vierzeilig umzubrechen:
   Vier Zeilen ueber der Markenzeile wuerden den eigentlichen Seitenanfang
   verdraengen. -webkit-overflow-scrolling fuer weiches Wischen in iOS Safari. */

.adhs-leiste {
	/* Gleicher Grund wie der Kopfbereich (#d9dfe0, gesetzt in style.css fuer
	   #masthead) und keine Trennlinie: Die Leiste soll als oberste Zeile des
	   Kopfbereichs gelesen werden, nicht als eigener Balken. */
	background: #d9dfe0;
	color: #1c2b28;
	font-size: 0.82rem;
	line-height: 1.4;
}

.adhs-leiste a {
	color: #1c2b28;
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 43, 40, 0.28);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.adhs-leiste a:hover,
.adhs-leiste a:focus-visible {
	color: #00655a;
	border-bottom-color: #00655a;
}

.adhs-leiste a:focus-visible {
	outline: 2px solid #00655a;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.adhs-leiste a {
		transition: none;
	}
}

.adhs-leiste__liste {
	width: min(1240px, 100%);
	margin: 0 auto;
	padding: 0.55rem clamp(1.2rem, 4vw, 2.5rem);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.5rem;
}

.adhs-leiste__liste li {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	white-space: nowrap;
}

/* Haken als Zeichen fuer «belegt», gleiche Form wie im Fussbereich. */
.adhs-leiste__liste li::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.28em;
	border-left: 2px solid #00655a;
	border-bottom: 2px solid #00655a;
	transform: rotate(-45deg) translateY(-0.1em);
}

/* Grenze bei 1150px, nicht bei 900: Die vier Nachweise brauchen rund 1000px
   und brachen bei 1024px auf zwei Zeilen um - die Leiste war dort 60px statt
   37px hoch. Seitliches Scrollen ist die ruhigere Loesung als ein Umbruch. */
@media (max-width: 1150px) {
	.adhs-leiste__liste {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.adhs-leiste__liste::-webkit-scrollbar {
		display: none;
	}
}

@media print {
	.adhs-leiste {
		display: none;
	}
}