/* ==========================================================================
   Design tokens — siehe STYLEGUIDE.md
   ========================================================================== */
:root {
	--color-navy: #001E47;
	--color-white: #FFFFFF;
	--color-grey: #F2F0F0;
	--color-aqua: #5CE1E6;
	--color-teal: #00C2CB;
	--color-pink: #F80065;
	--color-pink-deep: #DB024F;

	--font-body: 'Montserrat', system-ui, sans-serif;

	/* Schriftgrößen-Skala — siehe STYLEGUIDE.md Abschnitt 2, 6 Stufen statt 24 Einzelwerte */
	--font-size-sm: 0.9em;
	--font-size-base: 1em;
	--font-size-md: 1.1em;
	--font-size-lg: 1.35em;
	--font-size-xl: 1.65em;
	--font-size-xxl: 2em;

	/* Hero/Start-Sektion — siehe STYLEGUIDE.md Abschnitt 10, zentral für alle Hero-Sektionen */
	--hero-min-height: 40em;
	--hero-min-height-mobile: 30em;
}

/* ==========================================================================
   Container-Breite — dynamisch statt GPs festem Pixel-Wert (1200px)
   Gilt für Header, Content, Footer gleichermaßen (GPs gemeinsame .grid-container-Klasse)
   ========================================================================== */
.grid-container {
	width: min(96%, 1500px);
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-navy);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-body);
	font-weight: 600;
}

h1 {
	font-size: var(--font-size-xxl);
	font-weight: 600;
}

h2 {
	font-size: var(--font-size-xl);
	font-weight: 500;
}

h3 {
	font-size: var(--font-size-lg);
	font-weight: 400;
}

h4, h5 {
	font-size: var(--font-size-md);
	font-weight: 300;
}

a {
	color: var(--color-navy);
}

a:hover,
a:focus {
	color: var(--color-pink);
}

.entry-title,
.page-header .entry-title {
	font-size: var(--font-size-xxl);
	color: var(--color-teal);
	font-weight: 600;
}

/* ==========================================================================
   Header — logo/nav colors on top of GP's own layout
   ========================================================================== */

/* GP stapelt .inside-header (Logo) und .main-navigation standardmäßig als zwei
   Blöcke untereinander — hier zu einer gemeinsamen Zeile gemacht.
   Die Breitenbegrenzung sitzt jetzt NUR auf .site-header selbst; alle
   verschachtelten .grid-container-Elemente darin (.inside-header,
   .inside-navigation) werden neutralisiert, sonst entsteht eine
   Prozent-in-Prozent-Verschachtelung, die die Nav-Breite unvorhersehbar macht. */
.site-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1em;
	width: min(96%, 1500px) !important;
	max-width: min(96%, 1500px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.site-header .inside-header,
.site-header .inside-navigation {
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.site-header .inside-header {
	flex: 0 0 auto !important;
}

.site-header .main-navigation {
	width: auto !important;
	max-width: none !important;
	flex: 1 1 0% !important;
	min-width: 0 !important;
}

.main-navigation .inside-navigation {
	flex-wrap: nowrap;
}

.main-navigation .main-nav > ul.menu {
	flex-wrap: nowrap;
}

.main-navigation .main-nav ul.menu li a,
.main-navigation .main-nav ul.menu li.menu-item-has-children > a,
.main-navigation .sub-menu li a,
.menu-toggle {
	color: var(--color-navy);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-base);
}

/* GP vergibt standardmäßig 20px Innenabstand pro Hauptmenü-Punkt (40px/Eintrag) — verschlankt, damit alle Punkte in eine Zeile passen */
.main-navigation .main-nav > ul.menu > li > a {
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.main-navigation .main-nav ul.menu li a:hover,
.main-navigation .main-nav ul.menu li.current-menu-item > a,
.main-navigation .sub-menu li a:hover {
	color: var(--color-teal);
}

.main-navigation .sub-menu {
	background: var(--color-white);
	border: none;
	box-shadow: none;
}

.main-navigation .sub-menu li {
	border-bottom: none;
	position: relative;
}

.main-navigation .sub-menu li::after {
	content: "";
	display: block;
	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid var(--color-grey);
}

.main-navigation ul.menu li.menu-item-has-children ul.sub-menu li a {
	font-size: var(--font-size-base);
}

/* Login button — appended als eigenes Menü-Element, Klasse "btn-standard" (siehe unten) */
.main-navigation .main-nav ul.menu li.btn-hervorheben,
.main-navigation .main-nav ul.menu li.btn-standard {
	margin-left: 0.3em;
}

/* ==========================================================================
   Footer widgets — four link columns
   ========================================================================== */
.footer-widgets .widget-title {
	font-family: var(--font-body);
	font-size: 1.111em; /* container .footer-widgets steht auf --font-size-sm (0.9em); 1.111 × 0.9 ≈ 1 = exakt --font-size-base, damit es wie im Hauptmenü aussieht */
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-navy);
}

.footer-widgets,
.footer-widgets a {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	text-decoration: none;
}

.footer-widgets a {
	font-weight: 400;
}

.footer-widgets a:hover {
	color: var(--color-teal);
	text-decoration: none;
}

#footer-widgets {
	background: var(--color-grey);
}

