@font-face {
	font-family: "Pierson";
	src: url("../fonts/pierson-thin.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 200;
}

@font-face {
	font-family: "Pierson";
	src: url("../fonts/pierson-light.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: "Pierson";
	src: url("../fonts/pierson-regular.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-v44-latin-regular.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-v44-latin-regular.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 400;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-v44-latin-700.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 600 700;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-v44-latin-800.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 800;
}

@font-face {
	font-family: "Amsterdam";
	src: url("../fonts/Amsterdam.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@view-transition {
	navigation: auto;
}


/* ============================================================
   Mave Consulting — Color tokens
   Brand: Bordeaux #8a1538 · Anthrazit #2b2b2b · Off-white #f9f9f6
   Mave brings direction into complexity — clarity, structure,
   feminine strength. Reduced palette, sharp edges, high contrast.
   ============================================================ */

:root {
  /* ---- Bordeaux (primary brand) ---- */
  --bordeaux-50:  #faf0f3;
  --bordeaux-100: #f3dce3;
  --bordeaux-200: #e6b8c6;
  --bordeaux-300: #d28aa1;
  --bordeaux-400: #b4486a;
  --bordeaux-500: #a32551;
  --bordeaux-600: #8a1538; /* ★ core brand bordeaux */
  --bordeaux-700: #79102f;
  --bordeaux-800: #650c27;
  --bordeaux-900: #4d0a20;

  /* ---- Anthrazit / warm neutral ink ---- */
  --ink-900: #1a1a1a;
  --ink-800: #2b2b2b; /* ★ Anthrazit */
  --ink-700: #3d3d3b;
  --ink-600: #57564f; /* warm gray for secondary text */
  --ink-500: #74726a;
  --ink-400: #9b9991;
  --ink-300: #c5c3ba;
  --ink-200: #e3e1d8;
  --ink-150: #ecebe3;
  --ink-100: #f2f1ea;

  /* ---- Surfaces / paper ---- */
  --offwhite: #f9f9f6; /* ★ Soft Off-White */
  --white:    #ffffff;
  --cream:    #f4f2ec;

  /* ---- Ochre (sparing secondary accent, from brand imagery) ---- */
  --ochre-100: #f6ecd4;
  --ochre-400: #d6a12e;
  --ochre-600: #b07e16;

  /* ---- Status (brand-tuned, used sparingly) ---- */
  --green-100: #e3ece1;
  --green-600: #3f6b46;
  --amber-100: #f6ecd4;
  --amber-600: #b07e16;
  --red-100:   #f7dcdc;
  --red-600:   #b3261e;

  /* ============================================================
     SEMANTIC ALIASES — author against these
     ============================================================ */

  /* Brand */
  --brand:            var(--bordeaux-600);
  --brand-strong:     var(--bordeaux-700);
  --brand-deep:       var(--bordeaux-900);
  --brand-tint:       var(--bordeaux-50);
  --brand-tint-2:     var(--bordeaux-100);
  --brand-on:         var(--offwhite);
  --brand-gradient:   linear-gradient(178deg, #911a40 0%, var(--bordeaux-600) 46%, var(--bordeaux-800) 100%);

  /* Text */
  --text-primary:   var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-accent:    var(--bordeaux-600);
  --text-on-brand:  var(--offwhite);
  --text-on-dark:   var(--offwhite);

  /* Surfaces */
  --surface-page:     var(--offwhite);
  --surface-card:     var(--white);
  --surface-sunken:   var(--cream);
  --surface-inverse:  var(--ink-800);
  --surface-brand:    var(--bordeaux-600);

  /* Borders / lines */
  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--bordeaux-600);
  --hairline:       rgba(43,43,43,0.10);

  /* Interactive states */
  --focus-ring: rgba(138,21,56,0.35);
}


/* ============================================================
   Mave Consulting — Typography tokens
   Display: Pierson (high-contrast serif) — calm authority
   Body:    Open Sans — clear, modern, legible
   Script:  Amsterdam — signature accent, used VERY sparingly
   Eyebrow/label motif: uppercase Open Sans, wide tracking
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Pierson', 'Times New Roman', Georgia, serif;
  --font-sans:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Amsterdam', 'Brush Script MT', cursive;
  --font-body:    var(--font-sans);

  /* ---- Weights ---- */
  --fw-display-thin:  200; /* @kind font */
  --fw-display-light: 300; /* @kind font */
  --fw-display:       400; /* @kind font */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Type scale (px) ---- */
  --text-display-2xl: 88px;
  --text-display-xl:  68px;
  --text-display-lg:  52px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 25px;
  --text-h4: 20px;
  --text-body-lg: 19px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-overline: 12px;

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind other */
  --lh-display: 1.08; /* @kind other */
  --lh-heading: 1.18; /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-body:    1.6; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-display: 0.01em; /* @kind other */
  --tracking-heading: 0.01em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-wide:    0.04em; /* @kind other */
  --tracking-overline: 0.22em; /* @kind other */
}


/* ============================================================
   Mave Consulting — Spacing & layout tokens
   4px base grid. Generous whitespace = structure & calm.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: 24px;
  --section-y: 120px;
}


/* ============================================================
   Mave Consulting — Effects: radii, borders, shadows, motion
   Brand language: KLARE KANTEN (clear edges). Corners are crisp,
   nearly square. Shadows are soft, refined, never heavy.
   ============================================================ */

:root {
  /* ---- Radii — KLARE KANTEN: square by default ---- */
  --radius-none: 0;
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 2px;
  --radius-pill: 0;       /* sharp tags too — modern, decisive */
  --radius-card: 0;       /* default card radius — sharp */

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-thick: 1.5px;
  --border-accent: 2px;   /* the bordeaux underline / rule motif */

  /* ---- Shadows — soft, warm, restrained ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(43,43,43,0.05);
  --shadow-sm: 0 2px 8px rgba(43,43,43,0.06);
  --shadow-md: 0 8px 24px rgba(43,43,43,0.08);
  --shadow-lg: 0 18px 48px rgba(43,43,43,0.12);
  --shadow-brand: 0 14px 36px rgba(138,21,56,0.20);

  /* ---- Motion — calm, decisive. No bounce. ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 3px;
}


/* ============================================================
   Mave Consulting — Base / reset & primitive type classes
   Lightweight resets + a few opt-in utility classes for the
   brand's signature type treatments (eyebrow, display serif).
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 280ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
	animation-name: mave-page-exit;
}

::view-transition-new(root) {
	animation-name: mave-page-enter;
}

@keyframes mave-page-exit {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes mave-page-enter {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.995);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

.mave-page-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--brand);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}

.mave-page-transition::before {
	content: "";
	width: clamp(84px, 14vw, 150px);
	aspect-ratio: 1;
	background: url("../logos/Mave-Signet-farbe.svg") center / contain no-repeat;
	filter: brightness(0) invert(1);
	opacity: .16;
	transform: translateY(8px) scale(.98);
	transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

body.page-is-leaving .mave-page-transition {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

body.page-is-leaving .mave-page-transition::before {
	opacity: .24;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.mave-page-transition {
		display: none;
	}
}

/* ---- Display serif headings ---- */
.mave-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display-light);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}
.mave-h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--text-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.mave-h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--text-h2); line-height: var(--lh-heading); }

