@charset "UTF-8";
/* =========================================================================
   Batch Consulting · main.css
   -------------------------------------------------------------------------
   Einzige Stylesheet-Datei der Website. Hintergründe zu den Entscheidungen:
   _design/design-system.md

   Grundidee: Die Bildmarke besteht aus Leiterbahnen mit runden Kontakt-
   punkten. Diese Sprache trägt die ganze Seite.

   Farblogik: #00DEA5 hat auf Weiß nur 1,75:1 Kontrast. Mint bekommt deshalb
   dunkle Flächen (10,8:1); auf hellen Flächen übernimmt #006B4F (6,5:1).
   ========================================================================= */

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-latin-var.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   Merkmale
   ---------------------------------------------------------------------- */
:root {
	--mint:        #00DEA5;
	--mint-hover:  #24EDB8;
	--deep:        #006B4F;
	--logo-grey:   #96A1AA;

	--ink:         #0A1214;
	--ink-2:       #111B1E;
	--ink-3:       #17252A;
	--ink-line:    #1F3035;
	--on-ink:      #E8F2F0;
	--on-ink-2:    #A7BEBA;

	--paper:       #FFFFFF;
	--paper-2:     #F4F7F7;
	--paper-3:     #EAF0F0;
	--line:        #DCE5E5;
	--text:        #101A1D;
	--text-2:      #4A6167;

	--surface:     var(--paper);
	--fg:          var(--text);
	--fg-muted:    var(--text-2);
	--rule:        var(--line);
	--accent:      var(--deep);
	--trace:       var(--deep);
	--logo-mark:   var(--mint);
	--logo-word:   var(--logo-grey);

	--font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
	--step-0:  clamp(1rem,    0.96rem + 0.20vw, 1.13rem);
	--step-1:  clamp(1.19rem, 1.11rem + 0.38vw, 1.42rem);
	--step-2:  clamp(1.41rem, 1.28rem + 0.66vw, 1.80rem);
	--step-3:  clamp(1.68rem, 1.46rem + 1.08vw, 2.27rem);
	--step-4:  clamp(2.00rem, 1.66rem + 1.69vw, 2.86rem);
	--step-5:  clamp(2.38rem, 1.86rem + 2.57vw, 3.60rem);

	--space-2xs: 0.375rem;
	--space-xs:  0.75rem;
	--space-s:   1.125rem;
	--space-m:   1.75rem;
	--space-l:   2.75rem;
	--space-xl:  4.5rem;
	--space-2xl: clamp(4.5rem, 3rem + 5vw, 7rem);

	--wrap:      74rem;
	--wrap-text: 44rem;
	--radius:    10px;
	--radius-lg: 18px;
	--trace-w:   2px;
	--dot-r:     5px;
	--header-h:  74px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	hyphens: auto;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--space-s);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.022em;
	text-wrap: balance;
	hyphens: manual;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-s); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 3px; }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--mint); color: var(--ink);
	padding: var(--space-xs) var(--space-m); font-weight: 700;
}
.skip:focus { left: 0; }

.visually-hidden, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* WordPress-Blöcke neutralisieren: Abstände kommen aus dem Designsystem. */
.wp-block-group, .wp-block-image, .wp-block-buttons, .wp-block-list { margin: 0; }
.wp-block-image img { height: auto; }
.page-content > .wp-block-group:not(.section) { padding-block: var(--space-xl); }

/* -------------------------------------------------------------------------
   Flächen und Raster
   ---------------------------------------------------------------------- */
.section { background: var(--surface); color: var(--fg); padding-block: var(--space-2xl); }

.section--ink {
	--surface: var(--ink); --fg: var(--on-ink); --fg-muted: var(--on-ink-2);
	--rule: var(--ink-line); --accent: var(--mint); --trace: var(--mint);
}
.section--soft { --surface: var(--paper-2); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--fg-muted); max-width: var(--wrap-text); hyphens: manual; }

