/* Unterseiten (Preise, FAQ, Blog): responsiv, im Stil der Startseite.
   Überschreibt gezielt die globalen Regeln aus style.css. */

body.page {
	position: static;
	min-height: 100%;
	text-align: left;
}

.page p, .page a, .page span, .page li, .page small {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #020303;
}

/* Kopfzeile: Menü mittig, an derselben Stelle und in derselben Größe wie auf der Startseite (.home-nav) */
.page-header {
	position: relative;
	display: flex;
	justify-content: center;
	/* style.css gibt jedem <header> die Höhe des Startseiten-Heros */
	min-height: 0;
	max-height: none;
	padding: 26px 24px 24px;
	background: #0d0e0e;
}

.page-logo { position: absolute; top: 7px; left: 24px; display: block; line-height: 0; }
.page-logo img { width: auto; height: 58px; }

.page-nav { display: flex; justify-content: center; gap: 2.4em; font-size: 17px; }

.page .page-nav a {
	font-family: 'Gin-Rough', Georgia, serif;
	font-size: 1em;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.page .page-nav a:hover { color: #c9a352; }

.page .page-nav a.page-nav-book {
	margin-top: -0.35em;
	padding: 0.3em 0.9em;
	border: 1px solid #c9a352;
	color: #c9a352;
}

.page .page-nav a.page-nav-book:hover { background: #c9a352; color: #0d0e0e; }

/* Titelbereich */
.page-hero {
	position: relative;
	padding: 56px 24px 150px;
	text-align: center;
	background: #0d0e0e;
}

.page .page-hero .border-1 { left: 0; height: 110px; }

.page .page-kicker,
.page .page-kicker a {
	font-family: 'Gin-Rough', Georgia, serif;
	font-size: 15px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #c9a352;
}

.page-hero h1 {
	display: block;
	max-width: 900px;
	margin: 10px auto 0;
	font-size: 54px;
	line-height: 1.1;
	color: #fff;
}

.page-hero h1:before { display: none; }

.page-hero h1:after {
	margin-top: 26px;
	margin-bottom: 22px;
	background-image: url('../images/deco_white.svg');
}

.page .page-lead {
	max-width: 620px;
	margin: 0 auto;
	font-size: 18px;
	color: #d9d6cf;
}

/* Titelbereich mit Foto: Bild im Hintergrund, abgedunkelt mit warmem Goldschimmer; Kopfzeile liegt darüber */
.page-hero.has-photo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 640px;
	padding-top: 150px;
}

.page-hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #0d0e0e center 40% / cover no-repeat;
}

.page-hero-photo:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		radial-gradient(ellipse 60% 70% at 50% 45%, rgba(201, 163, 82, 0.2), rgba(201, 163, 82, 0) 70%),
		linear-gradient(180deg, rgba(13, 14, 14, 0.86) 0%, rgba(13, 14, 14, 0.55) 38%, rgba(13, 14, 14, 0.76) 100%);
}

.page-hero.has-photo .page-kicker,
.page-hero.has-photo h1,
.page-hero.has-photo .page-lead { position: relative; z-index: 1; }

.page-hero.has-photo h1,
.page-hero.has-photo .page-lead { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75); }

.page-photo .page-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	background: transparent;
}

/* Inhalt */
.page-main {
	max-width: 780px;
	margin: 0 auto;
	padding: 30px 24px 60px;
}

.page-main h2 {
	margin: 44px 0 14px;
	font-size: 28px;
	line-height: 1.2;
	text-align: left;
	color: #020303;
}

.page-main h2:before { display: none; }

.page-main h2:after {
	width: 64px;
	height: 2px;
	margin: 12px 0 0;
	background: #b8923f;
}

.page-main h3 {
	display: block;
	margin: 26px 0 8px;
	font-size: 21px;
	line-height: 1.25;
	text-align: left;
	color: #020303;
}