/* ---- Eyebrow / overline — the "CONSULTING" motif ---- */
.mave-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ---- Signature script ---- */
.mave-script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--text-accent);
}

/* ---- Bordeaux rule motif ---- */
.mave-rule {
  width: 56px;
  height: var(--border-accent);
  background: var(--brand);
  border: 0;
  margin: 0;
}

::selection { background: var(--bordeaux-200); color: var(--brand-deep); }



/* WordPress shell adjustments for v2 pages. */
body { margin: 0; }
.wp-site-blocks,
.mave-main,
.mave-main .wp-block-post-content {
	margin: 0;
	padding: 0;
	max-width: none;
	background: transparent;
}
.wp-site-blocks { position: relative; }
.mave-main {
	min-height: 50svh;
	position: relative;
	z-index: 1;
}
.mave-main .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wp-block-template-part { margin: 0; }
#bg {
	pointer-events: none;
	z-index: 0;
}
#hdr { z-index: 50; }
footer {
	position: relative;
	z-index: 1;
}
#wpadminbar ~ .wp-site-blocks #hdr,
body.admin-bar #hdr { top: 32px; }
@media (max-width: 782px) {
	#wpadminbar ~ .wp-site-blocks #hdr,
	body.admin-bar #hdr { top: 46px; }
}

/* Gutenberg compatibility for editable v2 content. */
.skip-link:not(:focus):not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	z-index: 200;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	background: var(--offwhite);
	color: var(--brand);
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

body.mave-legal-page,
body.mave-legal-page .wp-site-blocks {
	--mave-scroll-bg: var(--offwhite);
	background: var(--offwhite) !important;
}

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.no-top-padding { padding-top: 0 !important; }
.mb-section { margin-bottom: var(--sec-y) !important; }
.mb-28 { margin-bottom: 28px !important; }
.mb-36 { margin-bottom: 36px !important; }
.mt-1em { margin-top: 1em !important; }
.mt-36 { margin-top: 36px !important; }
.mt-values { margin-top: clamp(36px, 5vh, 56px) !important; }
.mb-contact-intro { margin-bottom: clamp(48px, 7vh, 80px) !important; }
.center-eyebrow { justify-content: center; }
.step-button-offset { padding-left: 26px; padding-top: 30px; }
.sig-spacing { font-size: 15px; padding: 0 0 30px; }

.wp-block-image {
	margin: 0;
}

.hero-figure .wp-block-image,
.prozess-figure .wp-block-image,
.about-figure .wp-block-image,
.rollen-figure .wp-block-image,
.profile-figure .wp-block-image {
	width: 100%;
	height: 100%;
}

