/*
Theme Name: SV Präzision
Theme URI: https://sv-schiffmann.de/
Author: Claude Code für Kfz-Sachverständigenbüro Schiffmann
Description: Block-Theme für sv-schiffmann.de, Variante 2 „Technische Präzision“. Farben, Schrift und Abstände zentral in theme.json; Kontaktdaten kommen aus dem Plugin sv-kern.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.7
License: Proprietär – nur für sv-schiffmann.de
Text Domain: sv-praezision
*/

/* Russische Erklärseite /ru/: Plus Jakarta Sans hat keine kyrillischen Buchstaben. Inhalt und Kontaktleiste
   nutzen deshalb ganz die Systemschrift, damit die Schrift nicht mitten im Satz wechselt. */
html[lang|="ru"] :is(main, main *, .sv-kontaktleiste, .sv-kontaktleiste *) {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Russische Überschriften nicht automatisch trennen (sonst „автоэкс-перт“); zu lange Wörter dürfen umbrechen. */
html[lang|="ru"] main :is(h1, h2, h3) { hyphens: manual; overflow-wrap: break-word; }

/* Fokus: überall deutlich sichtbar (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--graphit);
	outline-offset: 3px;
}
.sv-dunkel :where(a, button, summary):focus-visible,
.sv-fuss :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--gelb);
}

/* Kopfzeile */
.sv-kopf { position: relative; z-index: 20; }
.sv-kopf__zeile { gap: 1.5rem; }
.sv-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.sv-logo img { width: clamp(190px, 58vw, 258px); height: auto; }
.sv-kopf .wp-block-navigation a { text-decoration: none; }
.sv-kopf .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sv-kopf .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 6px;
	padding: 0.35rem 0;
	min-width: 15rem;
}
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem max(1rem, 4vw);
}
/* Offenes Handy-Menü: linksbündig, Gruppen klar gegliedert */
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
	width: 100%;
}
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; }
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	width: 100%;
}
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--gross);
	padding-block: 0.35rem;
}
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--text-ruhig);
}
.sv-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	padding: 0.25rem 0 0 0 !important;
	gap: 0.25rem;
}
/* Zielgröße 48 px für Menü öffnen/schließen – Sichtbarkeit steuert WordPress (nur unter 600 px). */
.sv-kopf .wp-block-navigation__responsive-container-open,
.sv-kopf .wp-block-navigation__responsive-container-close {
	min-width: 48px; min-height: 48px; justify-content: center; align-items: center;
}
/* Offenes Handy-Menü (Codex V2): Seite dahinter ausblenden. Safari springt mit Tab sonst ins Formular hinter dem
   Menü, weil die Fokusfalle von WordPress Links überspringende Tab-Folgen nicht abfängt. Das Menü deckt die Seite
   ohnehin weiß ab. Nur unter 600 px, wo WordPress das Overlay zeigt. Die Kontaktleiste blendet sv-kern selbst aus. */
@media (max-width: 599.98px) {
	html.has-modal-open :is(main, footer) { visibility: hidden; }
}
.sv-kopf__anruf { flex-shrink: 0; }
@media (max-width: 781px) {
	/* Am Handy übernimmt die Kontaktleiste den Anruf; WordPress setzt sonst display:flex mit höherer Spezifität. */
	.sv-kopf .wp-block-buttons.sv-kopf__anruf { display: none; }
}

/* Überzeile über Überschriften */
.sv-ueberzeile {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.875rem; /* N3: 14 px */
	font-weight: 700;
	color: var(--wp--preset--color--marine);
	margin-bottom: 0.5rem;
}
.sv-dunkel .sv-ueberzeile { color: var(--wp--preset--color--gelb); }

/* Dunkle Abschnitte */
.sv-dunkel { color: var(--wp--preset--color--weiss); }
.sv-dunkel :where(h1, h2, h3, h4) { color: var(--wp--preset--color--weiss); }
.sv-dunkel a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--weiss); }
.sv-dunkel .sv-ruhig { color: var(--wp--preset--color--auf-dunkel-ruhig); }

