/*
Theme Name: Treubel Sachverständigenpraxis
Author: Christoph Treubel
Description: Einseiter für die Sachverständigenpraxis Christoph Treubel. Schriften und Bilder liegen im Theme; es gibt keine Anfragen an fremde Server und keine Cookies für Besucher.
Version: 1.3.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: treubel-sv
*/

/* Aufbau: Ein Bild steht fest im Hintergrund. Darüber laufen weiße Blätter,
   zwischen denen das Bild als Fenster sichtbar bleibt. Jedes Blatt hat links
   seine Überschrift als Randtitel und rechts den Inhalt. */

@font-face { font-family: "SV Display"; src: url("assets/fonts/sv-display-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SV Display"; src: url("assets/fonts/sv-display-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SV Text"; src: url("assets/fonts/sv-text-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SV Text"; src: url("assets/fonts/sv-text-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "SV Text"; src: url("assets/fonts/sv-text-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--sv-ink: #16181D;
	--sv-text: #2A2D33;
	--sv-muted: #4A4F57;
	--sv-blue: #536D88;
	--sv-blue-deep: #3E546B;
	--sv-grey: #A3A6AB;
	--sv-line: #D5D9DE;
	--sv-soft: #F1F3F5;
	--sv-paper: #FFFFFF;
	--sv-display: "SV Display", "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
	--sv-textfont: "SV Text", Arial, Helvetica, sans-serif;
	--sv-w: 1080px;
	--sv-gutter: clamp(20px, 5vw, 48px);
	--sv-header-h: 76px;
	--sv-window: clamp(72px, 14vh, 150px);
	--sv-inset: max(var(--sv-gutter), calc((100% - var(--sv-w)) / 2));
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--sv-soft);
	scroll-behavior: smooth;
	scroll-padding-top: var(--sv-header-h);
	-webkit-text-size-adjust: 100%;
}
/* Angemeldet liegt die WordPress-Leiste über der Seite. */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--sv-header-h) + 32px); }

body.sv-site {
	margin: 0;
	font-family: var(--sv-textfont);
	font-size: 1.0625rem;
	line-height: 1.62;
	color: var(--sv-text);
	background: var(--sv-soft);
	overflow-wrap: break-word;
	/* Kurze Seiten: der Fuß steht trotzdem am unteren Rand. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body.sv-site.admin-bar { min-height: calc(100vh - 32px); }
.sv-site .sv-main { flex: 1 0 auto; }

.sv-site a { color: var(--sv-blue-deep); text-underline-offset: 0.18em; }
.sv-site a:hover { color: var(--sv-ink); }
.sv-site :focus-visible { outline: 2px solid var(--sv-blue-deep); outline-offset: 3px; }
.sv-site img { max-width: 100%; height: auto; }

.sv-skip {
	position: absolute;
	left: var(--sv-gutter);
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--sv-ink);
	color: #fff !important;
	text-decoration: none;
}
.sv-skip:focus { top: 12px; }

/* ---------- Hintergrundbild, steht fest ---------- */

.sv-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: var(--sv-soft);
	background-image: url("assets/img/hintergrund.svg");
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}
.sv-bg--photo { background-position: center; filter: saturate(0.75); }
.sv-bg--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.86) 45%, rgba(255, 255, 255, 0.4) 100%);
}

.sv-main, .sv-footer { position: relative; z-index: 1; }

/* ---------- Kopf ---------- */

.sv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sv-paper);
	border-bottom: 1px solid var(--sv-line);
}
.admin-bar .sv-header { top: 32px; }

.sv-header__inner {
	max-width: calc(var(--sv-w) + 2 * var(--sv-gutter));
	min-height: var(--sv-header-h);
	margin-inline: auto;
	padding-inline: var(--sv-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.sv-site .sv-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sv-ink);
	text-decoration: none;
}
.sv-brand__signet { flex: none; width: 34px; height: 41px; }
.sv-signet__psi { fill: var(--sv-blue); }
.sv-signet__par { fill: var(--sv-grey); }
.sv-brand__text { display: flex; flex-direction: column; }
.sv-brand__over { font: 400 0.8rem/1.25 var(--sv-display); letter-spacing: 0.03em; }
.sv-brand__name { font: 700 1.22rem/1.15 var(--sv-display); white-space: nowrap; }

.sv-nav__toggle { display: none; }

