/* Blob-Bildstil: organische Form für Fotos, angelehnt an halpy.de */
.wp-block-image.is-style-blob img {
	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* Gepunktete Verbindungslinie zwischen den Prozessschritt-Kreisen (Startseite) */
.steps-connector {
	position: relative;
}
.steps-connector::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: repeating-linear-gradient(90deg, #0F6369 0 10px, transparent 10px 18px);
	opacity: 0.5;
}
@media (max-width: 760px) {
	.steps-connector::before { display: none; }
}

/* --- Design-Variante "Fable": redaktioneller Stil mit Linien statt Karten --- */

.rule-label {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #0F6369;
	margin-bottom: 2.5rem;
}
.rule-label .no {
	font-family: 'Fraunces', serif;
	font-size: 1rem;
	font-style: italic;
	letter-spacing: 0;
}
.rule-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(39, 39, 39, 0.16);
	align-self: center;
}
.rule-label.is-centered {
	justify-content: center;
}
.rule-label.is-centered::after {
	display: none;
}
.rule-label.is-centered::before {
	content: "";
	width: 3rem;
	height: 1px;
	background: #F59152;
	align-self: center;
}

.ghost-step {
	position: relative;
	padding-top: 4.4rem;
	border-top: 1px solid rgba(39, 39, 39, 0.16);
}
.ghost-step .ghost-num {
	position: absolute;
	top: 0.4rem;
	left: -0.4rem;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 500;
	font-size: 5.6rem;
	line-height: 1;
	color: #0F6369;
	opacity: 0.14;
	user-select: none;
	pointer-events: none;
}

.arch-photo img {
	border-radius: 160px 160px 16px 16px;
	object-fit: cover;
	width: 100%;
}

.circle-photo img {
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1;
	width: 100%;
	max-width: 440px;
	margin-left: auto;
	margin-right: 0;
	display: block;
}
@media (max-width: 760px) {
	.circle-photo img { margin-left: auto; margin-right: auto; max-width: 320px; }
}
.arch-photo-round img {
	border-radius: 999px 999px 20px 20px;
	object-fit: cover;
	width: 100%;
}
@media (max-width: 760px) {
	.arch-photo img { border-radius: 160px 160px 16px 16px; }
}

.city-name {
	font-family: 'Fraunces', serif;
	font-weight: 500;
	font-size: clamp(2.4rem, 4.5vw, 3.6rem);
	line-height: 1;
	display: block;
}

.faq-flat {
	border-top: 1px solid rgba(39, 39, 39, 0.16);
}
.faq-flat details {
	border-bottom: 1px solid rgba(39, 39, 39, 0.16);
}
.faq-flat summary {
	padding: 1.5rem 0.2rem;
	cursor: pointer;
	font-family: 'Fraunces', serif;
	font-weight: 500;
	font-size: 1.25rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.faq-flat summary::-webkit-details-marker { display: none; }
.faq-flat summary::after {
	content: "+";
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 1.6rem;
	color: #F59152;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.faq-flat details[open] summary::after { transform: rotate(45deg); }
.faq-flat details p { padding: 0 0.2rem 1.6rem; margin: 0; color: #5A564F; max-width: 58ch; }

.promise-col {
	border-left: 1px solid rgba(39, 39, 39, 0.16);
	padding: 0 2.2rem;
}
.promise-col:first-child { border-left: none; padding-left: 0; }
.promise-col h3 .tick {
	color: #F59152;
	margin-right: 0.4rem;
	font-family: 'Fraunces', serif;
	font-style: italic;
}
@media (max-width: 760px) {
	.promise-col {
		border-left: none;
		border-bottom: 1px solid rgba(39, 39, 39, 0.16);
		padding: 0 0 1.8rem;
	}
	.promise-col:last-child { border-bottom: none; }
}

.nav-caps a {
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kicker-line {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.kicker-line::before {
	content: "";
	width: 3rem;
	height: 1px;
	background: #F59152;
	flex-shrink: 0;
}

.attr-line {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.attr-line::before {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: #F59152;
	flex-shrink: 0;
}

footer a {
	color: rgba(255, 255, 255, 0.88);
}
footer a:hover {
	color: #FDECDD;
	text-decoration: underline;
}