/**
 * Einheitlicher Stil: Die Unterseiten (Bereich .tw) übernehmen die Werte der Startseite.
 * Wird nach main.css und pages.css geladen. Zum Rückgängigmachen den Block in inc/setup.php entfernen.
 */

/* Schrift und Fliesstext. */
.tw {
	background-color: transparent;
	font-family: var(--font-sans);
}

.tw .font-body-sm,
.tw .font-body-md,
.tw .font-body-lg {
	font-family: var(--font-sans);
}

.tw .text-body-lg {
	font-size: var(--font-body);
	line-height: 1.7;
}

.tw .text-body-md {
	font-size: var(--font-body-sm);
	line-height: 1.7;
}

.tw .text-on-surface-variant {
	color: var(--color-on-surface-variant);
}

.tw .text-on-surface {
	color: var(--color-on-surface);
}

.tw .text-primary {
	color: var(--color-on-surface);
}

/* Überschriften. */
.tw :is(h1, h2, h3, h4).text-primary,
.tw :is(h1, h2, h3, h4).text-on-surface {
	color: #fff;
}

.tw :is(h1, h2, h3, h4) {
	font-weight: 700;
}

.tw h2.text-headline-md,
.tw h2.text-headline-lg {
	font-size: var(--font-display-2xl);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.tw h3.text-headline-md,
.tw h3.text-headline-lg {
	font-size: var(--font-display-xl);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.tw :is(h2, h3).text-headline-sm:not([class*="lg:text"]) {
	font-size: 1.125rem;
	line-height: 1.4;
	letter-spacing: 0;
}

/* Kleine Überschriften als Kapsel. */
.tw .juma-kapsel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(0, 242, 254, 0.3);
	border-radius: 9999px;
	background: rgba(8, 51, 68, 0.4);
}

/* Buttons. */
.tw a.bg-primary-container:not(.rounded),
.tw a.bg-gradient-to-r,
.tw button.bg-gradient-to-r {
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: 0.75rem;
	background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary));
	color: var(--color-on-primary);
	font-family: var(--font-sans);
	font-size: var(--font-body-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: var(--glow-cyan);
}

.tw a.rounded-lg[class*="bg-surface-container"] {
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--glass-border);
	border-radius: 0.75rem;
	background: var(--glass-bg);
	color: #fff;
	font-family: var(--font-sans);
	font-size: var(--font-body-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

/* Ecken der Karten und Innenflächen. */
.tw .rounded-2xl,
.tw .rounded-xl {
	border-radius: 1rem;
}

.tw .rounded-lg {
	border-radius: 0.5rem;
}

.tw .rounded {
	border-radius: 0.375rem;
}

/* Hintergrund: wie auf der Startseite scheint der Seitenhintergrund durch. */
.tw.cyber-grid {
	background-image: none;
}

.tw .bg-surface {
	background-color: var(--color-surface-container-low);
}

.tw > .bg-surface,
.tw > main.bg-surface,
.tw section.bg-surface {
	background-color: transparent;
}

/* Der Seitenhintergrund bringt das Leuchten schon mit, abgeschnittene Flächen ergäben eine Kante. */
.hero-page .tw .w-full > .absolute[class*=" blur-"] {
	display: none;
}

.hero.hero--sub::after {
	display: none;
}

/* Abstände zwischen den Abschnitten. */
.tw section.py-space-xl {
	padding-block: 4rem;
}

.hero-page > .cta-banner {
	margin-block: var(--section-gap);
}

/* Leistungsseiten: Abschnitte bündig mit dem Hero. */
.section > .container {
	padding-inline: 0;
}

/* Dienstleistungen: Bildtext steht über dem Hinweis-Kästchen. */
.tw .juma-bildtext {
	bottom: 6.5rem;
}

/* Das Kästchen bleibt innerhalb des Bildes und schliesst mit dessen Rändern ab. */
.tw .juma-bildkasten {
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	max-width: none;
}

/* Unter dieser Breite ist das Kästchen höher und liesse dem Bildtext keinen Platz mehr. */
@media (max-width: 89.99rem) {
	.tw .juma-bildtext {
		display: none;
	}
}

/* Auf dem Handy würde das Kästchen das niedrige Bild verdecken, darum steht es darunter. */
@media (max-width: 47.99rem) {
	.tw .juma-bildkasten {
		position: static;
		margin-top: 0.75rem;
	}
}

/* Kontakt: Die Formular-Karte ist so hoch wie die linke Spalte, das Beschreibungsfeld nimmt den Platz auf. */
@media (min-width: 64rem) {
	.tw .juma-kontakt-raster {
		align-items: stretch;
	}

	.tw .juma-kontakt-formular,
	.tw .juma-kontakt-formular > div,
	.tw .juma-kontakt-formular form {
		display: flex;
		flex-direction: column;
	}

	.tw .juma-kontakt-formular > div,
	.tw .juma-kontakt-formular form,
	.tw .juma-kontakt-beschreibung,
	.tw .juma-kontakt-beschreibung textarea {
		flex: 1 1 auto;
	}
}

/* Kontakt: Karte gedämpft wie auf Über uns, dort übernimmt das die Fläche über dem Bild. */
.tw [data-alt^="Kartenausschnitt"] {
	filter: brightness(0.5) saturate(0.7);
}

/* Galerie: Bilder beginnen in jeder Reihe oben bündig, die Textfläche gleicht unterschiedliche Textlängen aus. */
.tw .gallery-card {
	justify-content: flex-start;
}

.tw .gallery-card > :last-child {
	flex: 1 1 auto;
}

/* Kontakt: Das Datei-Feld bleibt über dem Symbol, das sich beim Überfahren vergrössert und sonst den Klick abfängt. */
.tw #juma-fotos {
	z-index: 1;
}

