/*
Theme Name: Tanzschule Marius
Theme URI: https://tanzen-marius.de
Author: Marius Stückenschneider
Description: Schlankes Block-Theme für die mobile Tanzschule Marius in Lingen (Ems). Dunkle Markenoptik, Archivo lokal eingebunden, ohne Framework und ohne Icon-Fonts.
Version: 2.4.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tanzen-marius
Tags: block-theme, one-column, custom-colors, custom-menu, editor-style, full-site-editing
*/

/* ==========================================================================
   1. Schriften — lokal, kein externer Request
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-var.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-stretch: 100%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-italic-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-stretch: 100%;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

/* Farbwerte direkt aus den Logodateien entnommen. */
:root {
	/* Marke */
	--tm-ink: #0a0d13;
	--tm-ink-2: #141922;
	--tm-ink-3: #1c222d;
	--tm-coral: #e36654;
	--tm-coral-hell: #ea8172;
	--tm-paper: #f7f5f1;
	--tm-white: #f3f5f9;

	/* Abgeleitet für dunkle Flächen */
	--tm-on-dark: #f3f5f9;
	--tm-on-dark-soft: rgba(243, 245, 249, 0.68);
	--tm-on-dark-faint: rgba(243, 245, 249, 0.42);
	--tm-line-dark: rgba(243, 245, 249, 0.14);

	/* Abgeleitet für helle Flächen */
	--tm-on-light: #0a0d13;
	--tm-on-light-soft: #4a5058;
	--tm-on-light-faint: #868c94;
	--tm-line-light: #ddd8d0;

	/* Standard = dunkel */
	--tm-bg: var(--tm-ink);
	--tm-surface: var(--tm-ink-2);
	--tm-surface-2: var(--tm-ink-3);
	--tm-fg: var(--tm-on-dark);
	--tm-fg-soft: var(--tm-on-dark-soft);
	--tm-fg-faint: var(--tm-on-dark-faint);
	--tm-line: var(--tm-line-dark);

	/* Schrift */
	--tm-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Rhythmus */
	--tm-gutter: clamp(1.25rem, 5vw, 2.5rem);
	--tm-content: 42rem;
	--tm-wide: 68rem;
	--tm-section: clamp(4rem, 11vw, 8rem);
	--tm-radius: 4px;

	--tm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   3. Basis
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--tm-bg);
	color: var(--tm-fg);
	font-family: var(--tm-sans);
	font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a {
	color: var(--tm-coral);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.18s var(--tm-ease);
}

a:hover {
	color: var(--tm-coral-hell);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--tm-coral);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--tm-coral);
	color: var(--tm-ink);
}

/* Screenreader */
.tm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tm-skip-link {
	position: absolute;
	top: -100px;
	left: var(--tm-gutter);
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--tm-coral);
	color: var(--tm-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.8rem;
}

.tm-skip-link:focus {
	top: 1rem;
	color: var(--tm-ink);
}

/* ==========================================================================
   4. Typografie
   ========================================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--tm-sans);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1,
.tm-h1 {
	font-size: clamp(2.6rem, 8vw, 5.4rem);
	letter-spacing: -0.045em;
}

h2,
.tm-h2 {
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
}

h3,
.tm-h3 {
	font-size: clamp(1.25rem, 1.9vw, 1.5rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

h4 {
	font-size: 1.1rem;
}

p {
	margin: 0 0 1.15em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

.tm-lead {
	font-size: clamp(1.1rem, 1.35vw, 1.3rem);
	line-height: 1.5;
	color: var(--tm-fg-soft);
}

/*
 * Gesperrte Versalien — dasselbe Prinzip wie „TANZSCHULE" über dem Namen
 * im Logo. Sie sind das verbindende Element zwischen Marke und Website.
 */
.tm-eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tm-coral);
	margin: 0 0 1.25rem;
}