.sv-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.1vw, 30px);
}
.sv-site .sv-nav__list a {
	display: block;
	padding-block: 10px 8px;
	border-bottom: 2px solid transparent;
	font: 400 0.97rem/1.1 var(--sv-display);
	color: var(--sv-ink);
	text-decoration: none;
	white-space: nowrap;
}
.sv-site .sv-nav__list a:hover,
.sv-site .sv-nav__list a[aria-current] { border-bottom-color: var(--sv-blue); }
.sv-site .sv-nav__legal a { font-size: 0.86rem; color: var(--sv-muted); }
.sv-nav__legal--first { padding-left: clamp(14px, 2.1vw, 30px); border-left: 1px solid var(--sv-line); }

/* ---------- Willkommen ---------- */

.sv-hero {
	padding-block: clamp(64px, 13vh, 150px) clamp(72px, 14vh, 160px);
	padding-inline: var(--sv-inset);
}
.sv-hero > * { max-width: 44rem; margin-block: 0; }
.sv-hero > * + * { margin-top: 18px; }

.sv-site .sv-kicker {
	font: 400 0.84rem/1.3 var(--sv-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-blue-deep);
}
.sv-hero h1 {
	margin-top: 22px;
	font: 400 clamp(2.15rem, 1.1rem + 4vw, 3.7rem)/1.08 var(--sv-display);
	color: var(--sv-ink);
	text-wrap: balance;
}
.sv-hero .sv-lead { margin-top: 28px; font-size: 1.24rem; line-height: 1.5; color: var(--sv-ink); }
.sv-hero .wp-block-buttons { margin-top: 36px; }
.sv-hero .sv-note { margin-top: 30px; max-width: 40rem; font-size: 0.96rem; line-height: 1.55; color: var(--sv-muted); }

/* "body" im Selektor gibt Vorrang vor den WordPress-Standardstilen, egal in welcher Reihenfolge sie geladen werden. */
body.sv-site .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
body.sv-site .wp-block-button { margin: 0; }
body.sv-site .wp-block-button .wp-block-button__link {
	display: inline-block;
	padding: 14px 24px;
	border: 1px solid var(--sv-ink);
	border-radius: 2px;
	background: var(--sv-ink);
	font: 400 1rem/1.2 var(--sv-display);
	letter-spacing: 0.01em;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
body.sv-site .wp-block-button .wp-block-button__link:hover { background: var(--sv-blue-deep); border-color: var(--sv-blue-deep); color: #fff; }
body.sv-site .wp-block-button.is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, 0.6); color: var(--sv-ink); }
body.sv-site .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--sv-ink); border-color: var(--sv-ink); color: #fff; }

/* ---------- Blätter ---------- */

.sv-sheet {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
	column-gap: clamp(32px, 6vw, 88px);
	padding-block: clamp(56px, 8vw, 112px);
	padding-inline: var(--sv-inset);
	background: var(--sv-paper);
}
.sv-front > .sv-sheet + .sv-sheet { margin-top: var(--sv-window); }
.sv-front { padding-bottom: var(--sv-window); }

.sv-sheet > h2 {
	grid-column: 1;
	grid-row: 1 / span 40;
	align-self: start;
	position: sticky;
	top: calc(var(--sv-header-h) + 40px);
	margin: 0;
	padding-top: 22px;
	border-top: 2px solid var(--sv-blue);
	font: 400 clamp(1.65rem, 1.2rem + 1.5vw, 2.2rem)/1.15 var(--sv-display);
	color: var(--sv-ink);
	text-wrap: balance;
}
.sv-sheet > :not(h2) { grid-column: 2; min-width: 0; }

.sv-body > * { margin-block: 0; }
.sv-body > * + * { margin-top: 1.15em; }
.sv-body p { max-width: 40rem; }
.sv-site .sv-intro { font-size: 1.14rem; line-height: 1.55; color: var(--sv-ink); }

/* Leistungen */
.sv-body > .sv-rows { margin-top: 36px; border-bottom: 1px solid var(--sv-line); }
/* Ohne Einleitung beginnt der Abschnitt direkt mit der ersten Zeile, auf Höhe der Linie über dem Randtitel. */
.sv-body > .sv-rows:first-child { margin-top: 0; }
.sv-body > .sv-rows:first-child > .sv-row:first-child { border-top-width: 2px; padding-top: 22px; }
.sv-rows > * { margin: 0; }
.sv-row { padding-block: 24px 26px; border-top: 1px solid var(--sv-line); }
.sv-row h3 { margin: 0 0 8px; font: 700 1.14rem/1.3 var(--sv-display); color: var(--sv-ink); }
.sv-row p { margin: 0; }
.sv-row p + p { margin-top: 0.8em; }

