/* =========================================================
   Gentlemen's Cut — Ergänzungen zu theme.json
   Nur das, was sich nicht als Design-Token ausdrücken lässt.
   Farben, Abstände und Schriften kommen aus theme.json.
   ========================================================= */

:root {
	--gc-border: rgba(15, 61, 46, 0.15);
	--gc-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1 L11 6 L6 11 L1 6 Z' fill='none' stroke='%230F3D2E' stroke-width='1.1'/%3E%3C/svg%3E");
}

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

/*
 * Der Core setzt box-sizing nur auf einzelne Block-Wrapper, nicht global.
 * Ohne diesen Reset (den die statische Vorlage hatte) rechnet flex-basis
 * das Padding NICHT ein — die Hero-Spalten wuerden dadurch zu breit.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
iframe {
	max-width: 100%;
	display: block;
}

/* Fokus-Stil aus der Vorlage: 3px, deutlich sichtbar (WCAG 2.4.7) */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 3px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Skip-Link (Core-Blockthemes bringen keinen mit) */
.gc-skip-link {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	top: -60px;
	z-index: 1000;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 700;
	transition: top 0.15s;
}

.gc-skip-link:focus {
	top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--base);
}

/* Nur fuer Screenreader (Core liefert das mit, hier zur Sicherheit) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Fusszeile am unteren Rand halten.
 * Ohne diese Regel bleibt auf kurzen Seiten (404, Impressum) ein Streifen
 * Hintergrund unter der Fusszeile stehen.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* ---------- Textseiten (Impressum, Datenschutz, Beitraege, 404) ---------- */

/* Das Ornament folgt hier der linksbuendigen Textachse statt zu zentrieren. */
.gc-prose .wp-block-separator.is-style-gc-ornament {
	background-position: left center;
}

/* ---------- Absatz-Varianten ---------- */

/*
 * Deckkraft 0.72 statt der 0.6 aus der Vorlage: bei 0.6 ergibt sich auf dem
 * Cremehintergrund nur ein Kontrast von 3.55:1 — WCAG 2.1 AA verlangt fuer
 * Fliesstext dieser Groesse 4.5:1. Mit 0.72 sind es 4.93:1, optisch bleibt
 * der zurueckgenommene Charakter erhalten.
 */
.wp-block-paragraph.is-style-gc-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	opacity: 0.72;
	margin-bottom: var(--wp--preset--spacing--30);
}

.wp-block-paragraph.is-style-gc-lead {
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink-sub);
	max-width: 50ch;
}

.wp-block-paragraph.is-style-gc-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-sub);
	font-style: italic;
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------- Trenner mit Diamant ---------- */

.wp-block-separator.is-style-gc-diamond,
.wp-block-separator.is-style-gc-ornament {
	border: 0;
	background: none;
	height: auto;
	min-height: 1.5rem;
	background-image: var(--gc-diamond);
	background-repeat: no-repeat;
	background-size: 12px 12px;
	background-position: center;
	opacity: 0.5;
	/* width:100% ueberschreibt Cores 100px-Vorgabe fuer Trenner.
	   Bewusst KEIN max-width:none — sonst bricht der Trenner aus der
	   Layoutbreite aus und das Ornament landet am Seitenrand. */
	width: 100%;
	margin-block: var(--wp--preset--spacing--30);
}

/* Variante mit Linien links und rechts (Hero) */
.wp-block-separator.is-style-gc-diamond {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 132px; /* Lücke, in der der Diamant sitzt */
	background-position: center;
	opacity: 1;
}

.wp-block-separator.is-style-gc-diamond::before,
.wp-block-separator.is-style-gc-diamond::after {
	content: "";
	flex: 0 0 60px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	opacity: 0.25;
}

/* Linksbündige Hero-Variante */
.gc-hero .wp-block-separator.is-style-gc-diamond {
	justify-content: flex-start;
	background-position: left 72px center;
	width: 252px;
}