/* Knöpfe: Mindestgröße 48 px (Zielgröße) */
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sv-dunkel .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--weiss); }

/* WhatsApp-Knöpfe (Alex 05.10.2026): WhatsApp-Grün mit Symbol. Dunkle Schrift, weil Weiß auf Grün nur 2 : 1 erreicht
   (Graphit auf Grün 8,3 : 1, Hover 5,3 : 1). Neue WhatsApp-Knöpfe bekommen im Editor die Klasse „sv-whatsapp“. */
.wp-block-button.sv-whatsapp > .wp-block-button__link {
	background-color: var(--wp--preset--color--whatsapp);
	border-color: var(--wp--preset--color--whatsapp-dunkel);
	color: var(--wp--preset--color--graphit);
}
.wp-block-button.sv-whatsapp > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--whatsapp-dunkel);
	border-color: var(--wp--preset--color--whatsapp-dunkel);
	color: var(--wp--preset--color--graphit);
}
.wp-block-button.sv-whatsapp > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.3-.3-.3-.5-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.3-.3-.3-.5-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Anrufknöpfe (Alex 05.10.2026): Telefonsymbol vor jedem Knopf, der eine Nummer wählt – SV oder Werkstatt. */
.wp-block-button > .wp-block-button__link[href^="tel:"]::before {
	content: "";
	flex: none;
	width: 1.2em;
	height: 1.2em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Offene Angaben in Texten: rot markiert, damit sie nicht übersehen werden. Das Prüfskript sperrt Upload und Livegang, solange „sv-offen“ vorkommt. */
mark.sv-offen { background: #FDE7EA; color: #8A0016; border-left: 4px solid #B00020; padding: 0.15rem 0.5rem; font-weight: 700; display: inline-block; }

/* Abstand zwischen Knöpfen (Alex 05.10.2026: zu eng) */
.wp-block-buttons.wp-block-buttons { gap: 1rem; }

/* Fußzeile */
.sv-fuss a { color: var(--wp--preset--color--weiss); }
.sv-fuss .sv-ruhig, .sv-fuss .sv-ruhig a { color: var(--wp--preset--color--auf-dunkel-ruhig); }
.sv-fuss ul { list-style: none; padding-left: 0; margin: 0; }
.sv-fuss li { margin: 0; }
/* N1: Tippflächen mindestens 44 px hoch (Fußzeilen-Listen und Pfeil-Links) */
.sv-fuss li > a, .sv-pfeil a { display: inline-flex; align-items: center; min-height: 44px; }

/* Lesetexte (Rechtstexte) */
.sv-lesetext :where(h2) { font-size: var(--wp--preset--font-size--titel-s); margin-top: 2.5rem; }
.sv-lesetext :where(h3) { font-size: var(--wp--preset--font-size--gross); margin-top: 1.75rem; }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== Seitenbausteine (Etappe 4) ===== */

/* Einstieg (dunkel, volle Breite) */
.sv-einstieg { position: relative; overflow: hidden; }
.sv-einstieg h1 { font-size: var(--wp--preset--font-size--titel-l); max-width: 20ch; }
.sv-einstieg .sv-einstieg__lead { font-size: var(--wp--preset--font-size--gross); max-width: 44ch; color: var(--wp--preset--color--weiss); }
.sv-einstieg .sv-einstieg__vertrauen { border-top: 1px solid var(--wp--preset--color--graphit-hell); padding-top: 1rem; max-width: 60ch; }
@media (max-width: 600px) {
	.sv-einstieg .wp-block-button { width: 100%; }
	.sv-einstieg .wp-block-button__link { width: 100%; }
}

/* Abschnittskopf: Überzeile + Titel links, Einleitung rechts */
.sv-abschnittskopf { gap: var(--wp--preset--spacing--40); }

/* Leistungsliste mit Nummern und Linien */
.sv-liste { border-top: 1px solid var(--wp--preset--color--linie); }
.sv-liste__eintrag { border-bottom: 1px solid var(--wp--preset--color--linie); padding-block: 1.5rem; gap: 1rem 2rem; }
.sv-nummer { font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--gold-text); /* M2: 5,4 : 1 statt 2,6 : 1 */ letter-spacing: 0.08em; margin: 0 0 0.25rem; }
.sv-liste__eintrag h3 { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--gross); }
.sv-liste__eintrag p { margin: 0; }
.sv-pfeil a { font-weight: 700; text-decoration: none; }
.sv-pfeil a::after { content: "\00a0→"; }