/* Hinweis für Auftraggeber */
.sv-body > .sv-callout { margin-top: 36px; padding: 26px 28px 28px; background: var(--sv-soft); }
.sv-callout > * { margin: 0; }
.sv-callout > * + * { margin-top: 0.8em; }
.sv-callout h3 { font: 700 1.14rem/1.3 var(--sv-display); color: var(--sv-ink); }

/* Fragen und Antworten */
.sv-body > .sv-faq { margin-top: 36px; border-bottom: 1px solid var(--sv-line); }
.sv-faq > * { margin: 0; }
.sv-faq details { border-top: 1px solid var(--sv-line); }
.sv-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-block: 20px;
	font: 400 1.12rem/1.35 var(--sv-display);
	color: var(--sv-ink);
	cursor: pointer;
	list-style: none;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--sv-display); color: var(--sv-blue-deep); }
.sv-faq details[open] > summary::after { content: "\2013"; }
.sv-faq summary:hover { color: var(--sv-blue-deep); }
.sv-faq details > :not(summary) { margin: 0 0 22px; max-width: 40rem; }

/* Über mich */
/* Mit Porträt zwei Spalten; ohne Bild läuft der Text über die volle Breite. */
.sv-about:has(> .sv-portrait) { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
.sv-about:has(> .sv-portrait) > * { margin: 0; }
.sv-site .sv-portrait {
	position: relative;
	width: 132px;
	max-width: 100%;
	aspect-ratio: 35 / 45;
	margin: 0;
	border: 1px solid var(--sv-line);
	background: var(--sv-soft);
	overflow: hidden;
}
.sv-site .sv-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-about__text > * { margin-block: 0; }
.sv-about__text > * + * { margin-top: 1.1em; }
.sv-about__text h3 { font: 700 1.45rem/1.2 var(--sv-display); color: var(--sv-ink); }
.sv-site .sv-quali { list-style: none; margin-top: 18px; padding: 0; border-bottom: 1px solid var(--sv-line); }
/* Qualifikationen als Tabelle: links Datum oder Art, rechts der Nachweis */
.sv-body > h3 { margin-top: 52px; font: 700 1.14rem/1.3 var(--sv-display); color: var(--sv-ink); }
.sv-site .sv-table { margin: 16px 0 0; overflow: visible; }
.sv-site .sv-table table { width: 100%; border-collapse: collapse; table-layout: fixed; border-bottom: 1px solid var(--sv-line); }
.sv-site .sv-table td { padding: 13px 0 14px; border: 0; border-top: 1px solid var(--sv-line); vertical-align: top; text-align: left; word-break: normal; overflow-wrap: break-word; line-height: 1.5; }
.sv-site .sv-table td:first-child {
	width: 11rem;
	padding-right: 20px;
	font: 400 0.8rem/1.95 var(--sv-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-blue-deep);
}
.sv-site .sv-table strong { font-family: var(--sv-display); font-weight: 700; color: var(--sv-ink); }
.sv-site .sv-footnote { margin-top: 14px; font-size: 0.92rem; color: var(--sv-muted); }
.sv-quali li { padding-block: 11px; border-top: 1px solid var(--sv-line); font: 400 1.02rem/1.35 var(--sv-display); color: var(--sv-ink); }

/* Erreichbarkeit */
.sv-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px 36px; }
.sv-contact > * { margin: 0; }
.sv-contact__item p { margin: 0; }
.sv-site .sv-label {
	margin-bottom: 8px;
	font: 400 0.8rem/1.3 var(--sv-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-blue-deep);
}
.sv-body > .sv-note { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--sv-line); font-size: 0.96rem; color: var(--sv-muted); }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.sv-single { padding-block: clamp(40px, 7vw, 88px) var(--sv-window); padding-inline: var(--sv-gutter); }
.sv-page { max-width: 820px; margin-inline: auto; padding: clamp(28px, 6vw, 72px); background: var(--sv-paper); }
.sv-page__title { margin: 0 0 32px; font: 400 clamp(2rem, 1.4rem + 2.4vw, 2.9rem)/1.1 var(--sv-display); color: var(--sv-ink); text-wrap: balance; }
.sv-prose > * { margin-block: 0; }
.sv-prose > * + * { margin-top: 1.1em; }
.sv-prose h2 { margin-top: 2em; font: 400 1.5rem/1.2 var(--sv-display); color: var(--sv-ink); }
.sv-prose h3 { margin-top: 1.6em; font: 700 1.1rem/1.3 var(--sv-display); color: var(--sv-ink); }
.sv-prose ul, .sv-prose ol { padding-left: 1.3em; }
.sv-prose li + li { margin-top: 0.35em; }