/* Glas-Effekt nur im Kopfbereich, über dunklem Grund sieht man ihn sonst kaum und er bremst das Scrollen. */
*:not(.site-nav-wrap):not(.topbar):not(.site-nav-mobile) {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* Sanfter Übergang zwischen den Seiten, nicht auf dem iPhone: Dort blieben Teile der Seite leer. */
@supports not (-webkit-touch-callout: none) {
	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}
	}
}

/* Abschnitte im Flex-Container nehmen die volle Breite ein. */
.tw section.max-w-7xl {
	width: 100%;
}

/* Preise: Hinweise gut sichtbar, Karte im Umzugsbereich mit Symbol neben dem Titel. */
.tw div.juma-preishinweis {
	border: 1px solid var(--glass-border);
	background: var(--color-surface-container);
}

.tw .juma-hinweiskarte {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.75rem;
}

.tw .juma-hinweiskarte > .flex-col {
	display: contents;
}

.tw .juma-hinweiskarte p {
	grid-column: 1 / -1;
	margin-top: 0.75rem;
}

/* Kontakt: Kopfbereich ohne harte Kante, Kopfzeile der Karte darf umbrechen. */
.tw section.juma-kontakt-kopfbereich {
	background: transparent;
}

.tw .juma-kontakt-kopf {
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Vorschaltbare Leisten ohne sichtbaren Rollbalken. */
.tw .overflow-x-auto {
	scrollbar-width: none;
}

.tw .overflow-x-auto::-webkit-scrollbar {
	display: none;
}

/* Handy. */
@media (max-width: 47.99rem) {
	:root {
		--section-gap: 3.5rem;
		--section-gap-lg: 3.5rem;
	}

	.site-main,
	.hero-page {
		padding-top: calc(var(--header-offset) + 1.5rem);
	}

	.tw section.py-space-xl {
		padding-block: 1.75rem;
	}

	.tw > main {
		padding-top: 5.5rem;
	}

	.tw .juma-kontakt-kopfbereich {
		padding-block: 1rem;
	}

	.tw .juma-kontakt-deko {
		display: none;
	}

	/* Filter der Galerie sauber in zwei Spalten. */
	.tw #filter-bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.tw #filter-bar .filter-btn {
		width: 100%;
		padding-inline: 0.5rem;
		text-align: center;
		font-size: 0.6875rem;
	}

	/* Sprungleiste der Preise umbrechen statt seitlich scrollen. */
	.tw .overflow-x-auto {
		flex-wrap: wrap;
		overflow: visible;
	}

	/* Zeilen mit Text und Preis dürfen auf schmalen Handys umbrechen. */
	.tw .justify-between {
		flex-wrap: wrap;
		column-gap: 0.75rem;
		row-gap: 0.25rem;
	}

	.tw .juma-hinweiskarte {
		grid-template-columns: auto minmax(0, 1fr);
		overflow-wrap: anywhere;
	}

	.tw .juma-bildkasten > div {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Spalten dürfen schmaler werden als ihr Inhalt. */
	.tw .grid > *,
	.tw .flex > * {
		min-width: 0;
	}

	.hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero__stat,
	.hero__stat-body,
	.moving__content,
	.moving__price,
	.moving__price-card {
		min-width: 0;
	}

	.moving__eyebrow,
	.moving__title,
	.moving__check-body {
		overflow-wrap: anywhere;
	}

	.moving__eyebrow {
		max-width: 100%;
	}

	.moving__price-head {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	/* Umzugspreise: In der verschachtelten Karte fehlt die Breite, der Preis steht darum unter dem Text. */
	.moving__inner,
	.moving__price-card {
		padding: 1rem;
	}

	.moving__price-row {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.moving__price-row-left,
	.moving__price-row-right {
		flex: 1 1 100%;
	}

	.moving__price-row-right {
		padding-left: 2.125rem;
		text-align: left;
	}

	.moving__price-note {
		display: none;
	}
}

/* Sehr schmale Handys. */
@media (max-width: 23rem) {
	.tw .text-headline-md,
	.tw .text-headline-lg {
		font-size: 1.5rem;
		overflow-wrap: anywhere;
	}

	.tw .p-space-lg {
		padding: 1rem;
	}
}

/* iPhone: Dort blieben Teile des Kopfbereichs leer, darum ohne aufwendige Effekte und mit eigener Ebene für den Text. */
@supports (-webkit-touch-callout: none) {
	.site-nav-wrap,
	.topbar,
	.site-nav-mobile {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: #111c30;
	}

	.site-bg__noise {
		display: none;
	}

	.hero__media-glow {
		filter: none;
		opacity: 0.12;
	}

	.text-glow-cyan {
		text-shadow: none;
	}

	.hero__badge-dot {
		animation: none;
	}

	.hero__content {
		transform: translateZ(0);
	}
}

/* Flächen und Rahmen: Werte der Startseite (aus pages.css abgeleitet). */
.tw .border-outline-variant\/30 { border-color:rgba(45,66,99,.3) }
.tw .border-outline-variant\/40 { border-color:rgba(45,66,99,.4) }
.tw .border-outline-variant\/50 { border-color:rgba(45,66,99,.5) }
.tw .border-outline-variant\/60 { border-color:rgba(45,66,99,.6) }
.tw .border-outline-variant\/80 { border-color:rgba(45,66,99,.8) }
.tw .bg-surface-container { background-color:rgb(11 21 38/1) }
.tw .bg-surface-container-high { background-color:rgb(18 30 51/1) }
.tw .bg-surface-container-high\/60 { background-color:rgba(18,30,51,.6) }
.tw .bg-surface-container-high\/70 { background-color:rgba(18,30,51,.7) }
.tw .bg-surface-container-high\/80 { background-color:rgba(18,30,51,.8) }
.tw .bg-surface-container-high\/90 { background-color:rgba(18,30,51,.9) }
.tw .bg-surface-container-highest { background-color:rgb(23 39 66/1) }
.tw .bg-surface-container-highest\/90 { background-color:rgba(23,39,66,.9) }
.tw .bg-surface-container-low { background-color:rgb(9 17 32/1) }
.tw .bg-surface-container-low\/60 { background-color:rgba(9,17,32,.6) }
.tw .bg-surface-container-low\/70 { background-color:rgba(9,17,32,.7) }
.tw .bg-surface-container-low\/80 { background-color:rgba(9,17,32,.8) }
.tw .bg-surface-container-low\/90 { background-color:rgba(9,17,32,.9) }
.tw .bg-surface-container-low\/95 { background-color:rgba(9,17,32,.95) }
.tw .bg-surface-container-lowest { background-color:rgb(4 8 16/1) }
.tw .bg-surface-container-lowest\/50 { background-color:rgba(4,8,16,.5) }
.tw .bg-surface-container-lowest\/60 { background-color:rgba(4,8,16,.6) }
.tw .bg-surface-container-lowest\/65 { background-color:rgba(4,8,16,.65) }
.tw .bg-surface-container-lowest\/80 { background-color:rgba(4,8,16,.8) }
.tw .bg-surface-container-lowest\/85 { background-color:rgba(4,8,16,.85) }
.tw .bg-surface-container-lowest\/90 { background-color:rgba(4,8,16,.9) }
.tw .bg-surface-container\/50 { background-color:rgba(11,21,38,.5) }
.tw .bg-surface-container\/60 { background-color:rgba(11,21,38,.6) }
.tw .bg-surface-container\/70 { background-color:rgba(11,21,38,.7) }
.tw .bg-surface-container\/80 { background-color:rgba(11,21,38,.8) }
.tw .bg-surface-container\/90 { background-color:rgba(11,21,38,.9) }
.tw .hover\:bg-surface-container:hover { background-color:rgb(11 21 38/1) }
.tw .hover\:bg-surface-container-high:hover { background-color:rgb(18 30 51/1) }
.tw .hover\:bg-surface-container-highest:hover { background-color:rgb(23 39 66/1) }
.tw .hover\:bg-surface-container-lowest:hover { background-color:rgb(4 8 16/1) }