.tm-eyebrow--light {
	color: var(--tm-coral);
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.tm-shell {
	width: 100%;
	max-width: var(--tm-wide);
	margin-inline: auto;
	padding-inline: var(--tm-gutter);
}

.tm-shell--narrow {
	max-width: calc(var(--tm-content) + var(--tm-gutter) * 2);
}

.tm-section {
	padding-block: var(--tm-section);
}

.tm-section--tight {
	padding-block: calc(var(--tm-section) * 0.6);
}

/*
 * Dunkel ist der Normalfall. --dark hebt einen Abschnitt nur leicht ab,
 * --band dreht ihn ins Helle und schaltet dafür die Farbrollen um.
 */
.tm-section--dark {
	background: var(--tm-ink-2);
}

.tm-section--band {
	background: var(--tm-paper);
	--tm-surface: #ffffff;
	--tm-surface-2: #ece8e1;
	--tm-fg: var(--tm-on-light);
	--tm-fg-soft: var(--tm-on-light-soft);
	--tm-fg-faint: var(--tm-on-light-faint);
	--tm-line: var(--tm-line-light);
	color: var(--tm-fg);
}

.tm-section--band h1,
.tm-section--band h2,
.tm-section--band h3 {
	color: var(--tm-on-light);
}

.tm-section-head {
	max-width: 38rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.tm-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.8rem;
	font-family: var(--tm-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--tm-radius);
	cursor: pointer;
	transition: background-color 0.18s var(--tm-ease), color 0.18s var(--tm-ease),
		border-color 0.18s var(--tm-ease), transform 0.18s var(--tm-ease);
}

.tm-btn:hover {
	transform: translateY(-1px);
}

.tm-btn--primary {
	background: var(--tm-coral);
	color: var(--tm-ink);
	font-weight: 700;
}

.tm-btn--primary:hover {
	background: var(--tm-coral-hell);
	color: var(--tm-ink);
}

.tm-btn--ghost {
	background: transparent;
	color: currentColor;
	border-color: var(--tm-line);
}

.tm-section--dark .tm-btn--ghost {
	border-color: var(--tm-line-dark);
}

.tm-btn--ghost:hover {
	border-color: currentColor;
	color: currentColor;
}

.tm-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.25rem;
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.tm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--tm-ink);
	border-bottom: 1px solid var(--tm-line-dark);
}

.tm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.5rem;
}

/*
 * Das Logo bringt seinen eigenen Grund mit, der exakt --tm-ink entspricht.
 * Deshalb braucht es keine Freistellung — es sitzt nahtlos im Kopfbereich.
 */
.tm-brand a {
	display: block;
	line-height: 0;
}

.tm-brand img {
	display: block;
	height: clamp(2.2rem, 4vw, 2.9rem);
	width: auto;
}

.tm-header .wp-block-navigation {
	font-family: var(--tm-sans);
	font-size: 0.98rem;
	font-weight: 500;
}

.tm-header .wp-block-navigation {
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.tm-header .wp-block-navigation a {
	color: var(--tm-on-dark);
	text-decoration: none;
}

.tm-header .wp-block-navigation a:hover {
	color: var(--tm-coral);
}

.tm-header .wp-block-navigation .current-menu-item a {
	color: var(--tm-coral);
}

/* Untermenü */
.tm-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	color: var(--tm-on-dark);
}

.tm-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--tm-ink-2);
	border: 1px solid var(--tm-line-dark);
	border-radius: var(--tm-radius);
	padding: 0.4rem 0;
	min-width: 14rem;
	box-shadow: 0 8px 28px rgba(22, 38, 46, 0.09);
}

.tm-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 0.55rem 1.1rem;
	font-size: 0.95rem;
}

/* Auf dem Handy klappt das Overlay auf — dort ist der Kasten fehl am Platz. */
@media (max-width: 55.999rem) {
	.tm-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container {
		border: 0;
		box-shadow: none;
		padding-left: 0.75rem;
	}
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.tm-hero {
	position: relative;
	background: var(--tm-ink);
	border-bottom: 1px solid var(--tm-line-dark);
	border-bottom: 1px solid var(--tm-line-dark);
	padding-block: clamp(4.5rem, 12vw, 9rem);
	overflow: hidden;
}

.tm-hero__grid--single h1,
.tm-hero__grid--single .tm-hero__lead {
	max-width: 22ch;
}

.tm-hero__grid--single .tm-hero__lead {
	max-width: 46ch;
}

.tm-hero__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 60rem) {
	.tm-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
	}

	.tm-hero__grid--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.tm-portrait {
		aspect-ratio: 3 / 2;
	}
}

.tm-hero h1 {
	color: var(--tm-on-dark);
	margin-bottom: 0.35em;
}

.tm-hero__lead {
	max-width: 34rem;
	font-size: clamp(1.1rem, 1.35vw, 1.3rem);
	line-height: 1.55;
	color: var(--tm-on-dark-soft);
}

/* Portraitrahmen — hält den Platz, bis das Foto da ist */
.tm-portrait {
	position: relative;
	aspect-ratio: 3 / 2;
	margin: 0;
	background: rgba(243, 245, 249, 0.05);
	border: 1px solid var(--tm-line-dark);
	border-radius: var(--tm-radius);
	overflow: hidden;
}

.tm-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tm-portrait__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.5rem;
	text-align: center;
	font-family: var(--tm-sans);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(243, 245, 249, 0.35);
}