.eyebrow {
	display: flex; align-items: center; gap: 0.7em;
	margin: 0 0 var(--space-s);
	font-size: var(--step--1); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent); hyphens: manual;
}
.eyebrow::before {
	content: ''; inline-size: 9px; block-size: 9px; border-radius: 50%;
	background: var(--trace); flex: none;
}

.section__head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section__head--flush { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Schaltflächen (eigene und Button-Block)
   ---------------------------------------------------------------------- */
.btn,
.wp-block-button__link {
	display: inline-flex; align-items: center; gap: 0.6em;
	padding: 0.85em 1.5em;
	border: 2px solid transparent; border-radius: var(--radius);
	font: inherit; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.btn--primary,
.wp-block-button__link {
	background: var(--mint); border-color: var(--mint); color: var(--ink);
}
.btn--primary:hover,
.wp-block-button__link:hover { background: var(--mint-hover); border-color: var(--mint-hover); color: var(--ink); }

.btn--ghost,
.is-style-ghost .wp-block-button__link {
	background: transparent; border-color: currentColor; color: var(--fg);
}
.btn--ghost:hover,
.is-style-ghost .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 8%, transparent); color: var(--fg); border-color: currentColor;
}

/* Auf hellen Flächen braucht der Mint-Button eine Kontur, sonst verschwimmt er. */
.section:not(.section--ink) .btn--primary,
.section:not(.section--ink) .wp-block-button:not(.is-style-ghost) .wp-block-button__link {
	background: var(--deep); border-color: var(--deep); color: #fff;
}
.section:not(.section--ink) .wp-block-button:not(.is-style-ghost) .wp-block-button__link:hover { background: #00543F; border-color: #00543F; }

.btn-row, .wp-block-buttons {
	display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m);
}

