@charset "UTF-8";
/* ===================================================
   Haut im Zentrum – unterseiten.css
   Für alle Seiten außer der Startseite (nach basis.css geladen):
   Behandlungsspektrum, Online-Terminvergabe, Impressum, Datenschutz.

   Jede Unterseite hat denselben Rahmen:
     <header class="unterseite__kopf">    Logo-Kachel + Titel-Kachel
     <main class="unterseite__inhalt">    Inhalts-Kacheln
     <footer class="unterseite__fuss">    Links
   Alle drei sind gleich breit und mittig.

   1. Seitenrahmen
   2. Kopf: Logo und Titel
   3. Textkacheln (Impressum, Datenschutz)
   4. Fußzeile
   5. Online-Terminvergabe (termin.html)
   6. Behandlungsspektrum (behandlungsspektrum.html)
   7. Tablet (bis 1280px)
   8. Mobil (bis 820px)
   =================================================== */


/* ---------------------------------------------------
   1. Seitenrahmen
   --------------------------------------------------- */
.unterseite {
	--unterseite-max: 960px;  /* größte Breite des Inhalts */
	--unterseite-rand: 25px;  /* Mindestabstand zum Fensterrand */
	background-color: var(--farbe-weiss);
}
/* Terminvergabe und Behandlungsspektrum haben mehr Inhalt nebeneinander */
.unterseite--breit {
	--unterseite-max: 1120px;
}

.unterseite__kopf,
.unterseite__inhalt,
.unterseite__fuss {
	width: min(var(--unterseite-max), 100% - 2 * var(--unterseite-rand));
	margin: 0 auto var(--kachel-abstand);
}


/* ---------------------------------------------------
   2. Kopf: Logo-Kachel (1 Teil) und Titel-Kachel (2 Teile)
   --------------------------------------------------- */
.unterseite__kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--kachel-abstand);
}

.unterseite__logo-kachel {
	display: flex;
	align-items: center;
	padding: 40px;
}
.unterseite__logo {
	display: block;
	width: auto;
	height: 140px;
}

/* Der Text steht in einem inneren <div>, damit die Abstände zwischen
   Dachzeile, Titel und Einleitung wie in normalem Fließtext wirken
   (in einem Flex-Container würden sie sich addieren) */
.unterseite__titel-kachel {
	display: flex;
	align-items: center;
	padding: 40px;
}
.unterseite__titel {
	margin: 0 0 4px;
	font-size: var(--schrift-titel);
	font-weight: 700;
}
.unterseite__einleitung {
	margin: 10px 0 0;
	max-width: 62ch;
	font-size: var(--schrift-gehoben);
	line-height: 1.6;
	color: var(--weiss-85);
}

/* Kleine Zeile in Großbuchstaben über einem Titel */
.dachzeile {
	margin: 0 0 4px;
	font-size: var(--schrift-dachzeile);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--farbe-nebel);
}


/* ---------------------------------------------------
   3. Textkacheln (Impressum, Datenschutz)
   Drei gleich breite Spalten. Breite Kacheln (--breit) nehmen
   zwei Spalten ein; Lücken füllen schmale Text- oder leere
   Farbkacheln (.leerkachel) – wie das Raster der Startseite.
   --------------------------------------------------- */
.textraster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kachel-abstand);
}
.textkachel {
	padding: 40px;
}
.textkachel--breit {
	grid-column: span 2;
}
.textkachel h2 {
	margin: 0 0 14px;
	font-size: 1em;
	font-weight: 700;
}
.textkachel > p {
	margin: 0 0 14px;
	max-width: 62ch;
	font-size: var(--schrift-text);
	line-height: 1.7;
}
.textkachel ul {
	margin: 0 0 14px;
	padding-left: 20px;
	max-width: 62ch;
	font-size: var(--schrift-text);
	line-height: 1.6;
}
.textkachel li {
	margin-bottom: 10px;
}
/* Kein Abstand nach dem letzten Element einer Kachel */
.textkachel > p:last-child,
.textkachel > ul:last-child,
.textkachel li:last-child {
	margin-bottom: 0;
}