/* Ortsleiste unter dem Hero */
.tm-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--tm-line-dark);
	font-family: var(--tm-sans);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(243, 245, 249, 0.55);
}

/* Sprungmarken unter dem Hero */
.tm-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--tm-line-dark);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tm-jump a {
	color: var(--tm-on-dark-faint);
	text-decoration: none;
}

.tm-jump a:hover {
	color: var(--tm-coral);
}

/* Kurzfakten neben dem Portrait */
.tm-facts {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	border-top: 1px solid var(--tm-line);
}

.tm-facts li {
	display: flex;
	gap: 1.25rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--tm-line);
	font-size: 0.98rem;
}

.tm-facts dt,
.tm-facts b {
	flex: 0 0 7.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tm-coral);
	padding-top: 0.28rem;
}

.tm-facts span {
	color: var(--tm-fg-soft);
}

/* ==========================================================================
   9. Angebotskarten
   ========================================================================== */

.tm-cards {
	display: grid;
	gap: 1px;
	background: var(--tm-line);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	overflow: hidden;
}

@media (min-width: 48rem) {
	.tm-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tm-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--tm-surface);
	transition: background-color 0.2s var(--tm-ease);
}

.tm-card:hover {
	background: var(--tm-surface-2);
}

.tm-card__label {
	font-family: var(--tm-sans);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tm-fg-faint);
}

.tm-card h3 {
	margin: 0;
}

.tm-card p {
	color: var(--tm-fg-soft);
	font-size: 1rem;
	margin: 0;
}

.tm-card__link {
	margin-top: auto;
	padding-top: 1.25rem;
	font-family: var(--tm-sans);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.tm-card__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.18s var(--tm-ease);
}

.tm-card__link:hover::after {
	transform: translateX(3px);
}

/* ==========================================================================
   10. Signatur — das Schrittdiagramm
   ========================================================================== */

.tm-steps {
	display: grid;
	gap: 0;
	counter-reset: tm-step;
}