/* ==========================================================================
   Social icons (Hook-Element im Footer)
   ========================================================================== */
.social-links {
	list-style: none;
	margin: 1em 0;
	padding: 0;
	display: flex;
	gap: 1.1em;
	justify-content: center;
}

.social-links a {
	color: var(--color-navy);
	display: inline-flex;
}

.social-links a:hover {
	color: var(--color-teal);
}

/* ==========================================================================
   Floating Kontakt/Bot — site-weit über GP-Elements-Hook-Element
   (Anzeigebedingung "gesamte Seite"), nicht pro Seite dupliziert.
   ========================================================================== */
.floating-actions {
	position: fixed;
	top: 22%;
	right: 0;
	z-index: 400;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.floating-actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	height: 3em;
	background: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
}

.floating-actions a:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

/* ==========================================================================
   Footer bottom bar
   ========================================================================== */
.copyright-bar,
.copyright-bar a {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-decoration: none;
}

footer.site-info {
	background: var(--color-grey);
}

/* ==========================================================================
   Buttons — zwei Klassen, beide auf a/button beschränkt (nicht beliebige
   Elemente) — WordPress setzt Menü-CSS-Klassen auf das <li>, nicht auf den
   Link. Ohne "a."/"button." würde die Regel auch das <li> selbst zur Box
   machen (Box-in-Box-Bug).

   .btn-hervorheben — kräftig, pink. Für Verkaufs-/Buchungs-CTAs. Auch
   Standard für den Core-Button-Block (.wp-block-button__link) und
   GenerateBlocks-Buttons (.gb-button).

   .btn-standard — ruhig, Outline. Für Nebenaktionen wie Login, die als
   Button erkennbar sein sollen, aber nicht mit echten CTAs konkurrieren.

   ⚠️ Stolperfalle Button-Block: GeneratePress liefert selbst dynamisches CSS
   für `a.wp-block-button__link:not(.has-background)` (Grau, #55555e) mit
   höherer Selektor-Spezifität als eine bloße `.wp-block-button__link`-Klasse
   — die Regel gewinnt sonst trotz späterer Ladereihenfolge. Deshalb hier
   zusätzlich mit der von Gutenberg automatisch vergebenen Klasse
   `.wp-element-button` kombiniert, um gleichzuziehen.
   ========================================================================== */
a.btn-hervorheben,
button.btn-hervorheben,
a.wp-block-button__link.wp-element-button,
.gb-button,
.main-navigation .main-nav ul.menu li.btn-hervorheben > a {
	display: inline-block;
	background: var(--color-pink);
	color: var(--color-white);
	border: none;
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 600;
	line-height: 1.4;
	padding: 0.4em 1.3em;
	text-decoration: none;
}

a.btn-hervorheben:hover,
button.btn-hervorheben:hover,
a.wp-block-button__link.wp-element-button:hover,
.gb-button:hover,
.main-navigation .main-nav ul.menu li.btn-hervorheben > a:hover {
	background: var(--color-pink-deep);
	color: var(--color-white);
}

a.btn-standard,
button.btn-standard,
.main-navigation .main-nav ul.menu li.btn-standard > a {
	display: inline-block;
	background: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 600;
	line-height: 1.4;
	padding: 0.4em 1.3em;
	text-decoration: none;
}

a.btn-standard:hover,
button.btn-standard:hover,
.main-navigation .main-nav ul.menu li.btn-standard > a:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