/* ---------- Zentrierte Sektionsköpfe ---------- */

.gc-section-header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.gc-section-header .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------- Kontaktband (Topbar) ---------- */

.gc-topbar {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
}

.gc-topbar a,
.gc-topbar p {
	color: var(--wp--preset--color--base);
}

.gc-topbar a {
	text-decoration: none;
}

.gc-topbar a:hover,
.gc-topbar a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* Icons vor Telefon und Adresse — als Maske, damit der Text editierbar bleibt */
.gc-icon-phone::before,
.gc-icon-pin::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 0.4em;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.gc-icon-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.gc-icon-pin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.gc-topbar .wp-block-social-links .wp-social-link {
	background: none;
	padding: 0;
}

.gc-topbar .wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--base);
	padding: 0.25rem;
}

/*
 * Mobile Reduktion wie in der Vorlage: ab 820px verschwinden Oeffnungszeiten
 * und Instagram aus dem Kontaktband, ab 520px auch die Adresse — die
 * Telefonnummer bleibt immer sichtbar.
 */
/*
 * Hinweis zur Spezifitaet: der Core setzt display und justify-content ueber
 * `.wp-block-group.is-layout-flex` bzw. die is-content-justification-*-Klassen
 * (je 0,2,0). Die Regeln hier brauchen deshalb einen zusaetzlichen Selektor,
 * sonst greifen sie nicht.
 */
@media (max-width: 820px) {
	.gc-topbar .wp-block-group.gc-topbar-meta {
		display: none;
	}

	.gc-topbar > .wp-block-group.is-layout-flex,
	.gc-topbar .wp-block-group.is-layout-flex {
		justify-content: center;
	}
}

@media (max-width: 520px) {
	.gc-topbar .gc-topbar-address {
		display: none;
	}
}

/* Der Termin-Button im Kopf weicht mobil dem Menue-Button. */
@media (max-width: 820px) {
	.gc-header .wp-block-buttons.gc-hide-mobile {
		display: none;
	}
}

/* ---------- Kopfbereich ---------- */

.gc-header {
	border-bottom: 1px solid var(--gc-border);
	background: var(--wp--preset--color--base);
}

.gc-header .wp-block-site-logo img {
	/* 80px wie .brand img in der statischen Vorlage. */
	height: 80px;
	width: auto;
}

.gc-header .wp-block-navigation a {
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.gc-header .wp-block-navigation a:hover,
.gc-header .wp-block-navigation a:focus-visible {
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Overlay-Menü auf Mobil */
.gc-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* ---------- Hero ---------- */

.gc-hero {
	overflow: hidden;
}

.gc-hero .wp-block-columns {
	gap: 0;
	align-items: stretch;
	min-height: clamp(440px, 65vh, 720px);
}

/*
 * Der Textblock richtet sich am 1120px-Container aus, waehrend das Bild bis
 * zum Viewport-Rand laeuft — wie in der statischen Vorlage. Die max()-Formel
 * entspricht dort dem padding-left von .hero-text.
 */
.gc-hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline-start: max(
		var(--wp--style--root--padding-left, var(--wp--preset--spacing--40)),
		calc((100vw - 1120px) / 2 + var(--wp--preset--spacing--40))
	);
	padding-inline-end: var(--wp--preset--spacing--50);
}

/* Die Spalten duerfen im vollbreiten Hero kein Root-Padding erben. */
.gc-hero > .wp-block-columns {
	padding-inline: 0;
}

/*
 * Exakte 50/50-Teilung wie im Grid der Vorlage.
 * Ohne diese Regel zaehlt bei flex-basis:0 und box-sizing:border-box das
 * grosse padding-inline-start der Textspalte als Mindestbreite mit — die
 * Spalten wuerden dann 832/608 statt 720/720 breit.
 * Unterhalb von 782px stapelt der Core die Spalten selbst.
 */
@media (min-width: 782px) {
	.gc-hero > .wp-block-columns > .wp-block-column {
		flex: 0 0 50%;
		max-width: 50%;
		min-width: 0;
	}
}

.gc-hero .wp-block-image.is-style-gc-hero-image,
.gc-hero .wp-block-image.is-style-gc-hero-image figure {
	height: 100%;
	margin: 0;
	position: relative;
}

.gc-hero .wp-block-image.is-style-gc-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%) contrast(1.05);
}