/* Lange deutsche Wörter (z. B. „Begutachtungsstützpunkte“, „Schwalmstadt-Ziegenhain“) dürfen auf schmalen Handys umbrechen. */
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; }
.sv-pfeil a:hover { text-decoration: underline; }

/* Orte (drei Spalten mit Akzentlinie) */
.sv-ort { border-top: 3px solid var(--wp--preset--color--gelb); padding-top: 1rem; }
.sv-ort h3 { margin: 0 0 0.25rem; }
.sv-ort .sv-rolle { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--text-ruhig); margin: 0 0 0.75rem; font-weight: 600; }

/* Ablauf in Schritten */
.sv-schritte { counter-reset: sv-schritt; }
.sv-schritt { counter-increment: sv-schritt; border-top: 1px solid var(--wp--preset--color--linie); padding-top: 1rem; }
.sv-schritt h3::before { content: counter(sv-schritt, decimal-leading-zero); display: block; font-size: 0.8125rem; color: var(--wp--preset--color--gelb-dunkel); letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.sv-schritt h3 { font-size: var(--wp--preset--font-size--gross); margin: 0 0 0.35rem; }

/* Fakten-Kasten */
.sv-fakten { border: 1px solid var(--wp--preset--color--linie); border-radius: 6px; padding: 1.25rem 1.5rem; background: var(--wp--preset--color--hellgrau); }
.sv-fakten ul { margin: 0; padding-left: 1.1rem; }
.sv-fakten li { margin-bottom: 0.4rem; }

/* Fragen (aufklappbar) */
.wp-block-details summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; min-height: 32px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0.25rem; top: -0.1rem; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--marine); }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { margin-top: 0.75rem; }

/* Rollen-Gegenüberstellung (Wer macht was?) */
.sv-rollen .wp-block-column { border: 1px solid var(--wp--preset--color--linie); border-radius: 6px; padding: 1.25rem 1.5rem; }
.sv-rollen h3 { font-size: var(--wp--preset--font-size--gross); margin-top: 0; }

/* Begutachtungsort-Kasten */
.sv-ortskasten { background: var(--wp--preset--color--hellgrau); border-radius: 6px; padding: 1.5rem; }
.sv-ortskasten p { margin: 0 0 0.5rem; }
.sv-hinweis-fehlt { color: #b00020; font-weight: 700; }

/* Kein Standardabstand zwischen Kopf, Inhalt und Fuß (dunkle Abschnitte schließen direkt an) */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > main > .wp-block-post-content > :first-child { margin-block-start: 0; }
.wp-site-blocks > main > .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* Einstieg: schmalere Elemente (Überschrift, Einleitung) linksbündig an der 1200-px-Kante statt zentriert */
.sv-einstieg > :is(h1, .sv-einstieg__lead, .sv-einstieg__vertrauen) {
	margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
	margin-right: auto !important;
}

/* Echte Fotos im Inhalt (06.10.2026): feste Seitenverhältnisse über width/height, keine Layoutverschiebung. */
.sv-foto { margin: var(--wp--preset--spacing--40) 0 0; }
.sv-foto img { display: block; width: 100%; height: auto; border-radius: 6px; }
.sv-foto--breit { max-width: 880px; margin-inline: auto; margin-top: var(--wp--preset--spacing--50); }