@media (min-width: 56rem) {
	.tm-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tm-step {
	position: relative;
	padding: 0 0 3rem 3.7rem;
}

@media (min-width: 56rem) {
	.tm-step {
		padding: 6.4rem 1.5rem 0 0;
	}
}

/* Der Schrittpfad — gestrichelt, wächst beim Scrollen ein */
.tm-step::before {
	content: "";
	position: absolute;
	background-image: repeating-linear-gradient(
		var(--tm-dir, to bottom),
		var(--tm-line) 0 4px,
		transparent 4px 10px
	);
	transform-origin: top center;
	transform: scaleY(0);
	transition: transform 0.7s var(--tm-ease);
	transition-delay: var(--tm-delay, 0s);
}

@media (max-width: 55.999rem) {
	.tm-step::before {
		left: 0.97rem;
		top: 5.7rem;
		bottom: 0;
		width: 2px;
	}
}

@media (min-width: 56rem) {
	.tm-step::before {
		--tm-dir: to right;
		top: 4.4rem;
		left: 2.55rem;
		right: 0;
		height: 2px;
		transform-origin: left center;
		transform: scaleX(0);
	}
}

/* Nach dem letzten Schritt geht es nicht weiter. */
.tm-step:last-child::before {
	display: none;
}

.tm-steps.is-drawn .tm-step::before {
	transform: scaleY(1);
}

@media (min-width: 56rem) {
	.tm-steps.is-drawn .tm-step::before {
		transform: scaleX(1);
	}
}

/*
 * Der Fußabdruck steckt als Maske im CSS, nicht achtmal als Pfad im HTML.
 * Die Form ist aus icon.png der Marke herausgezogen.
 */
.tm-step__foot {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.05rem;
	height: 5.25rem;
	display: block;
}

.tm-step__foot::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--tm-line);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026.59%2068.0%27%3E%3Cpath%20d%3D%27M10.63%2047.42C9.63%2047.24%208.62%2046.78%207.68%2046.32C6.75%2045.86%205.82%2045.32%205.01%2044.67C4.19%2044.02%203.43%2043.25%202.78%2042.43C2.14%2041.61%201.55%2040.69%201.12%2039.73C0.70%2038.78%200.43%2037.72%200.25%2036.69C0.07%2035.67%200.08%2034.61%200.05%2033.58C0.01%2032.54%20-0.00%2031.51%200.02%2030.47C0.03%2029.43%200.11%2028.37%200.14%2027.32C0.17%2026.26%200.18%2025.22%200.19%2024.17C0.20%2023.12%200.19%2022.07%200.17%2021.02C0.16%2019.98%200.14%2018.93%200.11%2017.88C0.09%2016.83%200.01%2015.78%200.03%2014.73C0.05%2013.68%200.09%2012.58%200.25%2011.57C0.40%2010.56%200.61%209.63%200.96%208.67C1.31%207.72%201.79%206.71%202.36%205.85C2.92%204.99%203.61%204.18%204.37%203.49C5.14%202.79%206.03%202.17%206.94%201.66C7.86%201.15%208.84%200.72%209.85%200.45C10.86%200.18%2011.95%200.03%2012.98%200.01C14.01%20-0.00%2015.07%200.14%2016.04%200.36C17.01%200.59%2017.91%200.92%2018.81%201.34C19.72%201.76%2020.66%202.25%2021.48%202.88C22.30%203.51%2023.09%204.29%2023.72%205.12C24.36%205.95%2024.86%206.91%2025.29%207.86C25.72%208.81%2026.14%209.81%2026.32%2010.83C26.50%2011.84%2026.32%2012.91%2026.35%2013.95C26.37%2015.00%2026.41%2016.04%2026.45%2017.09C26.49%2018.13%2026.56%2019.18%2026.57%2020.22C26.59%2021.27%2026.55%2022.29%2026.54%2023.34C26.53%2024.38%2026.53%2025.44%2026.53%2026.48C26.52%2027.52%2026.52%2028.55%2026.50%2029.58C26.48%2030.62%2026.44%2031.64%2026.41%2032.68C26.37%2033.72%2026.43%2034.79%2026.31%2035.81C26.18%2036.83%2025.98%2037.84%2025.65%2038.81C25.31%2039.79%2024.88%2040.79%2024.31%2041.66C23.74%2042.53%2022.99%2043.32%2022.21%2044.01C21.43%2044.71%2020.54%2045.30%2019.63%2045.82C18.73%2046.34%2017.76%2046.88%2016.77%2047.14C15.79%2047.41%2014.73%2047.36%2013.71%2047.41C12.68%2047.45%2011.64%2047.60%2010.63%2047.42ZM10.49%2067.97C9.99%2067.94%209.49%2067.74%209.00%2067.60C8.52%2067.46%208.02%2067.33%207.57%2067.12C7.11%2066.91%206.65%2066.64%206.25%2066.34C5.85%2066.03%205.50%2065.66%205.16%2065.28C4.82%2064.91%204.46%2064.54%204.19%2064.11C3.91%2063.69%203.69%2063.23%203.50%2062.76C3.32%2062.29%203.17%2061.79%203.06%2061.30C2.95%2060.80%202.87%2060.29%202.86%2059.79C2.86%2059.29%202.97%2058.77%203.04%2058.29C3.11%2057.81%203.13%2057.36%203.28%2056.91C3.44%2056.46%203.72%2056.03%203.95%2055.60C4.19%2055.17%204.40%2054.72%204.70%2054.33C5.01%2053.94%205.41%2053.58%205.80%2053.27C6.20%2052.95%206.65%2052.70%207.09%2052.45C7.53%2052.19%207.96%2051.89%208.44%2051.73C8.91%2051.57%209.43%2051.58%209.92%2051.50C10.41%2051.41%2010.89%2051.26%2011.39%2051.23C11.88%2051.20%2012.38%2051.32%2012.89%2051.33C13.39%2051.33%2013.90%2051.23%2014.40%2051.26C14.91%2051.28%2015.43%2051.39%2015.92%2051.46C16.41%2051.53%2016.87%2051.55%2017.35%2051.66C17.83%2051.77%2018.34%2051.93%2018.80%2052.12C19.27%2052.31%2019.72%2052.54%2020.14%2052.81C20.56%2053.09%2020.99%2053.40%2021.34%2053.76C21.68%2054.13%2021.93%2054.57%2022.19%2055.00C22.46%2055.43%2022.71%2055.89%2022.92%2056.34C23.14%2056.80%2023.36%2057.25%2023.48%2057.74C23.59%2058.22%2023.56%2058.75%2023.59%2059.26C23.63%2059.77%2023.76%2060.29%2023.70%2060.78C23.63%2061.28%2023.39%2061.76%2023.22%2062.23C23.04%2062.71%2022.91%2063.21%2022.66%2063.64C22.41%2064.08%2022.03%2064.45%2021.70%2064.84C21.38%2065.23%2021.10%2065.67%2020.71%2065.99C20.33%2066.31%2019.85%2066.53%2019.40%2066.78C18.96%2067.02%2018.54%2067.32%2018.06%2067.48C17.59%2067.64%2017.06%2067.69%2016.56%2067.76C16.06%2067.82%2015.55%2067.88%2015.04%2067.89C14.54%2067.90%2014.03%2067.85%2013.52%2067.83C13.01%2067.81%2012.50%2067.75%2011.99%2067.78C11.48%2067.80%2010.98%2068.00%2010.49%2067.97Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026.59%2068.0%27%3E%3Cpath%20d%3D%27M10.63%2047.42C9.63%2047.24%208.62%2046.78%207.68%2046.32C6.75%2045.86%205.82%2045.32%205.01%2044.67C4.19%2044.02%203.43%2043.25%202.78%2042.43C2.14%2041.61%201.55%2040.69%201.12%2039.73C0.70%2038.78%200.43%2037.72%200.25%2036.69C0.07%2035.67%200.08%2034.61%200.05%2033.58C0.01%2032.54%20-0.00%2031.51%200.02%2030.47C0.03%2029.43%200.11%2028.37%200.14%2027.32C0.17%2026.26%200.18%2025.22%200.19%2024.17C0.20%2023.12%200.19%2022.07%200.17%2021.02C0.16%2019.98%200.14%2018.93%200.11%2017.88C0.09%2016.83%200.01%2015.78%200.03%2014.73C0.05%2013.68%200.09%2012.58%200.25%2011.57C0.40%2010.56%200.61%209.63%200.96%208.67C1.31%207.72%201.79%206.71%202.36%205.85C2.92%204.99%203.61%204.18%204.37%203.49C5.14%202.79%206.03%202.17%206.94%201.66C7.86%201.15%208.84%200.72%209.85%200.45C10.86%200.18%2011.95%200.03%2012.98%200.01C14.01%20-0.00%2015.07%200.14%2016.04%200.36C17.01%200.59%2017.91%200.92%2018.81%201.34C19.72%201.76%2020.66%202.25%2021.48%202.88C22.30%203.51%2023.09%204.29%2023.72%205.12C24.36%205.95%2024.86%206.91%2025.29%207.86C25.72%208.81%2026.14%209.81%2026.32%2010.83C26.50%2011.84%2026.32%2012.91%2026.35%2013.95C26.37%2015.00%2026.41%2016.04%2026.45%2017.09C26.49%2018.13%2026.56%2019.18%2026.57%2020.22C26.59%2021.27%2026.55%2022.29%2026.54%2023.34C26.53%2024.38%2026.53%2025.44%2026.53%2026.48C26.52%2027.52%2026.52%2028.55%2026.50%2029.58C26.48%2030.62%2026.44%2031.64%2026.41%2032.68C26.37%2033.72%2026.43%2034.79%2026.31%2035.81C26.18%2036.83%2025.98%2037.84%2025.65%2038.81C25.31%2039.79%2024.88%2040.79%2024.31%2041.66C23.74%2042.53%2022.99%2043.32%2022.21%2044.01C21.43%2044.71%2020.54%2045.30%2019.63%2045.82C18.73%2046.34%2017.76%2046.88%2016.77%2047.14C15.79%2047.41%2014.73%2047.36%2013.71%2047.41C12.68%2047.45%2011.64%2047.60%2010.63%2047.42ZM10.49%2067.97C9.99%2067.94%209.49%2067.74%209.00%2067.60C8.52%2067.46%208.02%2067.33%207.57%2067.12C7.11%2066.91%206.65%2066.64%206.25%2066.34C5.85%2066.03%205.50%2065.66%205.16%2065.28C4.82%2064.91%204.46%2064.54%204.19%2064.11C3.91%2063.69%203.69%2063.23%203.50%2062.76C3.32%2062.29%203.17%2061.79%203.06%2061.30C2.95%2060.80%202.87%2060.29%202.86%2059.79C2.86%2059.29%202.97%2058.77%203.04%2058.29C3.11%2057.81%203.13%2057.36%203.28%2056.91C3.44%2056.46%203.72%2056.03%203.95%2055.60C4.19%2055.17%204.40%2054.72%204.70%2054.33C5.01%2053.94%205.41%2053.58%205.80%2053.27C6.20%2052.95%206.65%2052.70%207.09%2052.45C7.53%2052.19%207.96%2051.89%208.44%2051.73C8.91%2051.57%209.43%2051.58%209.92%2051.50C10.41%2051.41%2010.89%2051.26%2011.39%2051.23C11.88%2051.20%2012.38%2051.32%2012.89%2051.33C13.39%2051.33%2013.90%2051.23%2014.40%2051.26C14.91%2051.28%2015.43%2051.39%2015.92%2051.46C16.41%2051.53%2016.87%2051.55%2017.35%2051.66C17.83%2051.77%2018.34%2051.93%2018.80%2052.12C19.27%2052.31%2019.72%2052.54%2020.14%2052.81C20.56%2053.09%2020.99%2053.40%2021.34%2053.76C21.68%2054.13%2021.93%2054.57%2022.19%2055.00C22.46%2055.43%2022.71%2055.89%2022.92%2056.34C23.14%2056.80%2023.36%2057.25%2023.48%2057.74C23.59%2058.22%2023.56%2058.75%2023.59%2059.26C23.63%2059.77%2023.76%2060.29%2023.70%2060.78C23.63%2061.28%2023.39%2061.76%2023.22%2062.23C23.04%2062.71%2022.91%2063.21%2022.66%2063.64C22.41%2064.08%2022.03%2064.45%2021.70%2064.84C21.38%2065.23%2021.10%2065.67%2020.71%2065.99C20.33%2066.31%2019.85%2066.53%2019.40%2066.78C18.96%2067.02%2018.54%2067.32%2018.06%2067.48C17.59%2067.64%2017.06%2067.69%2016.56%2067.76C16.06%2067.82%2015.55%2067.88%2015.04%2067.89C14.54%2067.90%2014.03%2067.85%2013.52%2067.83C13.01%2067.81%2012.50%2067.75%2011.99%2067.78C11.48%2067.80%2010.98%2068.00%2010.49%2067.97Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
	transition: background-color 0.4s var(--tm-ease);
	transition-delay: var(--tm-delay, 0s);
}