/* Weicher Übergang vom Bild in den Cremehintergrund */
.gc-hero .wp-block-image.is-style-gc-hero-image::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 35%;
	background: linear-gradient(to right, var(--wp--preset--color--base), transparent);
	pointer-events: none;
}

@media (max-width: 781px) {
	.gc-hero .wp-block-image.is-style-gc-hero-image {
		display: none;
	}

	.gc-hero-text {
		padding-inline-end: 0;
	}
}

/* ---------- Karten (Portfolio, Bio) ---------- */

.wp-block-group.is-style-gc-card,
.wp-block-column.is-style-gc-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--gc-border);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-group.is-style-gc-card:hover,
.wp-block-column.is-style-gc-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-group.is-style-gc-card .wp-block-heading,
.wp-block-column.is-style-gc-card .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-group.is-style-gc-card p:last-child,
.wp-block-column.is-style-gc-card p:last-child {
	margin-bottom: 0;
}

/* Portfolio-Raster */
.gc-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--40);
	/* Explizit: Karten sollen unabhaengig von der Textlaenge gleich hoch sein. */
	align-items: stretch;
}

.gc-portfolio-grid > * {
	margin-block: 0;
}

/* ---------- Tabellen ---------- */

.wp-block-table.is-style-gc-price table,
.wp-block-table.is-style-gc-hours table,
.wp-block-table.is-style-gc-facts table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--gc-border);
}

.wp-block-table.is-style-gc-price td,
.wp-block-table.is-style-gc-price th,
.wp-block-table.is-style-gc-hours td,
.wp-block-table.is-style-gc-hours th,
.wp-block-table.is-style-gc-facts td,
.wp-block-table.is-style-gc-facts th {
	border: 0;
	border-bottom: 1px solid var(--gc-border);
	padding: 0.85rem var(--wp--preset--spacing--40);
	text-align: left;
	vertical-align: baseline;
}

.wp-block-table.is-style-gc-price thead th,
.wp-block-table.is-style-gc-hours thead th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 1.1rem;
}

.wp-block-table.is-style-gc-price tbody th,
.wp-block-table.is-style-gc-hours tbody th,
.wp-block-table.is-style-gc-facts tbody th {
	font-weight: 400;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}

.wp-block-table.is-style-gc-price tbody tr:last-child th,
.wp-block-table.is-style-gc-price tbody tr:last-child td,
.wp-block-table.is-style-gc-hours tbody tr:last-child th,
.wp-block-table.is-style-gc-hours tbody tr:last-child td,
.wp-block-table.is-style-gc-facts tbody tr:last-child th,
.wp-block-table.is-style-gc-facts tbody tr:last-child td {
	border-bottom: 0;
}

/* Preisspalte rechtsbündig, tabellarische Ziffern */
.wp-block-table.is-style-gc-price td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.wp-block-table.is-style-gc-hours td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Zusatz wie "mit Waschen & Föhnen".
   Bewusst <em> statt <small>: der Block-Editor kennt nur registrierte
   Inline-Formate und würde <small> beim Bearbeiten der Zelle entfernen.
   <em> (core/italic) überlebt jeden Editier-Durchlauf. */
.wp-block-table.is-style-gc-price em,
.wp-block-table.is-style-gc-hours em,
.wp-block-table.is-style-gc-facts em {
	display: block;
	font-size: 0.82rem;
	font-style: normal;
	color: var(--wp--preset--color--ink-sub);
	letter-spacing: 0.01em;
}