/* Core-Button-Block auf .btn-standard umstellen: im Block-Editor unter
   "Erweitert" → "Zusätzliche CSS-Klasse(n)" btn-standard eintragen. Gutenberg
   setzt die Klasse auf den äußeren .wp-block-button-Wrapper, nicht auf den
   Link selbst — deshalb eigene, spezifischere Regel statt der obigen. */
.wp-block-button.btn-standard .wp-block-button__link {
	background: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
}

.wp-block-button.btn-standard .wp-block-button__link:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

/* ==========================================================================
   Hero/Start-Sektion — siehe STYLEGUIDE.md Abschnitt 10
   Cover-Block (volle Breite, Hintergrundfoto pro Seite austauschbar) mit
   verschachteltem Columns-Block (50/50). Overlay bewusst zurückgestellt
   (dimRatio 0 im Block) — Text braucht deshalb hier eine explizite
   Navy-Farbe, sonst würde die Cover-Block-Standardfarbe (Weiß) greifen.
   ========================================================================== */
.hero-section {
	min-height: var(--hero-min-height);
	padding: 5em 0;
	margin-bottom: 0;
}

.hero-section .wp-block-columns {
	width: min(96%, 1500px);
	max-width: min(96%, 1500px);
	margin-left: auto;
	margin-right: auto;
}

.hero-section .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5em;
	padding-left: 3em;
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p,
.hero-section li,
.hero-section a {
	color: var(--color-navy);
}

/* Turbo Beratung: dunkles Hero-Foto, Navy-Text wäre unlesbar */
.turboberatung-hero h1,
.turboberatung-hero h2,
.turboberatung-hero h3,
.turboberatung-hero p {
	color: #fff;
}

.turboberatung-hero li {
	color: var(--color-aqua);
}

/* Mobil: Breakpoint bewusst 781px statt der sonst üblichen 767px (Abschnitt 5)
   — WordPress-Core stapelt den Columns-Block fest bei 781px
   (wp-includes/css/dist/block-library/style.min.css), erst darunter ist die
   rechte (leere) Spalte tatsächlich weg. Eigene Breakpoints müssen hier
   mitziehen, sonst gäbe es eine kurze Zwischenzone mit falscher Höhe/Padding.
   Leere zweite Spalte wird zusätzlich ausgeblendet, sonst bliebe durch den
   Block-Gap eine unnötige Lücke unter dem Text stehen.
   Eigenes kleineres Mobil-Bild pro Seite ist möglich (Cover-Block unterstützt
   kein natives Mobil-Bild — bei Bedarf per :has()/Klasse ergänzen), aber noch
   nicht umgesetzt, da aktuell nur Platzhalter-/Testbilder existieren. */
@media (max-width: 781px) {
	.hero-section {
		min-height: var(--hero-min-height-mobile);
		padding: 3em 0;
	}

	.hero-section .wp-block-column:first-child {
		padding: 0 1em;
	}

	.hero-section .wp-block-column:last-child {
		display: none;
	}
}

/* ==========================================================================
   Start-Seite — Intro-Textblock, gekürzt und zentriert statt Fließtext-Wand
   ========================================================================== */
.intro-highlight {
	background: var(--color-grey);
	padding: 3em 0;
}

.fazit-highlight {
	background: #E4F9FA;
	margin-top: 2em;
}

.intro-highlight__inner {
	width: min(96%, 1500px);
	margin-left: auto;
	margin-right: auto;
}

.section-fear-banner {
	background: #E4F9FA;
	padding: 4em 0;
	margin-top: 2em;
}

.section-fear-banner .section-fear-banner__heading,
.section-fear-banner .section-fear-banner__text {
	color: var(--color-navy);
	max-width: min(96%, 44em);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-fear-banner .section-fear-banner__heading {
	margin-bottom: 0.6em;
}

.steuerberater-cards {
	margin-top: 2em;
}

.steuerberater-cards .wp-block-columns {
	gap: 2em;
}

.steuerberater-card {
	background: var(--color-grey);
	border-radius: 16px;
	padding: 2.5em;
	height: 100%;
}

.steuerberater-card .icon-line {
	margin: 0.6em 0;
}

.intro-highlight .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.intro-photo {
	position: relative;
}

.intro-photo::before {
	content: "";
	position: absolute;
	top: -0.8em;
	right: -0.8em;
	width: 70%;
	height: 70%;
	background: var(--color-white);
	z-index: -1;
}

.intro-highlight .wp-block-image img {
	border-radius: 8px;
	box-shadow: 0 1em 2em rgba(0, 30, 71, 0.15);
	display: block;
}

@media (max-width: 781px) {
	.intro-highlight {
		padding: 1.5em 0;
	}
}

/* Trennlinien zwischen Abschnitten — dünn und zurückhaltend statt WPs
   dickerer Standard-Trennlinie */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-grey);
	opacity: 1;
}