/* Linker und rechter Fuß wechseln sich ab, wie im echten Schrittdiagramm. */
.tm-step:nth-child(even) .tm-step__foot::before {
	transform: scaleX(-1) rotate(-7deg);
}

.tm-step:nth-child(odd) .tm-step__foot::before {
	transform: rotate(7deg);
}

.tm-steps.is-drawn .tm-step__foot::before {
	background-color: var(--tm-coral);
}

.tm-step__num {
	position: absolute;
	top: 1.05rem;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--tm-fg-faint);
	transition: color 0.4s var(--tm-ease);
	transition-delay: var(--tm-delay, 0s);
}

/* Ausgespart im Ballen — dasselbe Prinzip wie im Icon. */
.tm-steps.is-drawn .tm-step__num {
	color: var(--tm-ink);
}

.tm-step h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	margin-bottom: 0.4em;
}

.tm-step p {
	font-size: 1rem;
	color: var(--tm-fg-soft);
	margin: 0;
	max-width: 24rem;
}

.tm-section--dark .tm-step p {
	color: rgba(243, 245, 249, 0.7);
}

.tm-section--dark .tm-step::before {
	background-image: repeating-linear-gradient(
		var(--tm-dir, to bottom),
		var(--tm-line-dark) 0 4px,
		transparent 4px 10px
	);
}