/* -------------------------------------------------------------------------
   Kopfbereich
   ---------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ink); color: var(--on-ink);
	border-bottom: 1px solid var(--ink-line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-m); min-height: var(--header-h);
}

.logo { display: block; flex: none; line-height: 0; }
.logo svg { width: 168px; height: auto; }

.nav { display: flex; align-items: center; gap: var(--space-m); }

.nav__list {
	display: flex; align-items: center; gap: var(--space-m);
	margin: 0; padding: 0; list-style: none;
}

.nav__link {
	display: block; padding: 0.4em 0;
	color: var(--on-ink); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
	text-decoration: none; border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link[aria-current='page'] { border-bottom-color: var(--mint); color: var(--on-ink); }

.nav__cta { font-size: var(--step--1); padding: 0.6em 1.1em; }

.nav-toggle { display: none; }

@media (max-width: 60rem) {
	.site-header__inner { position: relative; }
	.nav-toggle {
		display: inline-flex; align-items: center;
		background: none; border: 1px solid var(--ink-line); border-radius: var(--radius);
		color: var(--on-ink); font: inherit; font-size: var(--step--1); font-weight: 700;
		padding: 0.55em 0.9em; cursor: pointer;
	}
	.nav {
		display: none; position: absolute; inset-inline: -1.25rem; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--ink-2); border-bottom: 1px solid var(--ink-line);
		padding: var(--space-s) 1.25rem var(--space-m);
	}
	.nav[data-open='true'] { display: flex; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__link { padding: 0.85em 0; font-size: var(--step-0); border-bottom: 1px solid var(--ink-line); }
	.nav__cta { margin-top: var(--space-s); justify-content: center; }
}

/* -------------------------------------------------------------------------
   Auftakt (Startseite) und Seitenkopf (Unterseiten)
   ---------------------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) var(--space-2xl); overflow: hidden; }

.hero__grid, .page-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }

@media (min-width: 62rem) {
	.hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
	.page-hero--illu .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 38rem; }

.page-hero { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
.page-hero h1 { max-width: 20ch; }

.illu, .illu-hero { width: 100%; max-width: 34rem; margin-inline: auto; }
.page-hero__illu .illu { max-width: 28rem; }

@media (max-width: 61.99rem) {
	.page-hero__illu { display: none; }
}

/* Leiterbahn-Grafiken */
.trace      { stroke: var(--mint); stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace--dim { stroke: var(--ink-line); }
.trace--dash { stroke-dasharray: 2 7; }
.node       { fill: var(--mint); }
.node--dim  { fill: var(--ink-line); }
.plate      { fill: var(--ink-2); stroke: var(--ink-line); stroke-width: 1.5; }
.plate--hi  { fill: var(--ink-2); stroke: var(--mint); stroke-width: 2; }
.illu text  { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; fill: var(--on-ink-2); }
.illu .label-hi { fill: var(--on-ink); }

/* -------------------------------------------------------------------------
   Kundenaussagen
   ---------------------------------------------------------------------- */
.asks { display: grid; gap: var(--space-m); }
@media (min-width: 52rem) { .asks { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }

.ask, .chain__step, .topic__col {
	position: relative;
	padding-top: var(--space-m);
	border-top: var(--trace-w) solid var(--rule);
}
.ask::before, .chain__step::before, .topic__col::before {
	content: ''; position: absolute; left: 0;
	top: calc(var(--trace-w) / -2 - var(--dot-r) + 1px);
	inline-size: calc(var(--dot-r) * 2); block-size: calc(var(--dot-r) * 2);
	border-radius: 50%; background: var(--trace);
}

.ask__quote { font-size: var(--step-2); font-weight: 700; line-height: 1.28; letter-spacing: -0.02em; margin-bottom: var(--space-xs); }
.ask__note  { color: var(--fg-muted); }

/* -------------------------------------------------------------------------
   Leistungsfelder
   ---------------------------------------------------------------------- */
.fields { display: grid; gap: var(--space-m); }
@media (min-width: 56rem) { .fields { grid-template-columns: repeat(3, 1fr); } }

.field {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: var(--space-m);
}
.field__glyph { color: var(--deep); margin-bottom: var(--space-s); }
.field__glyph svg { width: 52px; height: 52px; }

.field h3, .field .field__title {
	font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--text-2); margin-bottom: var(--space-2xs); hyphens: manual;
}
.field__claim { font-size: var(--step-1); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: var(--space-s); }

/* -------------------------------------------------------------------------
   Listen mit Bahnstück
   ---------------------------------------------------------------------- */
.field__list, .check-list {
	margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-s);
}
.field__list li, .check-list li {
	display: grid; grid-template-columns: 18px 1fr; column-gap: 0.85em;
	font-size: var(--step--1); line-height: 1.6; color: var(--fg-muted);
}
.field__list li::before, .check-list li::before {
	content: ''; grid-row: 1 / span 3; inline-size: 18px; block-size: 2px;
	background: var(--trace); margin-top: 0.8em; border-radius: 1px;
}
.field__list strong, .check-list strong { display: block; color: var(--fg); }
.check-list li { font-size: var(--step-0); }

/* -------------------------------------------------------------------------
   Die Kette / Ablaufschritte
   ---------------------------------------------------------------------- */
.chain { display: grid; gap: var(--space-l); }
@media (min-width: 56rem) {
	.chain { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.chain__step { padding-inline: 0 var(--space-l); }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
	.chain--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-l) 0; }
	.chain--4 .chain__step { padding-inline: 0 var(--space-l); }
}
@media (min-width: 62rem) { .chain--4 { grid-template-columns: repeat(4, 1fr); } }

.chain__num {
	font-size: var(--step--1); font-weight: 700; letter-spacing: 0.16em;
	color: var(--accent); margin-bottom: var(--space-2xs);
}
.chain__step h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.chain__step p:not(.chain__num) { color: var(--fg-muted); font-size: var(--step--1); }

/* -------------------------------------------------------------------------
   Themenblöcke der Unterseiten: Lage · Vorgehen · Ergebnis
   ---------------------------------------------------------------------- */
.topic__head { max-width: 46rem; margin-bottom: var(--space-l); }
.topic__num {
	font-size: var(--step--1); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent); margin-bottom: var(--space-2xs);
}

.topic__grid { display: grid; gap: var(--space-l); }
@media (min-width: 56rem) { .topic__grid { grid-template-columns: repeat(3, 1fr); } }