.intro-lead {
	font-size: var(--font-size-lg);
	color: var(--color-teal);
	font-weight: 600;
}

.hero-cta {
	margin-top: 3.5em;
}

.section-heading--center {
	text-align: center;
	margin-top: 2em;
}

.referenzen-cta {
	margin-top: 0.2em;
}

.section-heading--center .wp-block-buttons {
	justify-content: center;
}

.section-kicker {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	margin-top: 0.2em;
}

/* Zwischen-Banner (volle Breite, Foto-Hintergrund) — gleiches Prinzip wie
   die Hero-Sektion (Abschnitt 13), aber kürzer, für Übergänge mitten auf
   der Seite statt am Seitenanfang. */
.section-banner {
	min-height: 36em;
	display: flex;
	align-items: center;
	padding: 2em 0;
}

.section-banner .wp-block-cover__inner-container {
	width: min(96%, 1500px);
	max-width: min(96%, 1500px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 8em;
	text-align: left;
}

@media (max-width: 781px) {
	.section-banner {
		min-height: 26em;
	}
}

.section-banner h1,
.section-banner h2,
.section-banner h3,
.section-banner p,
.section-banner li {
	color: var(--color-navy);
	max-width: 30rem;
}

.section-banner h2 {
	font-size: 2.6em;
}

.section-banner h3 {
	font-size: 1.6em;
	font-weight: 500;
	margin-top: 0.4em;
}

.icon-line {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.icon-line__icon {
	display: flex;
	flex-shrink: 0;
}

.section-banner .wp-block-list {
	margin-top: 0.5em;
}

.section-banner img.wp-block-cover__image-background {
	object-position: center;
}

.section-banner--light h1,
.section-banner--light h2,
.section-banner--light h3 {
	color: var(--color-white);
}

/* Timeline — 4-Schritte-Prozess als Foto-Kacheln statt Fließtext-Spalten
   oder Punkte-Linie. Jede Kachel: Foto (abgerundet) mit Nummer-Badge in der
   Ecke, Titel + aufklappbarer Text darunter. */
.timeline-heading {
	margin-top: 2em;
}

.testimonial-heading {
	margin-top: 2em;
}

.section-title--center {
	text-align: center;
}

.steuerberater-heading {
	margin-top: 2em;
}

.timeline .wp-block-columns {
	align-items: flex-start;
}

.timeline__photo {
	position: relative;
	margin-bottom: 0.8em;
}

.timeline__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 0.6em 1.5em rgba(0, 30, 71, 0.15);
}

.timeline__number {
	position: absolute;
	top: -0.6em;
	right: -0.6em;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--color-pink);
	color: var(--color-white);
	font-size: var(--font-size-base);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.2em 0.5em rgba(0, 30, 71, 0.2);
}

.timeline__details {
	text-align: center;
}

.timeline__details summary {
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	display: flex;
	font-size: var(--font-size-md);
}

.timeline__details summary::marker,
.timeline__details summary::-webkit-details-marker {
	display: none;
	content: "";
}

.timeline__details summary::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--color-teal);
	border-bottom: 2px solid var(--color-teal);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.timeline__details[open] summary::after {
	transform: rotate(-135deg);
}

/* ==========================================================================
   Kontaktseite — Adresse + Aktionen (Digitale Visitenkarte, ID 9250)
   ========================================================================== */
.contact-address p {
	margin: 0.2em 0;
}

.contact-columns {
	margin-top: 3em;
}

.contact-address + .wp-block-buttons {
	margin-top: 2em;
}

.wp-block-buttons + .contact-qr {
	margin-top: 1em;
}

/* ==========================================================================
   Kontaktformular (Zoho-CRM-Embed auf der Digitale-Visitenkarte-Seite) — an
   Firmendesign angepasst. Zoho liefert das Formular über document.write mit
   eigenem <style>-Block direkt im Formular-HTML aus (feste Farben, teils mit
   !important) — nur über die Formular-ID (#crmWebToEntityForm) verankerte
   Regeln schlagen das zuverlässig, bei den !important-Stellen (Rahmen, Submit-
   Textfarbe) muss hier ebenfalls !important stehen, sonst gewinnt Zoho trotz
   höherer Spezifität unserer Regel.
   ========================================================================== */