/* ==========================================================================
   11. Über mich
   ========================================================================== */

.tm-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 56rem) {
	.tm-split {
		grid-template-columns: 0.85fr 1.15fr;
	}

	.tm-split--flip > *:first-child {
		order: 2;
	}
}

.tm-figure {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0;
	background: var(--tm-surface);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	overflow: hidden;
}

.tm-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tm-figure__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 1.5rem;
	text-align: center;
	font-family: var(--tm-sans);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tm-fg-faint);
}

/* ==========================================================================
   12. Preise
   ========================================================================== */

.tm-price-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tm-line);
}

.tm-price-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--tm-line);
}

.tm-price-list__name {
	font-family: var(--tm-sans);
	font-size: 1.2rem;
	font-weight: 500;
}

.tm-price-list__note {
	display: block;
	font-family: var(--tm-sans);
	font-size: 0.95rem;
	color: var(--tm-fg-soft);
	margin-top: 0.2rem;
}

.tm-price-list__value {
	font-family: var(--tm-sans);
	font-size: 1.05rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--tm-coral);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   13. Stimmen
   ========================================================================== */

.tm-quotes {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.tm-quotes {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

.tm-quote {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--tm-surface);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	margin: 0;
}

.tm-quote p {
	font-family: var(--tm-sans);
	font-size: 1.15rem;
	line-height: 1.45;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
}

.tm-quote footer {
	font-family: var(--tm-sans);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tm-fg-faint);
}

/* ==========================================================================
   14. FAQ — ohne JavaScript
   ========================================================================== */

.tm-faq {
	border-top: 1px solid var(--tm-line);
}

.tm-faq details {
	border-bottom: 1px solid var(--tm-line);
}

.tm-faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	font-family: var(--tm-sans);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.tm-faq summary::-webkit-details-marker {
	display: none;
}

.tm-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--tm-sans);
	font-size: 1.2rem;
	color: var(--tm-coral);
	transition: transform 0.2s var(--tm-ease);
}

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

.tm-faq details > div {
	padding-bottom: 1.5rem;
	max-width: 40rem;
	color: var(--tm-fg-soft);
}