.topic__label {
	font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--fg-muted); margin-bottom: var(--space-xs); hyphens: manual;
}
.topic__col p:not(.topic__label) { font-size: var(--step--1); color: var(--fg); }
.topic__col .check-list li { font-size: var(--step--1); }

.note {
	margin-top: var(--space-l); padding: var(--space-s) var(--space-m);
	border-left: 3px solid var(--trace); background: color-mix(in srgb, var(--trace) 7%, transparent);
	font-size: var(--step--1); color: var(--fg-muted); max-width: var(--wrap-text);
}

/* -------------------------------------------------------------------------
   Über mich
   ---------------------------------------------------------------------- */
.about { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 52rem) { .about { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-xl); } }

.about__portrait { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); max-width: 18rem; }
.about__portrait img { width: 100%; height: auto; }

.two-col { display: grid; gap: var(--space-l); }
@media (min-width: 56rem) { .two-col { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } }

/* -------------------------------------------------------------------------
   Partner
   ---------------------------------------------------------------------- */
.partners {
	display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: center;
	margin: var(--space-l) 0 0; padding: 0; list-style: none;
}
.partners li { font-size: var(--step-0); font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); }

/* -------------------------------------------------------------------------
   Kontakt
   ---------------------------------------------------------------------- */
.contact__grid { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
@media (min-width: 52rem) { .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact__grid:has(> :only-child) { grid-template-columns: minmax(0, 30rem); }

.contact__card {
	display: block; padding: var(--space-m);
	border: 1px solid var(--ink-line); border-radius: var(--radius-lg); background: var(--ink-2);
	color: var(--on-ink); text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
.contact__card:hover { border-color: var(--mint); background: var(--ink-3); color: var(--on-ink); }

.contact__label {
	display: block; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--mint); margin-bottom: var(--space-2xs);
}
.contact__value { display: block; font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; hyphens: manual; overflow-wrap: anywhere; }
.contact__hint  { display: block; margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--on-ink-2); }

.templates-head { margin-top: var(--space-xl); }

.templates {
	margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs);
}
@media (min-width: 52rem) { .templates { grid-template-columns: repeat(3, 1fr); } }

.templates a {
	display: flex; align-items: center; gap: 0.7em; height: 100%;
	padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
	border: 1px solid var(--rule); border-radius: var(--radius);
	color: var(--fg); text-decoration: none;
	font-size: var(--step--1); font-weight: 600; line-height: 1.4;
}
.templates a::before { content: ''; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--trace); flex: none; }
.templates a:hover { border-color: var(--trace); background: color-mix(in srgb, var(--trace) 8%, transparent); }

.contact__address { margin-top: var(--space-l); font-size: var(--step--1); color: var(--fg-muted); font-style: normal; }

/* -------------------------------------------------------------------------
   Fließtext (Rechtliches, freie Seiten)
   ---------------------------------------------------------------------- */
.prose { max-width: var(--wrap-text); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-l); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-m); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--space-s); }
.prose li { margin-bottom: var(--space-2xs); }
.prose li::marker { color: var(--trace); }

.placeholder { background: #FFF1B8; color: #5C4400; padding: 0 0.25em; border-radius: 3px; font-weight: 700; }

/* -------------------------------------------------------------------------
   Fußbereich
   ---------------------------------------------------------------------- */
.site-footer {
	background: var(--ink-2); color: var(--on-ink-2);
	padding-block: var(--space-xl); font-size: var(--step--1);
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: space-between; }
.site-footer .logo svg { width: 148px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--on-ink-2); text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current='page'] { color: var(--mint); }
.site-footer__note { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--ink-line); color: #8FA8A4; }

/* Logo-Farben: als Attribut im SVG hinterlegt, hier über die Rollen steuerbar. */
.logo__mark { fill: var(--logo-mark); }
.logo__word { fill: var(--logo-word); }

/* Folgt auf den dunklen Seitenkopf direkt eine dunkle Sektion, verschmelzen
   beide zu einer Fläche — ohne doppelten Abstand dazwischen. */
.page-hero + .page-content > .section--ink:first-child { padding-top: 0; }