/* ---------------------------------------------------
   4. Fußzeile
   --------------------------------------------------- */
.unterseite__fuss {
	padding: 20px 0 40px;
}


/* ---------------------------------------------------
   5. Online-Terminvergabe (termin.html)
   Drei Spalten: links (breit) Schritte und Einwilligung,
   rechts Sprechzeiten und Kontakt.
   --------------------------------------------------- */
.termin-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kachel-abstand);
}
.termin-buchung      { grid-column: 1 / 3; grid-row: 1; }
.termin-sprechzeiten { grid-column: 3 / 4; grid-row: 1; }
.termin-einwilligung { grid-column: 1 / 3; grid-row: 2; }
.termin-kontakt      { grid-column: 3 / 4; grid-row: 2; }

.termin-raster h2 {
	margin: 0 0 4px;
	font-size: 1em;
	font-weight: 700;
}

/* Kachel „In drei Schritten zum Termin“ */
.termin-buchung {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 36px 40px;
}
.termin-buchung h2 {
	font-size: var(--schrift-gross);
}
.termin-buchung__einleitung {
	margin: 6px 0 0;
	font-size: var(--schrift-gehoben);
	line-height: 1.6;
	color: var(--weiss-85);
}

.termin-schritte {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Desktop: Nummer über dem Text, damit der Text die volle
   Spaltenbreite bekommt (Tablet/Mobil: Nummer links) */
.termin-schritte__schritt {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--schrift-gehoben);
	line-height: 1.5;
}
.termin-schritte__nummer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--weiss-85);
	font-size: var(--schrift-text);
	font-weight: 700;
}
.termin-schritte__text {
	color: var(--weiss-82);
}

/* Kachel „Einwilligung“ mit Häkchen und Buchungs-Knopf */
.termin-einwilligung {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 36px 40px;
}
.termin-einwilligung .dachzeile {
	margin: 0;
}
.termin-einwilligung__info {
	margin: 0;
	max-width: 62ch;
	font-size: var(--schrift-info);
	line-height: 1.6;
	color: var(--weiss-85);
}

.termin-zustimmung {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border: 2px solid var(--weiss-28);
	font-size: var(--schrift-gehoben);
	line-height: 1.55;
	cursor: pointer;
}
.termin-zustimmung:has(input:checked) {
	border-color: var(--weiss-85);
}
.termin-zustimmung__feld {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--farbe-fjord);
	cursor: pointer;
}
.termin-zustimmung a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.termin-aktionen {
	display: flex;
	align-items: center;
	gap: 16px;
}
.termin-knopf {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 52px;
	padding: 0 28px;
	border: 2px solid var(--farbe-weiss);
	border-radius: 0;
	background-color: var(--farbe-weiss);
	color: var(--farbe-tiefsee);
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
}
.termin-knopf:hover,
.termin-knopf:focus {
	border-color: var(--farbe-himmel);
	background-color: var(--farbe-himmel);
	color: var(--farbe-tiefsee);
}
/* Gesperrt, solange das Häkchen fehlt (setzt js/termin.js).
   Muss NACH :hover stehen, damit es auch beim Darüberfahren gilt. */
.termin-knopf[aria-disabled="true"] {
	border: 2px dashed var(--weiss-35);
	background-color: transparent;
	color: var(--weiss-50);
	cursor: not-allowed;
}

.termin-hinweis {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--schrift-klein);
	line-height: 1.5;
	color: var(--farbe-himmel);
}
/* Schloss-Symbol nur im gesperrten Zustand */
.termin-hinweis svg {
	flex-shrink: 0;
	display: none;
}
.termin-hinweis--gesperrt svg {
	display: block;
}