/* ==========================================================================
   15. Kontakt & Formulare
   ========================================================================== */

.tm-cta {
	text-align: center;
}

.tm-cta .tm-btn-row {
	justify-content: center;
}

.tm-form-wrap {
	max-width: 38rem;
}

.tm-form-wrap label {
	display: block;
	font-family: var(--tm-sans);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tm-fg-soft);
	margin-bottom: 0.5rem;
}

.tm-form-wrap input[type="text"],
.tm-form-wrap input[type="email"],
.tm-form-wrap input[type="tel"],
.tm-form-wrap input[type="date"],
.tm-form-wrap select,
.tm-form-wrap textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	margin-bottom: 1.25rem;
	font-family: var(--tm-sans);
	font-size: 1rem;
	color: var(--tm-fg);
	background: var(--tm-surface);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	transition: border-color 0.18s var(--tm-ease);
}

.tm-form-wrap textarea,
.wpcf7 textarea {
	min-height: 9rem;
	resize: vertical;
}

.tm-form-wrap :is(input, select, textarea):focus,
.wpcf7 :is(input, select, textarea):focus {
	border-color: var(--tm-coral);
}

.tm-form-wrap input[type="submit"],
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	width: auto;
	padding: 0.95rem 1.8rem;
	font-family: var(--tm-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--tm-on-dark);
	background: var(--tm-coral);
	border: 0;
	border-radius: var(--tm-radius);
	cursor: pointer;
	transition: background-color 0.18s var(--tm-ease);
}

.tm-form-wrap input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	background: var(--tm-coral-hell);
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.tm-footer {
	background: var(--tm-ink);
	border-top: 1px solid var(--tm-line-dark);
	border-top: 1px solid var(--tm-line-dark);
	color: var(--tm-on-dark-soft);
	padding-block: clamp(3rem, 7vw, 5rem);
	font-size: 0.98rem;
}

.tm-footer a {
	color: var(--tm-on-dark);
	text-decoration: none;
}

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

.tm-footer__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 48rem) {
	.tm-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.tm-footer h2,
.tm-footer h3 {
	font-family: var(--tm-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tm-coral);
	margin-bottom: 1.1rem;
}

.tm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.tm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--tm-line-dark);
	font-family: var(--tm-sans);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(243, 245, 249, 0.45);
}

/* ==========================================================================
   17. Inhaltsseiten (Block-Editor)
   ========================================================================== */

.tm-page-header {
	padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--tm-line);
}

.tm-entry > * {
	max-width: var(--tm-content);
	margin-inline: auto;
}

.tm-entry > .alignwide {
	max-width: var(--tm-wide);
}

.tm-entry > .alignfull {
	max-width: none;
}

.tm-entry h2 {
	margin-top: 2em;
}

.tm-entry h3 {
	margin-top: 1.6em;
}

.tm-entry ul,
.tm-entry ol {
	padding-left: 1.3em;
	margin-bottom: 1.15em;
}

.tm-entry li {
	margin-bottom: 0.4em;
}

.tm-entry blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--tm-coral);
	font-family: var(--tm-sans);
	font-size: 1.2rem;
	line-height: 1.45;
}

/* ==========================================================================
   18. Reduzierte Bewegung
   ========================================================================== */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.tm-step::before {
		transform: none !important;
	}

	.tm-step__foot::before {
		background-color: var(--tm-coral);
	}

	.tm-step__num {
		color: var(--tm-ink);
	}
}

/* Ohne JavaScript ist das Diagramm trotzdem vollständig sichtbar */
.no-js .tm-step::before {
	transform: none !important;
}

.no-js .tm-step__foot::before {
	background-color: var(--tm-coral);
}

.no-js .tm-step__num {
	color: var(--tm-ink);
}

/* ==========================================================================
   19. Druck
   ========================================================================== */

@media print {
	.tm-header,
	.tm-footer,
	.tm-btn-row {
		display: none;
	}

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


/* Herausgestellter Leitsatz — trägt eine Seite allein, ohne Bild */
.tm-statement {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.35rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--tm-fg);
}

.tm-statement::before {
	content: "";
	display: block;
	width: 3.2rem;
	height: 4px;
	margin-bottom: 1.6rem;
	background: var(--tm-coral);
}

/* ==========================================================================
   20. Rechtstexte (Impressum, Datenschutz, AGB)

   Paragrafenüberschriften sind Wegweiser, keine Schlagzeilen. Deshalb hier
   klein, gesperrt und in Koralle statt in der Größe der Seitentitel.
   ========================================================================== */