#crmWebToEntityForm,
#crmWebToEntityForm * {
	font-family: var(--font-body) !important;
}

#crmWebToEntityForm.zcwf_lblLeft {
	max-width: 100% !important;
}

#crmWebToEntityForm .zcwf_title {
	color: var(--color-navy);
	font-weight: 600;
}

/* Label über dem Feld statt Zohos Label-links/Feld-rechts-Aufteilung — die
   passt in der schmalen rechten Spalte neben den Kontaktdaten (siehe
   .contact-columns weiter unten) nicht mehr. */
#crmWebToEntityForm .zcwf_row {
	margin: 0 0 1em 0 !important;
}

#crmWebToEntityForm .zcwf_col_lab,
#crmWebToEntityForm .zcwf_col_fld {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#crmWebToEntityForm .zcwf_col_lab {
	color: var(--color-navy);
	font-weight: 400;
	font-size: var(--font-size-sm) !important;
	margin-bottom: 0.3em !important;
}

#crmWebToEntityForm input[type="text"],
#crmWebToEntityForm input[type="email"],
#crmWebToEntityForm input[type="tel"],
#crmWebToEntityForm input[type="password"],
#crmWebToEntityForm textarea,
#crmWebToEntityForm select,
#crmWebToEntityForm .zcwf_col_fld_slt {
	width: 100% !important;
	float: none !important;
	border: none !important;
	border-bottom: 1px solid var(--color-navy) !important;
	border-radius: 0 !important;
	color: var(--color-navy);
	padding: 0.5em 0.2em !important;
	font-size: var(--font-size-base) !important;
	background: var(--color-white) !important;
}

/* Selects rendern sonst mit dem abgerundeten nativen Betriebssystem-Aussehen,
   auch bei border-radius:0 — eigene, eckige Pfeil-Grafik statt der nativen. */
#crmWebToEntityForm select,
#crmWebToEntityForm .zcwf_col_fld_slt {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001E47' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	background-size: 1em;
	padding-right: 2em !important;
}

#crmWebToEntityForm input[type="text"]:focus,
#crmWebToEntityForm input[type="email"]:focus,
#crmWebToEntityForm input[type="tel"]:focus,
#crmWebToEntityForm textarea:focus,
#crmWebToEntityForm select:focus {
	border-color: var(--color-teal) !important;
	outline: none;
}

#formsubmit {
	background: var(--color-pink) !important;
	color: var(--color-white) !important;
	border: none !important;
	border-radius: 0 !important;
	font-weight: 600 !important;
	padding: 0.4em 1.3em !important;
}

#formsubmit:hover {
	background: var(--color-pink-deep) !important;
}

/* Zurücksetzen-Button: GP setzt sonst dessen Standard-Grau auf jedes
   input[type=reset] (siehe Abschnitt 4/7-Stolperfalle) — hier auf
   .btn-standard-Optik gebracht. */
#crmWebToEntityForm input[type="reset"] {
	background: var(--color-white) !important;
	color: var(--color-navy) !important;
	border: 1px solid var(--color-navy) !important;
	border-radius: 0 !important;
	font-weight: 600 !important;
	padding: 0.4em 1.3em !important;
	max-width: none !important;
}

#crmWebToEntityForm input[type="reset"]:hover {
	background: var(--color-navy) !important;
	color: var(--color-white) !important;
}

/* ==========================================================================
   Referenzen — Testimonials (Referenzen-Seite, ID 9150)
   ========================================================================== */
.testimonial {
	padding: 1.2em 1.5em;
	margin-bottom: 0.3em;
}

.testimonial-alt-wrap {
	background: var(--color-grey);
	padding: 1.2em 0;
}

.uebermich-intro-heading {
	margin-top: 3em;
}

.testimonial-alt-wrap .testimonial {
	max-width: min(96%, 1500px);
	margin-left: auto;
	margin-right: auto;
}

/* Testimonials von Frauen: Anführungszeichen + Sterne in Pink statt Türkis */
.testimonial--fem .testimonial__quote::before,
.testimonial--fem .testimonial__stars {
	color: var(--color-pink);
}