/* Kacheln Sprechzeiten und Kontakt */
.termin-sprechzeiten,
.termin-kontakt {
	padding: 30px 32px;
}
.termin-sprechzeiten p,
.termin-kontakt p {
	margin: 0.4em 0 0;
	font-size: var(--schrift-gehoben);
	line-height: 1.6;
}
.termin-sprechzeiten .kleingedruckt,
.termin-kontakt .kleingedruckt {
	font-size: var(--schrift-fein);
}


/* ---------------------------------------------------
   6. Behandlungsspektrum (behandlungsspektrum.html)
   Sechs Spalten wie auf der Startseite. Jede Kachel ist je
   nach Textmenge 2, 3 oder 4 Spalten breit; jede Zeile ergibt
   zusammen 6. Farben zeilenweise als Paare (Tiefsee + Gras im
   Wechsel mit Fjord + Himmel), damit nie zwei gleiche Farben
   aneinanderstoßen – auch mobil nicht.
   --------------------------------------------------- */
.spektrum-raster {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--kachel-abstand);
}
.spektrum-kachel {
	display: flex;
	flex-direction: column;
	padding: 30px 32px;
}
.spektrum-kachel--breite-2 { grid-column: span 2; }
.spektrum-kachel--breite-3 { grid-column: span 3; }
.spektrum-kachel--breite-4 { grid-column: span 4; }

.spektrum-kachel h2 {
	margin: 0 0 10px;
	font-size: 1em;
	font-weight: 700;
}
.spektrum-kachel p {
	margin: 0;
	max-width: 58ch;
	font-size: var(--schrift-text);
	line-height: 1.6;
}
/* Link ganz unten in der Kachel */
.spektrum-kachel .pfeil-link {
	margin-top: auto;
	padding-top: 1em;
}


/* ===================================================
   7. Tablet (bis 1280px)
   =================================================== */
@media (max-width: 1280px) {
	.termin-buchung,
	.termin-einwilligung {
		padding: 30px 32px;
	}
	/* Schritte untereinander, damit sie in der schmaleren Kachel
	   nicht zu engen Spalten werden */
	.termin-schritte {
		flex-direction: column;
		gap: 16px;
	}
	.termin-schritte__schritt {
		flex-direction: row;
		gap: 14px;
	}
	.termin-schritte__inhalt {
		padding-top: 3px;
	}
	.termin-aktionen {
		flex-wrap: wrap;
	}

	.spektrum-kachel {
		padding: 26px;
	}
}


/* ===================================================
   8. Mobil (bis 820px): alle Kacheln untereinander
   =================================================== */
@media (max-width: 820px) {
	.unterseite {
		--unterseite-rand: 20px;
		margin: 20px 0;
	}

	.unterseite__kopf,
	.textraster {
		grid-template-columns: minmax(0, 1fr);
	}
	.unterseite__logo-kachel,
	.unterseite__titel-kachel,
	.textkachel {
		padding: 28px 24px;
	}
	.unterseite__logo {
		height: 100px;
	}
	.textkachel--breit {
		grid-column: auto;
	}
	/* Leere Farbkacheln gliedern nur das mehrspaltige Raster */
	.leerkachel {
		display: none;
	}
	.unterseite__fuss {
		padding: 16px 0 32px;
	}

	.termin-raster {
		display: flex;
		flex-direction: column;
	}
	.termin-buchung,
	.termin-einwilligung,
	.termin-sprechzeiten,
	.termin-kontakt {
		padding: 26px 24px;
	}
	.termin-aktionen {
		flex-direction: column;
		align-items: stretch;
	}
	.termin-knopf {
		width: 100%;
	}

	.spektrum-raster {
		grid-template-columns: minmax(0, 1fr);
	}
	.spektrum-kachel--breite-2,
	.spektrum-kachel--breite-3,
	.spektrum-kachel--breite-4 {
		grid-column: auto;
	}
	.spektrum-kachel {
		padding: 26px 24px;
	}
}