.page-main p { margin-bottom: 16px; }
.page .page-main strong, .page .page-main em { font-family: inherit; font-size: inherit; color: inherit; }
.blog-related { margin-top: 50px; padding-top: 6px; border-top: 1px solid rgba(2, 3, 3, 0.1); }
.page-main ul { margin: 0 0 18px 22px; }
.page-main li { margin-bottom: 6px; }
.page .page-main a { text-decoration: underline; text-decoration-color: #b8923f; text-underline-offset: 3px; }
.page .page-main a:hover { color: #8f6e25; }

.page .page-note, .page .page-more { margin-top: 34px; font-size: 15px; color: #515151; }
.page .page-more { margin-top: 12px; }

/* Preisliste */
.price-list { list-style: none; margin: 0 !important; }

.price-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid rgba(2, 3, 3, 0.1);
}

.page .price-name { font-size: 18px; font-weight: 600; }
.page .price-name small { display: block; font-size: 14px; font-weight: 400; color: #6b6b6b; }
.price-dots { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted rgba(2, 3, 3, 0.35); transform: translateY(-5px); }

.page .price-value {
	/* Systemschrift: Gin-Rough hat kein sauberes Euro-Zeichen */
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: #8f6e25;
}

/* Blog */
.blog-card { padding: 6px 0 26px; border-bottom: 1px solid rgba(2, 3, 3, 0.1); }
.page .blog-card h2 a { font-family: 'Gin-Rough', Georgia, serif; font-size: 1em; line-height: 1.2; text-decoration: none; }
.page .blog-card .blog-more { font-weight: 600; }

/* Termin-Block */
.page-cta {
	padding: 96px 24px 100px;
	text-align: center;
	/* Kronleuchter-Foto, abgedunkelt: Mitte dunkler für die Schrift, Ränder heller, darüber ein warmer Goldton */
	background:
		linear-gradient(180deg, rgba(13, 14, 14, 0.75) 0%, rgba(13, 14, 14, 0) 22%, rgba(13, 14, 14, 0) 78%, rgba(13, 14, 14, 0.75) 100%),
		radial-gradient(ellipse 46% 80% at 50% 50%, rgba(13, 14, 14, 0.86) 0%, rgba(13, 14, 14, 0.62) 70%, rgba(13, 14, 14, 0.5) 100%),
		linear-gradient(rgba(150, 112, 40, 0.22), rgba(150, 112, 40, 0.22)),
		url('../images/termin-bg.jpg') center 47% / cover no-repeat #0d0e0e;
}

.page-cta h2,
.page .page-cta p { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8); }
.page .page-call { background: rgba(13, 14, 14, 0.55); }

.page-cta h2 { font-size: 34px; line-height: 1.2; color: #c9a352; }
.page-cta h2:before { margin-bottom: 14px; }
.page-cta h2:after { margin-top: 18px; margin-bottom: 20px; }
.page .page-cta p { color: #d9d6cf; }

.page .page-call {
	display: inline-block;
	margin: 18px 0 22px;
	padding: 14px 34px;
	border: 1px solid #b8923f;
	font-family: 'Gin-Rough', Georgia, serif;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	color: #fff;
}

.page .page-call:hover { background: #b8923f; color: #0d0e0e; }

.page-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin: 18px 0 22px; }
.page .page-cta-actions .page-call { margin: 0; }
.page .page-call.page-book { background: #b8923f; color: #0d0e0e; }
.page .page-call.page-book:hover { background: #c9a352; }
.page .page-cta-info { font-size: 15px; }
.page-cta img.page-award-badge { display: block; width: 96px; height: 96px; margin: 6px auto 10px; padding: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 163, 82, 0.55), 0 8px 22px rgba(0, 0, 0, 0.6); }
.page .page-cta .page-award, .page .page-cta .page-award span { margin-bottom: 14px; font-size: 15px; letter-spacing: 0.06em; color: #c9a352; }

/* Fußzeile */
.page-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 22px 24px 90px;
}

.page .page-footer span, .page .page-footer a { font-size: 15px; color: #515151; }
.page .page-footer a:hover { color: #000; }

@media (max-width: 700px) {
	.page-hero { padding: 40px 20px 110px; }
	.page-hero.has-photo { min-height: 520px; padding-top: 120px; }
	.page-hero-photo { background-position: center 50%; }
	.page .page-hero .border-1 { height: 70px; }
	.page-hero h1 { font-size: 36px; }
	.page-main h2 { font-size: 24px; }
	.page .price-name { font-size: 16px; }
	.page .price-value { font-size: 18px; }
	.page .page-call { font-size: 24px; padding: 12px 22px; }
	.page-cta { padding: 70px 20px 74px; }
	.page-footer { flex-direction: column; text-align: center; }
}

/* Handy und Tablet hochkant: Menü wie auf der Startseite zweizeilig mittig, das kleine Logo entfällt */
@media (max-width: 900px) {
	.page-logo { display: none; }
	.page-header { padding: 14px 12px 14px; }
	.page-nav { flex-wrap: wrap; gap: 10px 13px; font-size: 14px; }
	.page .page-nav a { letter-spacing: 0.1em; }
	.page .page-nav a.page-nav-book { margin-top: -0.3em; }
}

@media (max-width: 350px) {
	.page-nav { gap: 8px 10px; font-size: 13px; }
}