.testimonial__quote {
	position: relative;
	font-size: var(--font-size-md);
	color: var(--color-navy);
	padding-left: 0.8em;
}

.testimonial__quote::before {
	content: "\201C";
	position: absolute;
	left: -0.2em;
	top: -0.15em;
	font-size: 2em;
	line-height: 1;
	color: var(--color-teal);
	font-weight: 600;
}

.testimonial__stars {
	color: var(--color-teal);
	font-size: 1.2em;
	letter-spacing: 0.2em;
	margin: 0.5em 0;
}

.testimonial__attribution {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
}

.testimonial__attribution strong {
	font-size: var(--font-size-base);
}

.testimonial--text {
	text-align: center;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

.testimonial--text .testimonial__quote {
	padding-left: 0;
}

.testimonial__avatar {
	margin: 0 auto 0.5em;
	width: 200px;
}

.testimonial__avatar img {
	border-radius: 50%;
}

.testimonial--text .testimonial__quote::before {
	position: static;
	display: block;
	left: auto;
	top: auto;
}

.testimonial--text .testimonial__stars {
	justify-content: center;
	display: flex;
}

/* Testimonial-Karten im Intro-Stil (.intro-highlight, Abschnitt 1) — nur für
   die 2 allgemeinen Kund:innen-Stimmen direkt nach dem Zeitometer, nicht für
   die Steuerberater-Testimonials weiter unten (kein passender Kontext dort). */
.testimonial-single .wp-block-columns {
	gap: 2em;
}

.testimonial-single .testimonial--text {
	background: var(--color-grey);
	border-radius: 16px;
	padding: 2.5em;
	max-width: none;
}

.testimonial-single .testimonial__avatar {
	position: relative;
}

.testimonial-single .testimonial__label {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1em;
}

.testimonial-single .testimonial--fem .testimonial__label {
	color: var(--color-pink);
}

.testimonial-single .testimonial__avatar::before {
	content: "";
	position: absolute;
	top: -0.6em;
	right: -0.6em;
	width: 70%;
	height: 70%;
	background: var(--color-white);
	z-index: -1;
}

/* Zeitometer-Statistiken (Start-Seite) — Abstand zur Überschrift oben und
   zur Trennlinie unten gleich groß statt WPs asymmetrischer Standard-Margin */
.section-heading--center + .wp-block-columns {
	margin-top: 0.5em;
	margin-bottom: 4.5em;
}

.stat-block {
	text-align: center;
}

.stat-block__number {
	width: 6.5em;
	height: 6.5em;
	border-radius: 50%;
	background: var(--color-white);
	border: 2px solid var(--color-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.4em;
	font-size: 1.7em;
	font-weight: 600;
	color: var(--color-aqua);
}

.stat-block__label {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin: 0;
}

.stat-block__icon {
	display: flex;
	justify-content: center;
	color: var(--color-navy);
	margin-bottom: 0.3em;
}

/* Icon-Set über Zwischenüberschriften — 4-Schritte-Prozess, "Warum
   zusammenarbeiten", 4 Leistungsangebote (Start-Seite) */
.icon-heading__icon {
	color: var(--color-teal);
	margin-bottom: 0.2em;
}

/* FAQ/Details-Blöcke allgemein */
.wp-block-details summary {
	color: var(--color-teal);
	cursor: pointer;
	font-weight: 600;
	margin-bottom: 0.5em;
}

/* FAQ-Sektion (Start-Seite) — einzelne weiße Karten auf grauem Grund, dünner
   Trennstrich zwischen den Karten, statischer Text statt Klapp-Mechanik
   (Inhalt ist ohnehin immer sichtbar, für SEO direkt im HTML). */
.faq-list {
	background: var(--color-grey);
	border-radius: 16px;
	padding: 1em;
	max-width: 60em;
	margin-left: auto;
	margin-right: auto;
}

.faq-item {
	background: var(--color-white);
	padding: 1.3em 2em;
}

.faq-item:first-child {
	border-radius: 12px 12px 0 0;
}

.faq-item:last-child {
	border-radius: 0 0 12px 12px;
}

.faq-item:first-child:last-child {
	border-radius: 12px;
}

.faq-item:not(:first-child) {
	border-top: 1px solid rgba(0, 30, 71, 0.12);
}

.faq-item__question {
	font-size: var(--font-size-md);
	color: var(--color-teal);
	font-weight: 600;
}

.faq-item__answer {
	margin-top: 0.6em;
	margin-bottom: 1.3em;
	color: var(--color-navy);
}

/* FAQ als 2x3-Kachelraster (Start-Seite) — eigener Wrapper statt .faq-list,
   damit die Buch-Seiten-FAQ (dort einspaltig gestapelt) unberührt bleibt. */
.faq-heading {
	margin-top: 2em;
}

.faq-grid {
	max-width: none;
	background: none;
	padding: 0;
	margin-bottom: -60px;
}

.faq-grid .wp-block-columns {
	gap: 1.5em;
	margin-bottom: 1.5em;
}

.faq-grid .faq-item {
	background: var(--color-grey);
	border-radius: 12px;
	padding: 1.5em;
	height: 100%;
	border-top: none;
}

.faq-grid--single {
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

.faq-grid--inline {
	margin-bottom: 2em;
}

.turboberatung-banner {
	min-height: 44em;
	margin-bottom: 2em;
}

.turboberatung-nerd-heading {
	color: var(--color-teal);
	font-weight: 600;
}

.schritt-card {
	background: rgba(92, 225, 230, 0.5);
	border-radius: 16px;
	padding: 2em;
	height: 100%;
	box-sizing: border-box;
}

.schritt-card__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: var(--color-navy);
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	margin-bottom: 0.75em;
}

.schritt-card__title {
	margin-top: 0;
	color: var(--color-navy);
}

.section-banner__subheadline {
	max-width: 34em;
	margin-top: 0.75em;
	font-size: var(--font-size-md);
}

@media (max-width: 767px) {
	.turboberatung-banner {
		min-height: 28em;
	}
}

.testimonial .wp-block-details summary {
	color: var(--color-teal);
	cursor: pointer;
	font-weight: 600;
	margin-top: 0.8em;
}

/* ==========================================================================
   "Endlich papierlos arbeiten" — Buch-Begleitseite (ID 15506)
   ========================================================================== */
.endlich-section-one {
	margin-top: 3em;
}

.endlich-video-center {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.endlich-video-center .wp-block-video {
	margin: 0;
}

.endlich-video-center video {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.endlich-step-heading {
	margin-top: 0;
	color: var(--color-teal);
}

.endlich-five-steps {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

.endlich-five-steps li {
	margin-bottom: 0.5em;
}

.team-card {
	background: var(--color-grey);
	border-radius: 16px;
	padding: 2em;
	text-align: center;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.team-card__link {
	margin-top: auto;
	padding-top: 1em;
}

.team-card__photo img {
	border-radius: 12px;
	box-shadow: 0 0.6em 1.5em rgba(0, 30, 71, 0.15);
	width: 100%;
	height: 22em;
	object-fit: cover;
}

.team-card__role {
	margin-top: 1em;
	color: var(--color-navy);
}

.team-card__quote {
	color: var(--color-navy);
	font-style: italic;
}

.team-card__link a {
	color: var(--color-teal);
	font-weight: 600;
}

.endlich-mini-credit {
	text-align: center;
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	font-style: italic;
}

.endlich-downloads {
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

.endlich-downloads ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.endlich-downloads li {
	border-bottom: 1px solid var(--color-grey);
	padding: 0.8em 0;
}

.endlich-downloads li:last-child {
	border-bottom: none;
}

.endlich-downloads a {
	color: var(--color-teal);
	font-weight: 600;
}

.endlich-downloads .wp-block-buttons {
	justify-content: center;
	margin-top: 2em;
}

/* Portfolio page */

.portfolio-intro-heading {
	margin-top: 3em;
}

.project-card {
	background: var(--color-grey);
	border-radius: 16px;
	padding: 2em;
	margin-bottom: 1.5em;
}

.project-card__title {
	margin-top: 0;
	color: var(--color-navy);
}

.project-card__meta {
	color: var(--color-navy);
	margin-bottom: 1em;
}

.skills-grid .wp-block-columns {
	gap: 2.5em;
	margin-bottom: 2em;
}

.skill-bar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5em;
}

.skill-bar__label {
	margin: 0;
	color: var(--color-navy);
	font-size: var(--font-size-lg);
	font-weight: 400;
}

.skill-bar__years {
	color: var(--color-navy);
	font-weight: 600;
	font-size: var(--font-size-sm);
	white-space: nowrap;
}

.skill-bar__track {
	height: 10px;
	border-radius: 20px;
	background: var(--color-aqua);
	overflow: hidden;
}

.skill-bar__fill {
	height: 100%;
	border-radius: 20px;
	background: var(--color-navy);
}

.skill-bar__tools {
	margin: 0.6em 0 0;
	color: var(--color-navy);
	font-size: var(--font-size-sm);
}

/* Online Kurse page */

.online-kurse-intro {
	max-width: 44em;
	margin: 1em auto 2em;
	text-align: center;
}

.online-kurse-paket-heading {
	margin-top: 3em;
}

/* Termin page */

.termin-booking {
	max-width: 50em;
	margin: 3em auto 2em;
}

.termin-booking iframe {
	display: block;
	width: 100%;
	border: none;
}

/* Jahresbegleitung page */

.jahresbegleitung-intro-heading {
	margin-top: 3em;
}

.process-step-heading {
	color: var(--color-navy);
	margin-top: 0;
}

.process-photo img {
	border-radius: 12px;
	box-shadow: 0 0.6em 1.5em rgba(0, 30, 71, 0.15);
}

/* Turbo Beratung page */

.turboberatung-intro-heading {
	margin-top: 3em;
}

.bundle-highlight {
	background: var(--color-aqua);
	padding: 3em 1em;
	text-align: center;
	margin: 0 0 2em;
}

.bundle-highlight h2 {
	color: var(--color-navy);
	margin-top: 0;
}

.bundle-highlight p {
	color: var(--color-navy);
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

.bundle-highlight .wp-block-buttons {
	justify-content: center;
	margin-top: 1.5em;
}

.courses-grid .wp-block-columns {
	gap: 1.5em;
	margin-bottom: 1.5em;
}

.courses-grid--single {
	max-width: 44em;
	margin: 0 auto;
}

.course-card {
	background: var(--color-grey);
	border-radius: 16px;
	padding: 1.75em;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.course-card__title {
	margin-top: 0;
	color: var(--color-teal);
	font-weight: 600;
}

.course-card__price {
	color: var(--color-teal);
	margin-bottom: 0.5em;
}

.course-card__desc {
	flex-grow: 1;
}

.course-card__badge {
	max-width: 8em;
	margin: 0 0 1em;
}

.course-card__badge img {
	border-radius: 8px;
}

.course-card--soon {
	background: transparent;
	border: 2px dashed var(--color-aqua);
}

.course-card__soon-label {
	display: inline-block;
	background: var(--color-aqua);
	color: var(--color-navy);
	font-weight: 600;
	font-size: var(--font-size-sm);
	padding: 0.2em 0.8em;
	border-radius: 99px;
	margin: 0 0 0.75em;
}

.course-card .wp-block-buttons {
	margin-top: 1em;
}

.courses-grid-note {
	color: var(--color-navy);
	font-size: var(--font-size-sm);
	margin-top: 0.5em;
}

/* fraupapierlos-bot: Nova Chat Widget */
#novaChat {
	width: 100%;
	max-width: 90%;
	margin: 2rem auto;
	padding: 1.5rem;
	background: white;
	border-radius: 0px;
	border: 1px solid #ddd;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#novaChat h6 {
	margin: 0;
	color: #4ab1c6;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
}

#chatHistory {
	flex-grow: 1;
	height: 30em;
	overflow-y: auto;
	background: #f9f9f9;
	border: 1px solid #ddd;
	padding: 1rem;
	border-radius: 0px;
	white-space: pre-wrap;
	font-size: 1rem;
}

#inputSection {
	display: flex;
	gap: 1rem;
	align-items: center;
}

#userInput {
	flex-grow: 1;
	padding: 0.5rem;
	resize: none;
	border: 1px solid #ccc;
	border-radius: 0px;
	font-size: 1rem;
	height: 10em;
	line-height: 1.4;
	font-family: sans-serif;
}

#sendBtn {
	width: 2em;
	height: 2em;
	background: #c92751;
	color: white;
	font-size: 1.8rem;
	border: none;
	border-radius: 0px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.link-button {
	display: inline-block;
	margin-top: 14px;
	background: #c92751;
	color: #fff !important;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}

.link-button:hover {
	background: #a81f43;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.no-link {
	margin-top: 14px;
	font-size: 0.9rem;
	color: #777;
}

.nova-source {
	font-size: 0.78rem;
	color: #666;
	margin-top: 6px;
	display: block;
	line-height: 1.4;
}