/*
 * Ergänzungen für die Unterseiten-Struktur (nach style.css eingebunden).
 * Das bisherige Design bleibt unverändert – hier stehen nur die Anpassungen.
 */

/* Kacheltitel: früher <h1>, jetzt <span> (nur noch eine H1 pro Seite) – gleiches Aussehen */
.gallery-item .title .kachel-titel {
	display: block;
	color: #fff;
	line-height: 1;
	font-weight: 500;
}

/* Kachelbilder sind jetzt echte Links – Bild im Link wie bisher positionieren */
.gallery-item .thumbnail a {
	display: block;
	height: 100%;
}
.gallery-item .thumbnail a > img {
	max-width: 288px;
	position: absolute;
}
.gallery-trigger.thumbnail a:focus-visible,
.gallery-trigger-close a:focus-visible {
	outline: 3px solid #D28A3C;
	outline-offset: -3px;
}

/* Überschrift links im aufgeklappten Bereich: jetzt <h1>/<h2>, Aussehen wie bisher */
h1.col_title,
h2.col_title {
	font-size: inherit;
	font-weight: 500;
}
.col_title .col_ort {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.3;
	text-transform: none;
	color: #555;
}

/* Kurzer Einleitungstext auf der Startseite */
.startseite-text {
	max-width: 616px;
	margin: 20px auto 40px;
	padding: 0 20px;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}
.startseite-text h1 {
	font-size: 22px;
	margin-bottom: 12px;
}
.startseite-text p {
	margin-bottom: 10px;
}
.startseite-text a {
	color: #D28A3C;
}

/* Fußzeile mit Adresse und Textlinks (hilft Google und Screenreadern) */
.fusszeile {
	margin: 40px 20px 30px;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	color: #555;
}
.fusszeile p,
.fusszeile a {
	color: #555;
}
.fusszeile-links a {
	display: inline-block;
	margin: 0 8px;
}

/* Online-Terminvergabe: Link unter dem eingebetteten Fenster */
.otr-link {
	font-size: 14px;
	margin: 10px 0 20px;
}

/* Spam-Schutzfeld im Kontaktformular unsichtbar */
.hp-feld {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Während Inhalte nachgeladen werden */
body.laedt,
body.laedt .gallery-trigger {
	cursor: progress;
}

/* Online-Terminvergabe (iFrame von TheraConnect/sovd.cloud)
   - startet kompakt (nur Startseite der Buchung), wächst nach dem ersten Klick für die Leistungsliste
   - "multiply" färbt den weißen Hintergrund des iFrames im Grau der Seite ein */
.gallery-expander-contents iframe.otr {
	display: block;
	width: 100%;
	max-width: 616px;
	height: 420px;
	border: 0;
	mix-blend-mode: multiply;
	transition: height .3s ease;
}
.gallery-expander-contents iframe.otr.otr-gross {
	height: 1150px;
}
@media (max-width: 655px) {
	.gallery-expander-contents iframe.otr {
		height: 560px;
	}
	.gallery-expander-contents iframe.otr.otr-gross {
		height: 1350px;
	}
}