/* ---------- Fuß ---------- */

.sv-footer { background: var(--sv-ink); color: #fff; }
.sv-footer__inner {
	max-width: calc(var(--sv-w) + 2 * var(--sv-gutter));
	margin-inline: auto;
	padding: 26px var(--sv-gutter);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 32px;
	font: 400 0.92rem/1.4 var(--sv-display);
}
.sv-footer__name { margin: 0; }
.sv-footer__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.sv-site .sv-footer a { color: #fff; text-underline-offset: 0.22em; }
.sv-site .sv-footer a:hover { color: #C9D3DE; }
.sv-site .sv-footer :focus-visible { outline-color: #fff; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 960px) {
	.sv-header__inner { flex-wrap: wrap; padding-block: 12px; row-gap: 4px; }
	.sv-nav { flex: 1 1 100%; }
	.sv-nav__list { flex-wrap: wrap; gap: 2px 20px; }
	.sv-nav__legal--first { padding-left: 0; border-left: 0; }

	/* Mit JavaScript klappt das Menü hinter einem Knopf zusammen. */
	.sv-js .sv-header__inner { flex-wrap: nowrap; padding-block: 0; }
	.sv-js .sv-nav { flex: none; }
	.sv-js .sv-nav__toggle {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--sv-ink);
		border-radius: 2px;
		background: transparent;
		font: 400 0.95rem/1 var(--sv-display);
		color: var(--sv-ink);
		cursor: pointer;
	}
	.sv-js .sv-nav__toggle[aria-expanded="true"] { background: var(--sv-ink); color: #fff; }
	.sv-js .sv-nav__list {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 6px var(--sv-gutter) 18px;
		border-bottom: 1px solid var(--sv-line);
		background: var(--sv-paper);
	}
	.sv-js .sv-nav__list.is-open { display: flex; }
	.sv-js .sv-nav__list li + li { border-top: 1px solid var(--sv-line); }
	.sv-js .sv-site .sv-nav__list a { padding-block: 15px; border-bottom: 0; font-size: 1.05rem; }
	.sv-js .sv-site .sv-nav__legal a { font-size: 0.95rem; }
}

@media (max-width: 1380px) {
	/* Das Signet rückt hinter den Text: heller stellen, damit er lesbar bleibt. */
	.sv-bg:not(.sv-bg--photo)::after { content: ""; position: absolute; inset: 0; background: rgba(246, 247, 248, 0.5); }
}

@media (max-width: 820px) {
	.sv-sheet { display: block; }
	.sv-sheet > h2 { position: static; margin-bottom: 30px; }
	.sv-body > .sv-rows:first-child > .sv-row:first-child { border-top-width: 1px; padding-top: 24px; }
	.sv-bg--photo::after { background: rgba(255, 255, 255, 0.88); }
	.sv-bg:not(.sv-bg--photo)::after { background: rgba(246, 247, 248, 0.62); }
}

@media (max-width: 782px) {
	body.sv-site.admin-bar { min-height: calc(100vh - 46px); }
	.admin-bar .sv-header { top: 46px; }
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--sv-header-h) + 46px); }
}
@media (max-width: 600px) {
	.admin-bar .sv-header { top: 0; }
	html:has(body.admin-bar) { scroll-padding-top: var(--sv-header-h); }
}

@media (max-width: 520px) {
	.sv-about:has(> .sv-portrait) { grid-template-columns: minmax(0, 1fr); }
	/* Tabellenzeilen untereinander statt nebeneinander */
	.sv-site .sv-table td { display: block; width: auto; }
	.sv-site .sv-table td:first-child { width: auto; padding: 12px 0 0; line-height: 1.4; }
	.sv-site .sv-table td + td { padding-top: 4px; border-top: 0; }
	.sv-brand__over { font-size: 0.74rem; }
	.sv-brand__name { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body.sv-site .wp-block-button .wp-block-button__link { transition: none; }
}

@media print {
	.sv-bg, .sv-nav, .sv-skip { display: none; }
	.sv-header { position: static; }
	.sv-front > .sv-sheet + .sv-sheet { margin-top: 0; }
}