.hero-figure .wp-block-image img,
.prozess-figure .wp-block-image img,
.about-figure .wp-block-image img,
.rollen-figure .wp-block-image img,
.profile-figure .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-buttons.standalone-button,
.wp-block-buttons.cta-btns {
	margin: 0;
	gap: 14px;
	width: auto !important;
	max-width: max-content !important;
}

.hero .wp-block-buttons.standalone-button {
	display: inline-flex;
}

.cta-band .wp-block-buttons.standalone-button,
.cta-band .wp-block-buttons.cta-btns {
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-button.btn,
.wp-block-button.about-link,
.wp-block-button.profile-link {
	display: inline-flex;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: inherit;
	text-decoration: none;
}

.wp-block-button.btn .wp-block-button__link,
.wp-block-button.about-link .wp-block-button__link,
.wp-block-button.profile-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	padding: 15px 30px;
	border: 1.5px solid transparent;
	background: transparent;
	color: inherit;
	transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .12s var(--ease-out);
}

.wp-block-button.btn .wp-block-button__link::after,
.wp-block-button.about-link .wp-block-button__link::after,
.wp-block-button.profile-link .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s var(--ease-out);
}

.wp-block-button.btn:hover .wp-block-button__link::after,
.wp-block-button.about-link:hover .wp-block-button__link::after,
.wp-block-button.profile-link:hover .wp-block-button__link::after {
	transform: translateX(4px);
}

.wp-block-button.btn-ghost-light .wp-block-button__link {
	border-color: rgba(249,249,246,.55);
	color: var(--offwhite);
}

.wp-block-button.btn-ghost-light .wp-block-button__link:hover {
	background: var(--offwhite);
	color: var(--brand);
}

.wp-block-button.btn-ghost-dark .wp-block-button__link {
	border-color: var(--brand);
	color: var(--brand);
}

.wp-block-button.btn-ghost-dark .wp-block-button__link:hover {
	background: var(--brand);
	color: var(--offwhite);
}

.wp-block-button.btn-primary .wp-block-button__link {
	background: var(--brand);
	color: var(--offwhite);
}

.wp-block-button.btn-primary .wp-block-button__link:hover {
	background: var(--brand-strong);
}

.wp-block-button.btn-on-brand .wp-block-button__link {
	background: var(--brand);
	color: var(--offwhite);
	border-color: var(--offwhite);
}

.paket .wp-block-button.btn .wp-block-button__link {
	font-size: 14px;
	padding: 11px 20px;
}

.cta-band .wp-block-button.btn-ghost-light .wp-block-button__link {
	border-color: var(--brand);
	color: var(--brand);
}

.cta-band .wp-block-button.btn-ghost-light .wp-block-button__link:hover {
	background: var(--brand);
	color: var(--offwhite);
}

.cta-band.lit .wp-block-button.btn-ghost-light .wp-block-button__link {
	border-color: rgba(249,249,246,.55);
	color: var(--offwhite);
}

.cta-band.lit .wp-block-button.btn-ghost-light .wp-block-button__link:hover {
	background: var(--offwhite);
	color: var(--brand);
}

.cta-band .wp-block-image.signet {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 56vw;
	max-width: 600px;
	transform: translate(-50%, -50%);
	opacity: .07;
	pointer-events: none;
}

.cta-band .wp-block-image.signet img {
	width: 100%;
	height: auto;
	display: block;
}

.fit-card li {
	position: relative;
}

.fit-grid {
	align-items: stretch;
}

.fit-grid > .fit-card {
	height: 100%;
}

.fit-card {
	display: flex;
	flex-direction: column;
}

@media (max-width: 920px) {
	.fit-grid {
		align-items: start;
	}

	.fit-grid > .fit-card {
		height: auto;
	}
}

.fit-card li::before {
	content: "";
	width: 19px;
	height: 19px;
	margin-top: 3px;
	background: var(--brand);
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fit-card.less li::before {
	background: var(--ink-400);
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

details.acc-item {
	border-top: 1px solid var(--border-default);
}

details.acc-item:last-child {
	border-bottom: 1px solid var(--border-default);
}

details.acc-item summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 28px);
	color: var(--text-primary);
}

details.acc-item summary::-webkit-details-marker {
	display: none;
}

details.acc-item summary:hover {
	color: var(--brand);
}

details.acc-item summary::after {
	content: "+";
	font-family: var(--font-sans);
	font-size: 28px;
	line-height: 1;
	transition: transform .25s var(--ease-out);
}

details.acc-item[open] summary::after {
	transform: rotate(45deg);
}

details.acc-item > p {
	margin: 0;
	padding: 0 0 26px;
	max-width: 68ch;
	color: var(--text-secondary);
	line-height: 1.7;
}

.block-label {
	margin: 0;
}

.impr-dl .impr-dt {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-secondary);
	padding-top: 2px;
	line-height: 1.55;
	margin: 0;
}

.impr-dl .impr-dd {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.55;
}

.impr-dl .impr-dd a {
	color: var(--brand);
	text-decoration: none;
}

.impr-dl .impr-dd a:hover {
	text-decoration: underline;
}

.impr-dl .impr-dd.placeholder {
	color: var(--text-secondary);
	font-style: italic;
}