/* Geschlossen-Zeile */
.wp-block-table.is-style-gc-hours tbody tr:last-child td {
	color: var(--wp--preset--color--ink-sub);
	font-style: italic;
}

/* "Auf einen Blick" — ersetzt die <dl> der Vorlage */
.wp-block-table.is-style-gc-facts table {
	background: transparent;
	border: 0;
}

.wp-block-table.is-style-gc-facts tbody th {
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--wp--preset--color--ink-sub);
	width: 45%;
	padding-inline: 0;
}

.wp-block-table.is-style-gc-facts tbody td {
	padding-inline: 0;
	text-align: right;
	font-weight: 500;
}

/* ---------- Listen ---------- */

.wp-block-list.is-style-gc-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-gc-check li {
	position: relative;
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) 2rem;
	margin: 0;
	border-bottom: 1px solid var(--gc-border);
}

.wp-block-list.is-style-gc-check li:last-child {
	border-bottom: 0;
}

/* Gefuellte, um 45 Grad gedrehte Raute — wie .bio-points li::before. */
.wp-block-list.is-style-gc-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	background: var(--wp--preset--color--primary);
}

/* Sprach-Tags */
.gc-lang-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.gc-lang-tags li {
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	padding: 0.35rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 500;
}

/* ---------- Kontakt ---------- */

.gc-contact-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--gc-border);
	padding: var(--wp--preset--spacing--40);
	font-style: normal;
}

.gc-contact-card .wp-block-heading {
	margin-top: 0;
}

/* Buttons wie .contact-actions: enger Abstand, umbrechend. */
.gc-contact-card .wp-block-buttons {
	gap: var(--wp--preset--spacing--20);
}

.gc-map {
	border: 1px solid var(--gc-border);
	overflow: hidden;
	height: 100%;
	min-height: 320px;
	background: var(--wp--preset--color--surface);
}

.gc-map iframe {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
	display: block;
}

/* ---------- Karten-Einwilligung (Zwei-Klick) ---------- */

.gc-map--consent {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
}

.gc-map-notice {
	max-width: 44ch;
	text-align: center;
}

.gc-map-notice > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.gc-map-notice > *:last-child {
	margin-bottom: 0;
}

.gc-map-notice__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.gc-map-notice p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.gc-map-notice__small {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-sub);
	line-height: 1.5;
}

/* Erbt die Button-Gestaltung aus theme.json ueber .wp-element-button. */
.gc-map-consent-btn {
	cursor: pointer;
}

/* Widerruf unter der geladenen Karte — dezent, aber erreichbar. */
.gc-map--loaded {
	position: relative;
	display: block;
}

.gc-map-revoke {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.35rem 0.7rem;
	border: 0;
	border-top: 1px solid var(--gc-border);
	border-left: 1px solid var(--gc-border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-sub);
	font-family: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.gc-map-revoke:hover,
.gc-map-revoke:focus-visible {
	color: var(--wp--preset--color--primary);
}

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

.gc-footer {
	font-size: var(--wp--preset--font-size--small);
}

.gc-footer,
.gc-footer p,
.gc-footer a {
	color: var(--wp--preset--color--base);
}

.gc-footer a {
	text-decoration: none;
}

.gc-footer a:hover,
.gc-footer a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* ---------- Galerie ---------- */

.wp-block-gallery .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* ---------- Druck ---------- */

@media print {
	.gc-topbar,
	.gc-header,
	.gc-hero .wp-block-buttons,
	.gc-contact-card .wp-block-buttons,
	.gc-map,
	.wp-block-gallery,
	.gc-footer {
		display: none !important;
	}

	.wp-block-group[style*="padding-top"] {
		padding-block: 1rem !important;
		break-inside: avoid;
	}

	h1, h2, h3 {
		color: #000;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.gc-hero .wp-block-image {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}