.tm-legal h1 {
	font-size: clamp(2.1rem, 4.5vw, 3rem);
	margin-bottom: 1.2em;
}

.tm-legal h2 {
	margin: 3em 0 0.9em;
	padding-top: 1.4em;
	border-top: 1px solid var(--tm-line);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-coral);
}

.tm-legal h2:first-of-type {
	margin-top: 1.6em;
}

.tm-legal p {
	max-width: 38rem;
	margin-bottom: 1.1em;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tm-fg-soft);
}

.tm-legal a {
	color: var(--tm-coral);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Hinweise an dich selbst — im fertigen Text löschen. */
.tm-legal__note {
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--tm-coral);
	background: var(--tm-ink-2);
	font-size: 0.9rem;
}

/* ==========================================================================
   21. WPForms

   Die Selektoren sind bewusst lang: WPForms bringt eigene Regeln der Form
   "div.wpforms-container-full .wpforms-form input[type=text]" mit. Kürzere
   Selektoren verlieren dagegen unabhängig von der Ladereihenfolge.
   ========================================================================== */

body div.wpforms-container-full {
	max-width: 38rem;
	margin: 0;
}

/* ---------- Beschriftungen ---------- */

body div.wpforms-container-full .wpforms-form .wpforms-field-label {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--tm-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tm-fg-soft);
}

body div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--tm-coral);
	border: 0;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tm-fg-faint);
}

body div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-size: 0.85rem;
	color: var(--tm-fg-faint);
}

/* ---------- Eingabefelder ---------- */

body div.wpforms-container-full .wpforms-form input[type=text],
body div.wpforms-container-full .wpforms-form input[type=email],
body div.wpforms-container-full .wpforms-form input[type=tel],
body div.wpforms-container-full .wpforms-form input[type=url],
body div.wpforms-container-full .wpforms-form input[type=number],
body div.wpforms-container-full .wpforms-form input[type=date],
body div.wpforms-container-full .wpforms-form select,
body div.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 0.85rem 1rem;
	font-family: var(--tm-sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--tm-fg);
	background-color: var(--tm-ink-2);
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	box-shadow: none;
	transition: border-color 0.18s var(--tm-ease);
}

body div.wpforms-container-full .wpforms-form textarea {
	min-height: 9rem;
	resize: vertical;
}

body div.wpforms-container-full .wpforms-form input::placeholder,
body div.wpforms-container-full .wpforms-form textarea::placeholder {
	color: var(--tm-fg-faint);
}

body div.wpforms-container-full .wpforms-form input:focus,
body div.wpforms-container-full .wpforms-form select:focus,
body div.wpforms-container-full .wpforms-form textarea:focus {
	border-color: var(--tm-coral);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: none;
}

body div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 0 0 1.4rem;
}

/* ---------- Auswahlfelder ---------- */

body div.wpforms-container-full .wpforms-form .wpforms-field-radio label,
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox label {
	font-family: var(--tm-sans);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tm-fg);
}

/* ---------- Absende-Button ---------- */

body div.wpforms-container-full .wpforms-form button[type=submit],
body div.wpforms-container-full .wpforms-form .wpforms-submit {
	padding: 0.95rem 1.9rem;
	font-family: var(--tm-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--tm-ink);
	background-color: var(--tm-coral);
	border: 0;
	border-radius: var(--tm-radius);
	cursor: pointer;
	transition: background-color 0.18s var(--tm-ease), transform 0.18s var(--tm-ease);
}

body div.wpforms-container-full .wpforms-form button[type=submit]:hover,
body div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
	background-color: var(--tm-coral-hell);
	color: var(--tm-ink);
	transform: translateY(-1px);
}

/* ---------- Meldungen ---------- */

body div.wpforms-container-full .wpforms-form label.wpforms-error {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tm-coral);
}

body div.wpforms-container-full .wpforms-form input.wpforms-error,
body div.wpforms-container-full .wpforms-form textarea.wpforms-error {
	border-color: var(--tm-coral);
}

body div.wpforms-confirmation-container-full {
	padding: 1.5rem 1.75rem;
	color: var(--tm-fg);
	background-color: var(--tm-ink-2);
	border: 1px solid var(--tm-coral);
	border-radius: var(--tm-radius);
}

/* ---------- Auf hellen Abschnitten ---------- */

.tm-section--band div.wpforms-container-full .wpforms-form input[type=text],
.tm-section--band div.wpforms-container-full .wpforms-form input[type=email],
.tm-section--band div.wpforms-container-full .wpforms-form input[type=tel],
.tm-section--band div.wpforms-container-full .wpforms-form select,
.tm-section--band div.wpforms-container-full .wpforms-form textarea {
	background-color: #ffffff;
}