/* ==========================================================================
   CHOLLENTI – Theme
   Design-Tokens direkt von der bestehenden Seite übernommen:
   Roboto Mono 500, Ink #181818, Weiß, Grau #f7f7f7, Letter-Spacing 2px.
   Mobile first.
   ========================================================================== */

:root {
	--ink: #181818;
	--ink-soft: #6a6a6a;
	--paper: #ffffff;
	--soft: #f7f7f7;
	--line: rgba(24, 24, 24, .14);

	--font: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--font-titel: "Roboto Slab", Georgia, "Times New Roman", serif;
	--gold: #eabf00;

	--shell: 1200px;
	--gap: 20px;
	--rhythm: clamp(80px, 8vw, 116px); /* mehr Luft zwischen Abschnitten, mobil unverändert */
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

h1, h2, h3 {
	font-family: var(--font-titel);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.25;
	margin: 0;
}

.cht-shell {
	width: 100%;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gap);
}

.cht-skip {
	position: absolute;
	left: -9999px;
}

.cht-skip:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	background: var(--paper);
	padding: 10px 16px;
	border: 1px solid var(--ink);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.cht-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 0;
}

.cht-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: 16px;
}

.cht-header__brand img,
.custom-logo {
	display: block;
	max-height: 44px;
	width: auto;
}

.cht-header__wordmark {
	font-size: 18px;
	letter-spacing: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Burger ------------------------------------------------------------------ */

.cht-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.cht-burger__line {
	display: block;
	height: 1px;
	background: var(--ink);
	transition: transform .25s ease, opacity .25s ease;
}

.cht-burger[aria-expanded="true"] .cht-burger__line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.cht-burger[aria-expanded="true"] .cht-burger__line:nth-child(2) {
	opacity: 0;
}

.cht-burger[aria-expanded="true"] .cht-burger__line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Navigation -------------------------------------------------------------- */

.cht-nav {
	position: fixed;
	inset: 76px 0 0 0;
	background: var(--paper);
	padding: 20px var(--gap) 48px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .32s ease, transform .32s ease, visibility .32s;
}

.cht-nav.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cht-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Punkte laufen beim Öffnen sanft gestaffelt ein. */
.cht-nav__list > li {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.cht-nav.is-open .cht-nav__list > li { opacity: 1; transform: none; }
.cht-nav.is-open .cht-nav__list > li:nth-child(1) { transition-delay: .06s; }
.cht-nav.is-open .cht-nav__list > li:nth-child(2) { transition-delay: .12s; }
.cht-nav.is-open .cht-nav__list > li:nth-child(3) { transition-delay: .18s; }
.cht-nav.is-open .cht-nav__list > li:nth-child(4) { transition-delay: .24s; }
.cht-nav.is-open .cht-nav__list > li:nth-child(5) { transition-delay: .30s; }
.cht-nav.is-open .cht-nav__list > li:nth-child(6) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
	.cht-nav__list > li { transition: none; transform: none; opacity: 1; }
}

.cht-nav__list a {
	display: block;
	padding: 12px 0;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--ink);
	transition: color .25s ease;
}

.cht-nav__list a:hover,
.cht-nav__list a:focus-visible { color: var(--gold); }

.cht-nav__list .sub-menu {
	list-style: none;
	margin: 2px 0 12px;
	padding: 0 0 0 14px;
}

.cht-nav__list .sub-menu a {
	padding: 7px 0;
	font-size: clamp(15px, 4vw, 18px);
	color: var(--ink-soft, #7a7266);
}

/* Kein goldener Strich im mobilen Untermenü – wirkt zu prominent. */
.cht-nav__list .sub-menu a::after { display: none; }

/* --------------------------------------------------------------------------
   „Sofort verfügbar"-Hinweis im Taschen-Dropdown: dezent hervorgehobener CTA,
   der auf die fertigen, sofort kaufbaren Taschen zeigt (Gold-Pfeil rechts).
   Funktioniert im Desktop-Dropdown wie im mobilen Menü.
   -------------------------------------------------------------------------- */
.cht-nav__list .sub-menu .cht-nav__shop-hinweis { margin-top: 6px; }

.cht-nav__list .sub-menu .cht-nav__shop-hinweis > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(234, 191, 0, .10);
	border-top: 1px solid rgba(234, 191, 0, .35);
	color: var(--ink);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Pfeil rechts – setzt den Untermenü-Goldbalken-::after vollständig zurück. */
.cht-nav__list .sub-menu .cht-nav__shop-hinweis > a::after {
	content: "→";
	display: inline;
	position: static;
	inset: auto;
	width: auto;
	height: auto;
	margin-left: auto;
	background: none;
	color: var(--gold);
	transform: none;
	transition: transform .25s ease;
}

.cht-nav__list .sub-menu .cht-nav__shop-hinweis > a:hover { background: rgba(234, 191, 0, .18); }
.cht-nav__list .sub-menu .cht-nav__shop-hinweis > a:hover::after { transform: translateX(3px); }

@media (min-width: 900px) {
	.cht-burger {
		display: none;
	}

	.cht-nav {
		position: static;
		inset: auto;
		padding: 0;
		overflow: visible;
		transform: none;
		background: none;
		opacity: 1;
		visibility: visible;
	}

	.cht-nav__list {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	/* Menü, Sprachumschalter und Instagram stehen auf EINER Grundlinie –
	   vorher hing der Umschalter in einem Kästchen darüber. */
	.cht-nav {
		display: flex;
		align-items: baseline;
		gap: 45px;
	}

	.cht-nav__list li {
		position: relative;
	}

	/* Der Staffel-Einlauf gilt nur fürs mobile Menü – am Desktop müssen die
	   Punkte ohne „Öffnen"-Zustand sichtbar sein. */
	.cht-nav__list > li {
		opacity: 1;
		transform: none;
	}

	/* Gemessen am Original: Roboto Mono, 15 px, Gewicht 400, normale
	   Schreibweise, KEINE Sperrung. Ich hatte 12 px, Versalien und 0,12em
	   Laufweite – das wirkt hart und technisch. Das Original wirkt ruhig,
	   weil es die Wörter einfach stehen lässt. */

	.cht-nav__list > li > a {
		padding: 6px 0 18px;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		border: 0;
	}

	/* Gemessen am Original: 45 px zwischen den Menüpunkten. */
	.cht-nav__list {
		gap: 45px;
	}

	.cht-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		padding: 0;
		background: #fff;
		border: 0;
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .25s ease, transform .25s ease;
	}

	.cht-nav__list li:hover > .sub-menu,
	.cht-nav__list li:focus-within > .sub-menu {
		transform: translateY(0);
	}

	.cht-nav__list .sub-menu li:not(:last-child) > a {
		border-bottom: 1px solid rgba(24, 24, 24, .1);
	}

	.cht-nav__list .sub-menu a {
		display: block;
		padding: 14px 20px;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		white-space: nowrap;
	}

	.cht-nav__list li:hover > .sub-menu,
	.cht-nav__list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}
}

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

.cht-hero {
	padding: 56px 0 40px;
	text-align: center;
}

.cht-hero__title {
	font-size: 32px;
	text-transform: uppercase;
}

.cht-hero__sub {
	margin: 12px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

@media (min-width: 768px) {
	.cht-hero {
		padding: 90px 0 60px;
	}

	.cht-hero__title {
		font-size: 46px;
	}
}

/* --------------------------------------------------------------------------
   Taschenseite
   -------------------------------------------------------------------------- */

.cht-bag__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: var(--rhythm) var(--gap); /* seitlicher Abstand der Shell wiederherstellen – sonst deckt der weiße Rahmen den Text zu */
}

@media (min-width: 900px) {
	.cht-bag__main {
		grid-template-columns: 1.2fr 1fr;
		gap: 70px;
		align-items: start;
	}

	/* Der Text läuft mit, während man durch die Fotos scrollt. Sonst schaut man
	   irgendwann auf Bilder ohne zu wissen, was sie kosten. */
	.cht-bag__info {
		position: sticky;
		top: 130px;
	}
}

.cht-bag__name {
	font-family: var(--font-titel);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: none;
}

.cht-bag__sub {
	margin: 10px 0 0;
	font-family: var(--font-titel);
	font-size: 16px;
	color: var(--gold);
}

.cht-bag__price {
	margin: 22px 0 26px;
	font-family: var(--font-titel);
	font-size: 26px;
	letter-spacing: 1px;
}

.cht-bag__text {
	font-size: 15px;
	line-height: 1.85;
}

/* Produktfotos als Slider: ein Foto groß, Pfeile, Punkte ------------------- */

.cht-fotos {
	position: relative;
	touch-action: pan-y; /* horizontale Wische gehen an JS statt an den Seiten-Scroll → Wischen am Handy */
	-webkit-user-select: none;
	user-select: none;
}

.cht-fotos__liste {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: 2 / 3;
	background: var(--soft);
	overflow: hidden;
}

.cht-foto {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .55s ease;
}

.cht-foto.is-aktiv {
	opacity: 1;
}

.cht-foto__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

/* Die Pfeile: schlanke, in die Länge gezogene Winkel in SCHWARZ.
   Kein Kreis, kein Gold – nur die Linie. Gestreckt (scaleY 1.7) wirkt sie
   ruhiger und teurer als ein gleichseitiger Haken.
   Der zarte helle Schein hält sie auch auf dunklen Fotos lesbar. */

.cht-fotos__pfeil {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 46px;
	padding: 0;
	background: rgba(255, 255, 255, .85);
	border: 1px solid rgba(234, 191, 0, .5);
	border-radius: 50%;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.cht-fotos__pfeil::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	border-top: 2px solid var(--gold);
	border-right: 2px solid var(--gold);
}

.cht-fotos__pfeil--zurueck {
	left: 14px;
}

.cht-fotos__pfeil--zurueck::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.cht-fotos__pfeil--vor {
	right: 14px;
}

.cht-fotos__pfeil--vor::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.cht-fotos__pfeil:hover {
	background: #fff;
	border-color: var(--gold);
	box-shadow: 0 5px 18px rgba(0, 0, 0, .26);
}

.cht-fotos__pfeil--zurueck:hover {
	transform: translateY(-50%) translateX(-2px);
}

.cht-fotos__pfeil--vor:hover {
	transform: translateY(-50%) translateX(2px);
}

.cht-fotos__pfeil:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Punkte darunter. */

.cht-fotos__punkte {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.cht-fotos__punkt {
	width: 10px;
	height: 10px;
	padding: 0;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
	transition: background-color .25s ease, transform .25s ease;
}

.cht-fotos__punkt.is-aktiv {
	background: var(--gold);
	transform: scale(1.35);
}

/* Text rechts: Absätze, Fettungen, Maße, Hinweis --------------------------- */

.cht-bag__text p {
	margin: 0 0 18px;
}

.cht-bag__text strong,
.cht-bag__text b {
	font-weight: 500;
}

.cht-bag__size {
	margin: 22px 0 0;
	font-weight: 500;
}

.cht-bag__note {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--ink-soft);
}

/* Die goldene Linie und die Kontaktzeile darunter – wie im Original. */

.cht-bag__linie {
	margin: 34px 0 24px;
	border: 0;
	border-top: 2px solid var(--gold);
}

.cht-bag__kontakt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cht-bag__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .3s ease;
}

.cht-bag__mail:hover,
.cht-bag__insta:hover {
	color: var(--gold);
}

.cht-bag__icon svg,
.cht-bag__insta svg {
	display: block;
	width: 19px;
	height: 19px;
}

.cht-bag__name {
	font-family: var(--font-titel);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: none;
}

.cht-bag__sub {
	margin: 10px 0 0;
	font-family: var(--font-titel);
	font-size: 16px;
	color: var(--gold);
}

.cht-bag__price {
	margin: 22px 0 26px;
	font-family: var(--font-titel);
	font-size: 26px;
	letter-spacing: 1px;
}

.cht-bag__text {
	font-size: 15px;
	line-height: 1.85;
}

.cht-bag__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cht-bag__shot.is-lead {
	grid-column: 1 / -1;
}

.cht-bag__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.cht-bag__name {
	font-size: 28px;
	text-transform: uppercase;
}

.cht-bag__sub {
	margin: 8px 0 0;
	color: var(--ink-soft);
}

.cht-bag__price {
	margin: 24px 0;
	font-size: 22px;
	letter-spacing: 1px;
}

.cht-bag__text p {
	margin: 0 0 18px;
}

.cht-bag__size {
	margin: 24px 0 0;
}

.cht-bag__note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink-soft);
}

.cht-bag__cta {
	margin: 32px 0 0;
}

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

.cht-btn {
	display: inline-block;
	padding: 15px 34px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--ink);
	transition: color .2s ease, background-color .2s ease;
}

.cht-btn:hover,
.cht-btn:focus-visible {
	color: var(--paper);
	background: var(--ink);
}

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */

.cht-section {
	padding: var(--rhythm) 0;
}

.cht-section--soft {
	background: var(--soft);
}

.cht-section__title {
	font-size: 22px;
	text-transform: uppercase;
	text-align: center;
}

.cht-section__lead {
	max-width: 620px;
	margin: 12px auto 36px;
	text-align: center;
	font-size: 14px;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Taschenübersicht
   -------------------------------------------------------------------------- */

.cht-bags {
	padding-bottom: var(--rhythm);
}

.cht-bags__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.cht-bags__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cht-bags__link {
	display: block;
	text-decoration: none;
}

.cht-bags__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: opacity .3s ease;
}

.cht-bags__link:hover .cht-bags__img {
	opacity: .82;
}

.cht-bags__name {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cht-bags__price {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Fließtext
   -------------------------------------------------------------------------- */

.cht-prose {
	max-width: 760px;
	padding-top: var(--rhythm);
	padding-bottom: var(--rhythm);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink);
}

/* Gleichmäßiger vertikaler Fluss statt fixer Ränder je Element. */
.cht-prose > * + * {
	margin-top: 1.1em;
}

.cht-prose h2 {
	margin: 1.7em 0 .5em;
	font-family: var(--font-titel);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cht-prose h3 {
	margin: 1.4em 0 .4em;
	font-size: 19px;
	letter-spacing: .5px;
}

.cht-prose p {
	margin: 0;
}

.cht-prose a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cht-prose ul,
.cht-prose ol {
	margin: 1em 0;
	padding-left: 1.4em;
}

.cht-prose li {
	margin: .35em 0;
}

.cht-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.cht-prose figure {
	margin: 1.8em 0;
}

.cht-prose figcaption {
	margin-top: .6em;
	font-size: 14px;
	color: var(--ink-soft, #666);
}

.cht-prose blockquote {
	margin: 1.8em 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--gold);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Footer – Aufbau wie im Original:
   Überschrift, Claim, nur das Instagram-Symbol (kein Knopf), eine feine Linie,
   darunter das große Logo, ganz unten die Rechtstexte.
   -------------------------------------------------------------------------- */

.cht-footer {
	position: relative;
	padding: var(--rhythm) 0 48px;
	text-align: center;
	color: var(--ink);
	/* Buchdeckel-Prinzip: dasselbe Banner-Foto wie der Seitenkopf, hier aber
	   ruhiger – anderer Ausschnitt (oben statt Mitte) und ein zarter, oben
	   dichter Papier-Schleier, der nach unten ausblendet. So wirkt der Footer
	   als leise Wiederholung des lauten Kopfs, nicht als zweites lautes Bild. */
	background-image:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .80) 0%,
			rgba(255, 255, 255, .55) 30%,
			rgba(255, 255, 255, .34) 68%,
			rgba(255, 255, 255, .46) 100%
		),
		var(--cht-kopfbild);
	background-size: cover, cover;
	background-position: center, center top;
	background-repeat: no-repeat, no-repeat;
}

/* Nach-oben-Button: kreisförmig, gestrichelter Gold-Ring als Häkel-/Stich-Anklang. */
.cht-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	background: var(--paper);
	border: 2px dashed var(--gold);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
	opacity: 0;
	transform: translateY(12px) scale(.9);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.cht-top.is-sichtbar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.cht-top:hover {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

.cht-top svg {
	display: block;
	transition: transform .2s ease;
}

.cht-top:hover svg {
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.cht-top {
		right: 14px;
		bottom: 14px;
		width: 46px;
		height: 46px;
	}
}

.cht-footer__title {
	font-family: var(--font-titel);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 500;
	letter-spacing: 2px;
}

.cht-footer__claim {
	margin: 20px 0 30px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--ink);
}

/* Nur das Symbol, kein Kasten drumherum. Der Rahmen wirkte wie ein
   Werbebanner – das Original zeigt schlicht das Zeichen. */

.cht-footer__insta {
	display: inline-flex;
	color: var(--gold);
	transition: transform .3s ease, opacity .3s ease;
}

.cht-footer__insta svg {
	display: block;
	width: 26px;
	height: 26px;
}

.cht-footer__insta:hover {
	transform: scale(1.12);
	opacity: .8;
}

.cht-footer__linie {
	width: min(560px, 78%);
	margin: 40px auto 46px;
	border: 0;
	border-top: 1px solid var(--line);
}

.cht-footer__logo {
	margin: 0 0 40px;
}

.cht-footer__img {
	display: block;
	width: auto;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
}

.cht-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cht-footer__list a {
	font-size: 13px;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--ink);
	transition: color .3s ease;
}

.cht-footer__list a:hover {
	color: var(--gold);
}

/* Bewegung reduzieren ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ==========================================================================
   STARTSEITE
   ========================================================================== */

/* Kopfbereich: Bilder wechseln langsam durch, Text liegt darüber. ----------- */

.cht-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 78vh;
	padding: 90px 0;
	overflow: hidden;
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45); /* statt eines Schleiers */
}

.cht-hero__bilder {
	position: absolute;
	inset: 0;
}

.cht-hero__bild {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.6s ease;
}

.cht-hero__bild.is-aktiv {
	opacity: 1;
}

/* Keine Box mehr über dem Foto. Die Verdunklung schmiegt sich als weicher,
   mehrschichtiger Schatten NUR an die Textzeilen – lesbar auf jedem Motiv,
   ohne das Bild abzudunkeln. */

.cht-hero__inhalt {
	position: relative;
	z-index: 2;
}

.cht-hero__eyebrow,
.cht-hero__titel,
.cht-hero__sub {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .55),
		0 1px 10px rgba(0, 0, 0, .55),
		0 2px 26px rgba(0, 0, 0, .40);
}

.cht-hero__eyebrow {
	margin: 0 0 18px;
	font-family: var(--font-titel);
	font-size: clamp(13px, 1.3vw, 17px);
	font-weight: 400;
	letter-spacing: 1px;
	opacity: .95;
}

.cht-hero__titel {
	max-width: none;
	margin: 0 auto;
	font-size: clamp(22px, 3.1vw, 47px);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.25;
	text-transform: none;
	white-space: nowrap; /* eine Zeile, wie im Original */
}

/* Auf schmalen Displays passt der Satz nicht in eine Zeile – dort darf er
   umbrechen. Ein abgeschnittener Satz wäre schlimmer als ein Umbruch. */

@media (max-width: 640px) {
	.cht-hero__titel {
		white-space: normal;
		font-size: clamp(22px, 6.4vw, 32px);
	}
}

.cht-hero__sub {
	margin: 20px 0 0;
	font-family: var(--font-titel);
	font-size: clamp(15px, 1.6vw, 20px);
	font-weight: 400;
	letter-spacing: normal;
	color: #fff;
}

/* Beim Laden: die drei Zeilen steigen nacheinander auf. Kein Feuerwerk –
   eine ruhige Bewegung, die den Blick führt. */

.cht-hero__eyebrow,
.cht-hero__titel,
.cht-hero__sub {
	opacity: 0;
	transform: translateY(18px);
	animation: cht-auftauchen 1.1s cubic-bezier(.16, .84, .3, 1) forwards;
}

.cht-hero__eyebrow {
	animation-delay: .15s;
}

.cht-hero__titel {
	animation-delay: .35s;
}

.cht-hero__sub {
	animation-delay: .55s;
}

@keyframes cht-auftauchen {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cht-hero__eyebrow,
	.cht-hero__titel,
	.cht-hero__sub {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Taschen ------------------------------------------------------------------ */

.cht-section__titel {
	margin: 0 0 48px;
	font-size: clamp(26px, 3.6vw, 47px);
	font-weight: 500;
	letter-spacing: 2px;
	text-align: center;
	text-transform: none;
}

.cht-section__titel--links {
	text-align: left;
	margin-bottom: 20px;
}

.cht-taschen__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.cht-taschen__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cht-taschen__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

/* Reihenfolge wie im Original: Name, goldene Linie, dann das Foto. */

.cht-taschen__bild {
	display: block;
	order: 3;
	overflow: hidden;
}

.cht-taschen__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: transform .6s ease;
}

.cht-taschen__link:hover .cht-taschen__img {
	transform: scale(1.05);
}

.cht-taschen__name {
	display: block;
	order: 1;
	margin: 0 0 16px;
	font-family: var(--font-titel);
	font-size: clamp(18px, 1.8vw, 23px);
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
}

/* Die goldene Linie unter dem Namen – im Original ein eigener Trenner. */

.cht-taschen__linie {
	order: 2;
	width: 100%;
	height: 2px;
	margin: 0 0 24px;
	background: var(--gold);
}

/* Weg zum Unikat ----------------------------------------------------------- */

.cht-weg__inner,
.cht-victoria__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 900px) {
	.cht-weg__inner,
	.cht-victoria__inner {
		grid-template-columns: 1fr 1.1fr;
		gap: 70px;
	}
}

.cht-weg__img,
.cht-victoria__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.cht-weg__lead,
.cht-victoria__lead {
	margin: 0 0 30px;
	max-width: 60ch;
}

.cht-schritte {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	counter-reset: schritt;
}

.cht-schritt {
	padding: 20px 0;
	border-top: 1px solid var(--line);
}

.cht-schritt:last-child {
	border-bottom: 1px solid var(--line);
}

.cht-schritt__titel {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.cht-schritt__text {
	margin: 0;
	font-size: 14px;
	color: var(--ink-soft);
}

/* Geschichte --------------------------------------------------------------- */

.cht-story {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60vh;
	padding: 80px 0;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

.cht-story::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .15);
}

.cht-story__inhalt {
	position: relative;
	z-index: 2;
}

.cht-story__titel {
	max-width: 20ch;
	margin: 0 auto 30px;
	font-size: clamp(24px, 3.4vw, 42px);
	text-transform: uppercase;
	line-height: 1.25;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.cht-btn--hell {
	/* Für dunkle Flächen: weiße Schrift, weiße Kontur. */
	color: #fff;
	border-color: #fff;
}

/* Für helle Flächen: dunkle Schrift mit feiner Kontur, füllt sich beim
   Überfahren. Die weiße Variante wäre hier unsichtbar. */
.cht-btn--linie {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}

.cht-btn--linie:hover,
.cht-btn--linie:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.cht-btn--hell:hover,
.cht-btn--hell:focus-visible {
	color: var(--ink);
	background: #fff;
}

/* Victoria ----------------------------------------------------------------- */

.cht-victoria__sub {
	margin: 0 0 20px;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--ink-soft);
}

/* Kundenstimmen: Foto links, eine Stimme rechts, blätterbar ----------------- */

.cht-stimmen__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 900px) {
	.cht-stimmen__inner {
		grid-template-columns: 1fr 1.1fr;
		gap: 70px;
	}
}

.cht-stimmen__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.cht-stimmen__buehne {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 10px;
}

.cht-stimmen__liste {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 260px;
}

.cht-stimme {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.16, .84, .3, 1);
	pointer-events: none;
	display: flex;
	align-items: center;
}

.cht-stimme.is-aktiv {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.cht-stimme__zitat {
	margin: 0;
	text-align: center;
}

.cht-stimme__titel {
	margin: 0 0 18px;
	font-family: var(--font-titel);
	font-size: clamp(17px, 1.8vw, 22px);
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--gold);
}

.cht-stimme__zitat p {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ink);
}

.cht-stimme__strich {
	display: block;
	width: 64px;
	height: 2px;
	margin: 24px auto 18px;
	background: var(--gold);
}

.cht-stimme__name {
	font-family: var(--font-titel);
	font-size: 15px;
	letter-spacing: 1px;
}

/* Pfeile: schlanke goldene Winkel, wie in der Farbgallerie. */

.cht-stimmen__pfeil {
	position: relative;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
}

.cht-stimmen__pfeil::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	border-top: 2px solid var(--gold);
	border-right: 2px solid var(--gold);
	transition: transform .2s ease, opacity .2s ease;
}

.cht-stimmen__pfeil--zurueck::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.cht-stimmen__pfeil--vor::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.cht-stimmen__pfeil:hover::before {
	opacity: .6;
}

.cht-stimmen__punkte {
	grid-column: 2;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

.cht-stimmen__punkt {
	width: 8px;
	height: 8px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--gold);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}

.cht-stimmen__punkt.is-aktiv {
	background: var(--gold);
	transform: scale(1.3);
}

/* Instagram ---------------------------------------------------------------- */

.cht-instagram {
	padding-bottom: 40px;
}

/* Sprachumschalter --------------------------------------------------------- */

.cht-lang {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 0 18px; /* dieselbe Grundlinie wie die Menüpunkte */
	font-size: 15px;
	letter-spacing: normal;
	text-decoration: none;
	border: 0;
	transition: color .3s ease;
}

.cht-lang:hover {
	color: var(--gold);
}

/* Ein Globus statt einer Flagge: Flaggen stehen für Länder, nicht für
   Sprachen. Englisch wird nicht nur in den USA gesprochen. */

.cht-lang__globus {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 1px solid currentColor;
	border-radius: 50%;
	position: relative;
	opacity: .75;
}

.cht-lang__globus::before,
.cht-lang__globus::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.cht-lang__globus::before {
	transform: scaleX(.45);
}

.cht-lang__globus::after {
	border: 0;
	border-top: 1px solid currentColor;
	border-radius: 0;
	top: 50%;
}

.cht-footer__insta {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cht-leer {
	text-align: center;
	color: var(--ink-soft);
}

/* Kleiner Kopfbereich auf Unterseiten ------------------------------------- */

.cht-hero--klein {
	min-height: 58vh;
	padding: 150px 0 60px;
}

.cht-hero--klein .cht-hero__titel {
	white-space: normal;
	font-size: clamp(28px, 4vw, 47px);
}

/* 404 ---------------------------------------------------------------------- */

.cht-404 {
	padding: 120px 0 var(--rhythm);
	text-align: center;
}

.cht-404__gross {
	font-size: clamp(18px, 2.4vw, 26px);
	letter-spacing: .08em;
}

.cht-404__titel {
	margin: 10px 0 30px;
	font-size: clamp(60px, 12vw, 130px);
	letter-spacing: 6px;
}

.cht-teaser {
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.cht-teaser__title {
	margin: 0 0 8px;
	font-size: 18px;
}

.cht-teaser__title a {
	text-decoration: none;
}

/* ==========================================================================
   KOPFZEILE
   ==========================================================================

   Zwei Zustände:

   1. Ganz oben auf der Startseite: transparent, das Bild reicht bis unter das
      Menü, das Logo ist weiß.
   2. Sobald man scrollt: weiß, klebt oben, Logo wieder schwarz.

   Vorher war sie nur absolut positioniert – beim Scrollen war sie schlicht
   weg, samt Logo. Genau das ist aufgefallen.
   ========================================================================== */

.cht-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 0; /* keine Haarlinie – Trennung liefert im Scroll-Zustand der box-shadow */
	transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.cht-header--transparent {
	background: transparent;
	border-bottom-color: transparent;
}

/* Menü, Umschalter und Instagram bleiben SCHWARZ – auch über dem Foto.
   Die Marke soll die Marke bleiben; ein weiß eingefärbtes Logo ist ein
   anderes Logo. */

.cht-header--transparent .cht-nav__list > li > a,
.cht-header--transparent .cht-lang,
.cht-header--transparent .cht-insta {
	color: var(--ink);
	text-shadow: none;
}



.cht-header--transparent .cht-burger__line {
	background: var(--ink);
}

.cht-header--transparent .custom-logo {
	filter: none;
}

/* Startseite über dem Foto: weiß, mit zartem dunklem Verlauf oben für die
   Lesbarkeit auf hellen Motiven. Beim Scrollen (is-gescrollt) greift wieder
   die solide, dunkle Leiste. Taschenseiten (--dunkel) bleiben schwarz. */

.cht-header--transparent:not(.cht-header--dunkel):not(.is-gescrollt) {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0));
}

.cht-header--transparent:not(.cht-header--dunkel):not(.is-gescrollt) .cht-nav__list > li > a,
.cht-header--transparent:not(.cht-header--dunkel):not(.is-gescrollt) .cht-lang,
.cht-header--transparent:not(.cht-header--dunkel):not(.is-gescrollt) .cht-insta {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.cht-header--transparent:not(.cht-header--dunkel):not(.is-gescrollt) .cht-burger__line {
	background: #fff;
}

.cht-header--transparent:not(.cht-header--dunkel):not(.is-gescrollt) .custom-logo {
	filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
}


/* Gescrollt: zurück zu Weiß, mit weichem Schatten. */

.cht-header.is-gescrollt {
	background: var(--paper);
	box-shadow: 0 2px 24px rgba(0, 0, 0, .07);
}

.cht-header.is-gescrollt .cht-nav__list > li > a,
.cht-header.is-gescrollt .cht-lang {
	color: var(--ink);
	text-shadow: none;
}



.cht-header.is-gescrollt .custom-logo {
	filter: none;
}

.cht-header.is-gescrollt .cht-burger__line {
	background: var(--ink);
}

.cht-header__brand img,
.custom-logo {
	max-height: 76px;
	width: auto;
	transition: max-height .35s ease, filter .35s ease;
}

.cht-header.is-gescrollt .custom-logo {
	max-height: 54px;
}

.cht-header__inner {
	min-height: 104px;
	transition: min-height .35s ease;
}

.cht-header.is-gescrollt .cht-header__inner {
	min-height: 76px;
}

/* Die WordPress-Adminleiste überlappt sonst die Kopfzeile. */

.admin-bar .cht-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .cht-header {
		top: 46px;
	}
}

/* Menü: goldene Linie, die von links hereinläuft. Dezent, aber man sieht,
   dass etwas passiert. */

.cht-nav__list > li > a {
	position: relative;
	transition: color .3s ease;
}

/* Der Unterstrich sitzt tief unter dem Wort – nicht direkt darunter.
   Im Original: 4 px hoch, golden, so breit wie das Wort. */

.cht-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s cubic-bezier(.16, .84, .3, 1);
	/* Eigene, stabile Ebene: sonst zeichnet Chrome die scaleX-Animation beim
	   ersten Hover in der fixierten Kopfzeile manchmal nicht – sie „springt“
	   erst an, nachdem ein anderes Ereignis den Layer neu malt. */
	will-change: transform;
	backface-visibility: hidden;
}

.cht-nav__list > li > a:hover,
.cht-nav__list > li > a:focus-visible,
.cht-nav__list > li.current-menu-item > a {
	color: var(--gold);
}

.cht-nav__list > li > a:hover::after,
.cht-nav__list > li > a:focus-visible::after,
.cht-nav__list > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.cht-header--transparent .cht-nav__list > li > a:hover,
.cht-header--transparent .cht-nav__list > li.current-menu-item > a {
	color: var(--gold);
}

/* Untermenü: IMMER dunkle Schrift auf Weiß.
   Vorher erbte es das Weiß der transparenten Kopfzeile – weiß auf weiß. */

.cht-nav__list .sub-menu {
	background: var(--paper);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
	border-color: var(--line);
}

.cht-nav__list .sub-menu a,
.cht-header--transparent .cht-nav__list .sub-menu a,
.cht-header.is-gescrollt .cht-nav__list .sub-menu a {
	color: var(--ink);
	text-shadow: none;
}

.cht-nav__list .sub-menu a:hover {
	color: var(--gold);
}

/* Untermenü: goldener Strich als Markierung – SENKRECHT an der linken Kante des
   Untermenüs, nicht als Unterstrich. Fährt bei Hover / beim aktuellen Punkt von
   oben herein. */
.cht-nav__list .sub-menu a {
	position: relative;
}

.cht-nav__list .sub-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--gold);
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform .28s cubic-bezier(.16, .84, .3, 1);
	will-change: transform;
	backface-visibility: hidden;
}

.cht-nav__list .sub-menu a:hover::after,
.cht-nav__list .sub-menu .current-menu-item > a::after {
	transform: scaleY(1);
}

/* Der Hero liegt unter der Kopfzeile und trägt sie. */

.cht-hero {
	padding-top: 150px;
	min-height: 92vh;
}

/* Platz für die feste Kopfzeile – aber NICHT dort, wo ein Bild darunter liegt.
   Auf Startseite und Taschenseiten reicht das Bild bis ganz nach oben und
   trägt die Kopfzeile. Genau dieses Polster hat den weißen Streifen über dem
   Kopfbild erzeugt: die Kopfzeile war transparent, aber darunter lag Weiß. */

/* Alle Seiten außer der Startseite beginnen mit demselben Abstand unter der
   Kopfzeile – dadurch sitzen die Überschriften überall auf gleicher Höhe,
   auch auf den Taschenseiten. */
body:not(.home) .cht-main {
	padding-top: 104px;
}

@media (max-width: 899px) {
	body:not(.home) .cht-main {
		padding-top: 88px;
	}
}

/* ==========================================================================
   DIE DREI SCHRITTE – mit Symbol
   ========================================================================== */

.cht-schritt {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
}

.cht-schritt__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: var(--gold);
}

.cht-schritt__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cht-schritt__inhalt {
	flex: 1 1 auto;
}

.cht-schritt__titel {
	margin: 0 0 6px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ==========================================================================
   VICTORIA – Werte aus dem Original
   Überschrift Slab 37,5px/500 · Unterzeile Slab 17,25px in GOLD · Text Mono 15px
   ========================================================================== */

.cht-victoria .cht-section__titel {
	font-size: clamp(24px, 2.8vw, 38px);
}

.cht-victoria__sub {
	margin: 0 0 24px;
	font-family: var(--font-titel);
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 400;
	letter-spacing: normal;
	color: var(--gold);
}

.cht-victoria__lead {
	font-size: 15px;
	line-height: 1.85;
}

.cht-victoria__unterschrift {
	margin: 26px 0 30px;
}

.cht-victoria__signatur {
	display: block;
	width: auto;
	max-width: 286px;
	height: auto;
}

/* ==========================================================================
   SCROLL-ANIMATIONEN
   Nur zwei Bewegungen, beide dezent: Bilder fahren von der Seite herein,
   Elemente tauchen gestaffelt auf. Wer „Bewegung reduzieren" eingestellt hat,
   sieht alles sofort und ohne Bewegung.
   ========================================================================== */

[data-anim] {
	opacity: 0;
	transition: opacity .9s ease, transform .9s cubic-bezier(.16, .84, .3, 1);
	will-change: opacity, transform;
}

[data-anim="von-links"] {
	transform: translateX(-42px);
}

[data-anim="auftauchen"] {
	transform: translateY(24px);
}

[data-anim].is-sichtbar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-anim],
	[data-anim].is-sichtbar {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   ENTWURFS-BAND (nur auf der Testkopie)
   ==========================================================================

   Unten am Bildschirm, immer sichtbar, aber schmal genug, um beim Anschauen
   nicht zu stören. Dunkel mit goldener Marke – es soll nach Notiz aussehen,
   nicht nach Fehlermeldung.
   ========================================================================== */

.cht-entwurf {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: rgba(18, 18, 18, .94);
	backdrop-filter: blur(6px);
	color: #fff;
}

.cht-entwurf__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 11px 20px;
	text-align: center;
}

.cht-entwurf__marke {
	padding: 4px 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #181818;
	background: var(--gold);
	border-radius: 2px;
}

.cht-entwurf__text {
	font-size: 12px;
	letter-spacing: .04em;
}

.cht-entwurf__stand {
	font-size: 11px;
	letter-spacing: .04em;
	opacity: .6;
}

/* Damit der Footer nicht unter dem Band verschwindet. */

body:has(.cht-entwurf) .cht-footer {
	padding-bottom: 96px;
}

@media (max-width: 640px) {
	.cht-entwurf__stand {
		display: none;
	}

	.cht-entwurf__text {
		font-size: 11px;
	}
}

/* ==========================================================================
   KOPFBEREICH DER TASCHENSEITE
   ==========================================================================

   Gemessen am Original:
   Titel   Roboto Mono, 46,5 px, 500, 2 px Laufweite, dunkel (#191919), LINKS
   Unter   Roboto Mono, 19,5 px, dunkel, links
   Grund   helles Hintergrundbild, Navigation liegt transparent darauf

   Ich hatte hier einen weißen Slab-Titel mittig über einem Produktfoto – das
   war die Startseiten-Optik, nicht die der Taschenseite. Zwei verschiedene
   Kopfbereiche, und ich habe sie in einen Topf geworfen.
   ========================================================================== */

.cht-baghero {
	display: flex;
	/* Oben ausgerichtet statt mittig: sonst wandert die Überschrift je nach
	   Länge des Untertitels (eine oder zwei Zeilen) nach oben oder unten.
	   So steht sie auf JEDER Taschenseite exakt gleich hoch. */
	align-items: flex-start;
	min-height: 62vh;
	padding: 160px 0 80px;
	background-image: var(--cht-kopfbild);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: var(--ink);
	text-align: left;
}

.cht-baghero--leer {
	/* Auch ohne eigenes Beitragsbild das gemeinsame Kopfbild (Customizer). */
	background-image: var(--cht-kopfbild);
}

/* Fixierter Hintergrund ruckelt auf mobilen Browsern – dort normal mitscrollen. */
@media (max-width: 800px) {
	.cht-baghero {
		background-attachment: scroll;
	}
}

/* Kein Kopfbild gesetzt? Dann steht der Titel auf ruhigem Grau statt auf
   grellem Weiß – und die Seite sieht nicht kaputt aus, sondern nur schlicht. */

.cht-baghero--leer::before {
	display: none;
}

.cht-baghero__titel {
	margin: 0;
	font-family: var(--font); /* Mono, nicht Slab */
	font-size: clamp(28px, 4.4vw, 47px);
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ink);
}

.cht-baghero__sub {
	max-width: 46ch;
	margin: 20px 0 0;
	font-family: var(--font);
	font-size: clamp(15px, 1.6vw, 20px);
	line-height: 1.7;
	color: var(--ink);
}

/* Auf hellen Fotos ist dunkle Schrift lesbar – auf dunklen nicht. Ein zarter
   heller Schleier links macht sie überall lesbar, ohne das Foto zu erschlagen. */

.cht-baghero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .15) 45%, transparent 70%);
	pointer-events: none;
}

.cht-baghero {
	position: relative;
}

.cht-baghero__inhalt {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   BESTELLFORMULAR MIT ZEICHNUNG
   Wie im Original: Formular links, Überschrift und Zeichnung rechts.
   Die Zeichnung erklärt die Bauteile, während man sie zusammenstellt.
   ========================================================================== */

.cht-anfrage__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	align-items: start;
}

/* Grid-Items dürfen unter ihre Inhaltsbreite schrumpfen – ohne dies bläht der
   Konfigurator die Spalte auf ~472px auf und sprengt schmale Handy-Viewports. */
.cht-anfrage__form,
.cht-anfrage__seite {
	min-width: 0;
}

/* Mobile: horizontaler Überlauf wird geklippt (verhindert Pinch-Zoom-out und
   abgeschnittene Ränder, z. B. durch den Vollrand der Farbgalerie). Auf Mobile
   gibt es kein position:sticky, daher ist das unbedenklich. */
@media (max-width: 999px) {
	html {
		overflow-x: hidden; /* Fallback */
		overflow-x: clip;
	}
}

/* Über Victoria – Mobile-Reihenfolge: Titel + „Gründerin…“-Zeile, dann Foto,
   dann Text. Luft zwischen den drei Blöcken, damit es nicht klebt. */
@media (max-width: 899px) {
	.cht-victoria__kopf { margin-bottom: 26px; }
	.cht-victoria .cht-victoria__bild { margin-bottom: 32px; }
}

@media (min-width: 1000px) {
	.cht-anfrage__inner {
		grid-template-columns: 1fr 1fr;
		gap: 70px;
	}

	/* Die Zeichnung bleibt stehen, während man durchs Formular scrollt. */
	.cht-anfrage__seite {
		position: sticky;
		top: 130px;
	}
}

.cht-anfrage__titel {
	margin: 0 0 30px;
	font-family: var(--font);
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.25;
}

.cht-anfrage__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Instagram im Kopf – wie im Original, neben dem Sprachumschalter ---------- */

.cht-insta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 0 18px; /* dieselbe Grundlinie wie die Menüpunkte */
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .3s ease;
}

.cht-insta__icon svg {
	display: block;
	width: 17px;
	height: 17px;
}

.cht-insta:hover {
	color: var(--gold);
}

.cht-header.is-gescrollt .cht-insta {
	color: var(--ink);
	text-shadow: none;
}

.cht-header--transparent .cht-insta:hover,
.cht-header.is-gescrollt .cht-insta:hover {
	color: var(--gold);
}

@media (max-width: 899px) {
	.cht-insta {
		margin-top: 14px;
	}
}

/* --------------------------------------------------------------------------
   Hero-Schrift folgt dem Bild
   Ist das Foto hinter dem Text hell, wird die Schrift schwarz – sonst weiß.
   Gemessen wird im Browser, am tatsächlichen Bild (siehe main.js).
   -------------------------------------------------------------------------- */

.cht-hero {
	transition: color .8s ease, text-shadow .8s ease;
}

.cht-hero.is-auf-hell {
	color: var(--ink);
	text-shadow: 0 1px 14px rgba(255, 255, 255, .6);
}

.cht-hero.is-auf-hell .cht-hero__sub {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   Sprachumschalter und Instagram: derselbe Effekt wie die Menüpunkte
   Beim Umbau auf „ohne Kasten" ist der Hover verlorengegangen.
   -------------------------------------------------------------------------- */

.cht-lang,
.cht-insta {
	position: relative;
}

.cht-lang::after,
.cht-insta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s cubic-bezier(.16, .84, .3, 1);
}

.cht-lang:hover,
.cht-lang:focus-visible,
.cht-insta:hover,
.cht-insta:focus-visible {
	color: var(--gold);
}

.cht-lang:hover::after,
.cht-lang:focus-visible::after,
.cht-insta:hover::after,
.cht-insta:focus-visible::after {
	transform: scaleX(1);
}

.cht-lang__globus {
	transition: opacity .3s ease;
}

.cht-lang:hover .cht-lang__globus {
	opacity: 1;
}

/* ==========================================================================
   BILDLAUFLEISTE
   ==========================================================================

   Die Standardleiste von Chrome ist grau und laut – auf einer Seite, die sonst
   aus Weiß, Schwarz und einem Hauch Gold besteht, ist sie ein Fremdkörper.

   Also: weiße Bahn, schlanker Balken in gedecktem Gold-Grau. Beim Anfassen
   wird er golden. Schmal genug, um nicht aufzufallen, breit genug zum Greifen.
   ========================================================================== */

/* Custom-Scrollbar (Gold) nur am Desktop – auf Touch/Mobile die native,
   sich versteckende Leiste, sonst erscheint sie als störender Gold-Balken. */
@media (hover: hover) and (pointer: fine) {
	html {
		scrollbar-width: thin; /* Firefox */
		scrollbar-color: rgba(234, 191, 0, .55) #fff;
	}

	::-webkit-scrollbar {
		width: 11px;
		height: 11px;
	}

	::-webkit-scrollbar-track {
		background: #fff;
	}

	::-webkit-scrollbar-thumb {
		background: rgba(24, 24, 24, .18);
		border: 3px solid #fff; /* schafft den schlanken Eindruck */
		border-radius: 8px;
		transition: background-color .25s ease;
	}

	::-webkit-scrollbar-thumb:hover {
		background: rgba(234, 191, 0, .85);
	}

	::-webkit-scrollbar-thumb:active {
		background: var(--gold);
	}

	::-webkit-scrollbar-corner {
		background: #fff;
	}
}

/* Das Auswahlrad und die Dropdown-Liste haben eigene, noch schmalere Leisten. */

.choll-drop__liste::-webkit-scrollbar {
	width: 6px;
}

.choll-drop__liste::-webkit-scrollbar-thumb {
	border: 0;
	background: rgba(234, 191, 0, .5);
}


/* Parallax: die Bilder bewegen sich sanft mit. Die Verschiebung setzt das
   Skript, hier nur der weiche Übergang und ein Beschnitt, damit an den Rändern
   nichts durchblitzt. */

.cht-parallax {
	will-change: transform;
	transition: transform .1s linear;
}

.cht-weg__bild,
.cht-victoria__bild,
.cht-stimmen__bild,
.cht-anfrage__bild {
	overflow: hidden;
}

/* Die Bilder minimal größer, damit die Verschiebung keine Lücke zeigt. */

.cht-weg__img,
.cht-victoria__img,
.cht-stimmen__img,
.cht-anfrage__img {
	transform: scale(1.06);
}

/* ==========================================================================
   NACHTRAG 0.9.8 – Weg zum Unikat: Icon-Hover + weiche weiße Bildkante
   ========================================================================== */

/* Hover: das Symbol reagiert – kleiner Lift mit leichter Drehung und
   Gold-Schimmer; die Schritt-Überschrift zieht in Gold mit. Bewusst dezent. */
.cht-schritt__icon {
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), filter .35s ease;
}

.cht-schritt__titel {
	transition: color .3s ease;
}

.cht-schritt:hover .cht-schritt__icon,
.cht-schritt:focus-within .cht-schritt__icon {
	transform: translateY(-3px) scale(1.12) rotate(-4deg);
	filter: drop-shadow(0 4px 8px rgba(234, 191, 0, .35));
}

.cht-schritt:hover .cht-schritt__titel,
.cht-schritt:focus-within .cht-schritt__titel {
	color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
	.cht-schritt:hover .cht-schritt__icon,
	.cht-schritt:focus-within .cht-schritt__icon {
		transform: none;
	}
}

/* Weg-Bild: nur etwas kleiner und mittig – sonst wie die anderen Sektionsbilder
   (2/3-Format). KEIN weißer Kasten, keine Maske: die haben den Bereich viel zu
   hoch gemacht. Kein Parallax-Zoom hier. */
.cht-weg__img {
	max-width: 88%;
	margin-inline: auto;
	transform: none;
}

/* ==========================================================================
   NACHTRAG 0.9.12 – Hauptmenü-Strich an die Header-Unterkante
   Die Menüpunkte füllen die volle Kopfhöhe, der Text bleibt mittig. Damit sitzt
   der goldene Unterstrich (::after bottom:0) exakt auf der Header-Kante – und
   rutscht beim Schrumpfen im Scroll automatisch mit, ohne feste Pixelwerte.
   ========================================================================== */
@media (min-width: 900px) {
	.cht-header__inner {
		align-items: stretch;
	}

	.cht-header__brand {
		display: flex;
		align-items: center;
	}

	.cht-nav {
		align-items: stretch;
	}

	.cht-nav__list {
		align-items: stretch;
	}

	.cht-nav__list > li {
		display: flex;
	}

	.cht-nav__list > li > a {
		display: flex;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Sprachumschalter und Instagram wie die Menüpunkte: volle Kopfhöhe, Text
	   vertikal zentriert (ihr altes 6/18-Padding hätte sie versetzt). */
	.cht-lang,
	.cht-insta {
		align-self: stretch;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   DIREKT MITNEHMEN – Übersicht + Detailseite (0.10.0)
   ========================================================================== */

.cht-lager {
	padding-top: var(--rhythm);
	padding-bottom: var(--rhythm);
}

.cht-lager__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cht-lager__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cht-lager__bildbox {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: var(--soft);
	aspect-ratio: 4 / 5;
}

.cht-lager__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.cht-lager__link:hover .cht-lager__img {
	transform: scale(1.04);
}

/* Status-Fähnchen: nur wenn nicht "verfügbar". */
.cht-lager__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	font-family: var(--font);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	border-radius: 999px;
	background: rgba(24, 24, 24, .85);
}

.cht-lager__badge--verkauft {
	background: #b23b3b;
}

.cht-lager__name {
	display: block;
	margin-top: 14px;
	font-family: var(--font-titel);
	font-size: 20px;
	letter-spacing: .5px;
}

.cht-lager__farbe {
	display: block;
	margin-top: 2px;
	font-family: var(--font);
	font-size: 14px;
	color: var(--ink-soft, #666);
}

.cht-lager__preis {
	display: block;
	margin-top: 6px;
	font-family: var(--font);
	font-size: 16px;
	color: var(--gold);
}

.cht-lager__item.is-weg {
	opacity: .55;
}

.cht-lager__leer {
	padding: 40px 0 80px;
	text-align: center;
	font-size: 18px;
	color: var(--ink-soft, #666);
}

@media (max-width: 900px) {
	.cht-lager__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}
}

@media (max-width: 560px) {
	.cht-lager__grid {
		grid-template-columns: 1fr;
	}
}

/* Detailseite */
.cht-lagerein__main {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	padding-top: var(--rhythm);
	padding-bottom: var(--rhythm);
	align-items: start;
}

.cht-lagerein__fotos {
	display: grid;
	gap: 16px;
}

.cht-lagerein__foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.cht-lagerein__info {
	position: sticky;
	top: 120px;
}

.cht-lagerein__modell {
	margin: 0 0 6px;
	font-family: var(--font);
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ink-soft, #666);
}

.cht-lagerein__preis {
	margin: 0 0 12px;
	font-family: var(--font-titel);
	font-size: 30px;
}

.cht-lagerein__status {
	display: inline-block;
	margin: 0 0 20px;
	padding: 4px 12px;
	font-family: var(--font);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid var(--line, rgba(24, 24, 24, .15));
}

.cht-lagerein__status--verfuegbar { color: #2e7d32; border-color: #2e7d32; }
.cht-lagerein__status--reserviert { color: #8a6d00; border-color: #cbb35a; }
.cht-lagerein__status--verkauft   { color: #b23b3b; border-color: #b23b3b; }

.cht-lagerein__text {
	margin: 0 0 24px;
	line-height: 1.7;
}

.cht-lagerein__cta {
	width: 100%;
	text-align: center;
}

.cht-lagerein__weg {
	margin: 0;
	font-family: var(--font);
	color: #b23b3b;
}

@media (max-width: 800px) {
	.cht-lagerein__main {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.cht-lagerein__info {
		position: static;
	}
}

/* Weg-Bereich auf reinem Weiß statt --soft: das Aquarell hat weißen
   Hintergrund, so verschmilzt es kantenlos mit der Section. */
.cht-weg {
	background: #fff;
}

/* ==========================================================================
   WEISSER AUSSENRAHMEN (wie beim Original)
   Ein dekorativer weißer Rahmen am Viewport-Rand. Fixiert (bleibt beim
   Scrollen stehen), blockiert keine Klicks, liegt über dem Inhalt aber unter
   Lightbox/Adminbar. Bei eingeloggter Adminleiste rutscht er oben nach.
   ========================================================================== */
.cht-rahmen {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	border: 14px solid #fff;
}

.admin-bar .cht-rahmen {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .cht-rahmen {
		top: 46px;
	}
}

@media (max-width: 700px) {
	.cht-rahmen {
		border-width: 8px;
	}
}

/* ==========================================================================
   Über Victoria – Foto-Variante
   Das Porträt blutet an der rechten Bildschirmkante aus und deckt die rechten
   ~70 %. Ein weicher Papier-Verlauf hellt die linke Bildhälfte auf, damit der
   Text darüber lesbar bleibt – unabhängig davon, wie hell das Motiv dort ist.
   Auf schmalen Screens wird gestapelt (Foto oben, Text darunter, kein Overlay).
   ========================================================================== */
@media (min-width: 900px) {
	.cht-victoria--foto {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 640px;
		padding: 0;
		overflow: hidden;
	}

	.cht-victoria--foto .cht-victoria__bild {
		position: absolute;
		inset: 0 0 0 auto; /* oben/rechts/unten 0, links auto → an rechte Kante */
		width: 70%;
		margin: 0;
	}

	.cht-victoria--foto .cht-victoria__img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover; /* Bleed-Look; Ausschnitt so, dass Gesicht/Oberkörper stehen */
		object-position: center 20%;
	}

	.cht-victoria--foto .cht-victoria__bild::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--paper) 0%,
			rgba(255, 255, 255, .88) 20%,
			rgba(255, 255, 255, .38) 46%,
			rgba(255, 255, 255, 0) 64%
		);
		pointer-events: none;
	}

	.cht-victoria--foto .cht-victoria__kopf,
	.cht-victoria--foto .cht-victoria__inner {
		position: relative;
		z-index: 2;
		width: 100%;
		display: block; /* Standard-Raster aufheben */
	}

	.cht-victoria--foto .cht-victoria__kopf { padding-top: 90px; }
	.cht-victoria--foto .cht-victoria__inner { padding-bottom: 90px; }

	.cht-victoria--foto .cht-victoria__text {
		max-width: 440px;
	}
}

/* Footer – Kontaktzeile und Entwickler-Credit ------------------------------ */
.cht-footer__kontakt {
	margin: 0 0 30px;
	font-size: 14px;
	letter-spacing: .02em;
}

.cht-footer__kontakt a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
	transition: color .3s ease, border-color .3s ease;
}

.cht-footer__kontakt a:hover {
	color: var(--gold);
	border-color: var(--gold);
}

.cht-footer__faq {
	margin: 16px 0 0;
	font-size: 13px;
	letter-spacing: .04em;
}

.cht-footer__faq a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
	transition: color .3s ease, border-color .3s ease;
}

.cht-footer__faq a:hover {
	color: var(--gold);
	border-color: var(--gold);
}

.cht-footer__credit {
	margin: 34px 0 0;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--ink-soft);
}

.cht-footer__credit a {
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .3s ease, border-color .3s ease;
}

.cht-footer__credit a:hover {
	color: var(--gold);
	border-color: var(--gold);
}

/* Funkeln neben dem Victoria-Untertitel – eigener Gold-Stern statt Emoji,
   passend zum Roboto-Mono/Gold-Look. Dezentes Blinzeln, per Motion-Reduce aus. */
.cht-funkel {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	color: var(--gold);
	vertical-align: -3px;
}

.cht-funkel svg {
	display: block;
	width: 30px;
	height: 24px;
	filter: drop-shadow(0 1px 2px rgba(234, 191, 0, .35));
}

.cht-funkel__gross { transform-origin: 11px 10px; animation: cht-funkeln 3.4s ease-in-out infinite; }
.cht-funkel__klein { transform-origin: 23.5px 15.8px; animation: cht-funkeln 3.4s ease-in-out .55s infinite; }

@keyframes cht-funkeln {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .5; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
	.cht-funkel__gross, .cht-funkel__klein { animation: none; }
}

/* --------------------------------------------------------------------------
   Mobiler Nachschliff (nach Feedback):
   – Untermenü flach (kein Schatten-Kästchen) und klar kleiner.
   – Taschenseiten: Bild + Titel „Schick mir eine Anfrage" über das Formular.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.cht-nav__list .sub-menu {
		background: none;
		box-shadow: none;
		border: 0;
	}
	.cht-nav__list .sub-menu a {
		padding: 6px 0;
		font-size: 14px;
	}
}

@media (max-width: 999px) {
	.cht-anfrage__seite { order: -1; }
}

/* Anker-Ziele (FAQ, „Direkt mitnehmen") landen unter der fixen Kopfzeile,
   nicht dahinter versteckt. */
#faq,
#direkt {
	scroll-margin-top: 96px;
}

/* --------------------------------------------------------------------------
   Kopfbereich der Taschenseiten: überall exakt gleich hoch.
   Referenz ist der kleinste Wert – dadurch sitzen Bild UND Überschrift auf
   jeder Seite auf derselben Höhe, egal wie lang Titel oder Untertitel sind.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.cht-baghero {
		/* Feste Höhe für alle Kopfbereiche – kompakter als zuvor und auf
		   großen Schirmen begrenzt, damit der Kopf nicht ausufert. */
		height: clamp(380px, 53vh, 540px);
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   Untermenü am Desktop: Der Weg vom Menüpunkt zum Untermenü darf nicht
   abreißen. Zwei Maßnahmen:
   1. Eine unsichtbare Brücke über dem Untermenü – sie gehört zum Untermenü,
      der Mauszeiger bleibt also „drin", auch wenn er schräg hinüberwandert.
   2. Ein kurzer Nachlauf beim Schließen, damit ein Sekundenbruchteil ohne
      Kontakt das Menü nicht sofort zuklappen lässt.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.cht-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -22px;
		height: 22px;
	}

	.cht-nav__list .sub-menu {
		transition:
			opacity .25s ease .18s,
			transform .25s ease .18s,
			visibility 0s linear .43s;
	}

	.cht-nav__list li:hover > .sub-menu,
	.cht-nav__list li:focus-within > .sub-menu {
		transition:
			opacity .2s ease 0s,
			transform .2s ease 0s,
			visibility 0s linear 0s;
	}
}

/* ==========================================================================
   BILDWIRKUNG & EFFEKTE
   Gesteuert über den Customizer (Panel „Chollenti – Effekte"). Die Werte
   kommen als CSS-Variablen aus inc/effekte.php; steht dort „none", ist der
   jeweilige Effekt einfach aus. Bewegung respektiert die Systemeinstellung
   „Bewegung reduzieren".
   ========================================================================== */

/* 1. Langsame Kamerafahrt: das Kopfbild wandert kaum merklich. */
@media (prefers-reduced-motion: no-preference) {
	.cht-fx-fahrt .cht-baghero {
		animation: cht-fx-fahrt 26s ease-in-out infinite alternate;
	}
}

@keyframes cht-fx-fahrt {
	from { background-position: 48% 52%; }
	to   { background-position: 54% 46%; }
}

/* 2. Weicher Auslauf nach unten – zusätzlich zum hellen Schleier links. */
.cht-baghero::before {
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .15) 45%, transparent 70%);
	z-index: 1;
}

/* 3. + 4. Korn und Lichtschimmer liegen gemeinsam auf einer Ebene über dem
   Foto, aber unter der Schrift. Dieselbe Ebene trägt den Farbfilter des
   Kopfbereichs (wirkt nur auf das Bild, nicht auf die Überschrift). */
.cht-baghero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: var(--fx-auslauf-img, none), var(--fx-korn-img, none), var(--fx-schimmer-img, none);
	background-repeat: no-repeat, repeat, no-repeat;
	background-size: 100% 100%, 120px 120px, 220% 100%;
	background-position: 0 0, 0 0, -70% 0;
	-webkit-backdrop-filter: var(--fx-kopf-filter, none);
	backdrop-filter: var(--fx-kopf-filter, none);
}

@media (prefers-reduced-motion: no-preference) {
	.cht-fx-schimmer .cht-baghero::after {
		animation: cht-fx-schimmer 11s ease-in-out infinite;
	}
}

@keyframes cht-fx-schimmer {
	0%        { background-position: 0 0, 0 0, -70% 0; }
	55%, 100% { background-position: 0 0, 0 0, 180% 0; }
}

/* Die Schrift bleibt über allen Effektebenen. */
.cht-baghero__inhalt {
	z-index: 3;
}

/* 5. Farbwirkung der Bilder und Galerien. */
.cht-fotos img,
.cht-foto__img,
.choll-galerie__img,
.cht-lager__item img {
	filter: var(--fx-bild-filter, none);
}

/* 6. Farbwirkung des Fußbereichs – wirkt auf das Hintergrundfoto,
   die Inhalte liegen darüber und bleiben unverändert. */
.cht-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-backdrop-filter: var(--fx-fuss-filter, none);
	backdrop-filter: var(--fx-fuss-filter, none);
}

.cht-footer > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Kopfzeile: außerhalb der Startseite immer weiß (statt Papierton).
   -------------------------------------------------------------------------- */
.cht-header:not(.cht-header--transparent) {
	background: #fff;
}

/* --------------------------------------------------------------------------
   Goldener Strich bleibt stehen, solange man im Menüpunkt ODER in dessen
   Untermenü ist – vorher verschwand er, sobald die Maus den Punkt verließ.
   -------------------------------------------------------------------------- */
.cht-nav__list > li:hover > a::after,
.cht-nav__list > li:focus-within > a::after {
	transform: scaleX(1);
}

/* ==========================================================================
   HINTERGRÜNDE (Customizer → Chollenti – Effekte → Hintergründe)
   ========================================================================== */

/* 1. Der Fragen-Bereich wird vollständig in der Vorlage gestaltet
   (template-bestellen.php) – hier steht bewusst nichts mehr. */

/* 2. Gehäkelte Prägung hinter „Lieber gleich mitnehmen?"
   Kein Bild, sondern ein feines Maschen-Relief aus zwei versetzten Reihen –
   wie eine Blindprägung auf Büttenpapier. Sichtbar nur im Streiflicht. */
.cht-bestellen__fertig {
	position: relative;
	overflow: hidden;
}

.cht-bestellen__fertig::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	z-index: 1;
	opacity: var(--fx-masche-deckkraft, .45);
	background-image:
		radial-gradient(ellipse 11px 7px at 50% 0%, rgba(35, 32, 25, .085) 0 42%, transparent 44%),
		radial-gradient(ellipse 11px 7px at 0% 50%, rgba(35, 32, 25, .06) 0 42%, transparent 44%),
		radial-gradient(ellipse 11px 7px at 100% 50%, rgba(35, 32, 25, .06) 0 42%, transparent 44%),
		linear-gradient(180deg, rgba(255, 255, 255, .5) 0 50%, transparent 50%);
	background-size: 30px 22px, 30px 22px, 30px 22px, 30px 22px;
	background-position: 0 0, 15px 11px, 15px 11px, 0 0;
	-webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 45%, transparent 100%);
}

.cht-bestellen__fertig > * {
	position: relative;
	z-index: 2;
}

/* Foto im Hintergrund: im Ruhezustand ausgeblichen, beim Überfahren tritt es
   klarer hervor und zieht sich ganz leicht heran. */
.cht-bestellen__fertig::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--fx-mitnehmen-img, none);
	background-size: cover;
	background-position: center;
	filter: saturate(.35) brightness(1.1);
	opacity: var(--fx-mitnehmen-deckkraft, .14);
	transform: scale(1);
	transition: opacity .6s ease, filter .6s ease, transform 1.4s ease;
}

.cht-bestellen__fertig:hover::after,
.cht-bestellen__fertig:focus-within::after {
	opacity: calc(var(--fx-mitnehmen-deckkraft, .14) * 3.4);
	filter: saturate(.95) brightness(1);
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.cht-bestellen__fertig::after { transition: opacity .3s ease; }
	.cht-bestellen__fertig:hover::after { transform: none; }
}

/* ==========================================================================
   FARBSTUDIO – Tasche zusammenstellen
   ========================================================================== */
.cht-studio { padding: var(--rhythm) 0 40px; }

.cht-studio__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Vorschau */
.cht-studio__buehne {
	position: sticky;
	top: 110px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: radial-gradient(120% 80% at 50% 0%, #fff 0%, var(--soft) 62%);
	padding: 24px;
	min-height: 430px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cht-studio__buehne svg {
	width: 100%;
	max-width: 360px;
	height: auto;
	filter: drop-shadow(0 20px 34px rgba(35, 32, 25, .14));
}

.cht-studio__tipp {
	position: absolute;
	left: 24px;
	bottom: 16px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.cht-zone { cursor: pointer; }
.cht-zone__flaeche { transition: filter .2s ease; }
.cht-zone:hover .cht-zone__flaeche { filter: brightness(1.06); }
.cht-zone__rahmen {
	fill: none;
	stroke: var(--gold);
	stroke-width: 2.5;
	stroke-dasharray: 5 5;
	opacity: 0;
	transition: opacity .2s ease;
}
.cht-zone.is-aktiv .cht-zone__rahmen { opacity: 1; }
.cht-zone:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Schritte */
.cht-studio__schritt { padding: 22px 0; border-top: 1px solid var(--line); }
.cht-studio__schritt:first-child { border-top: 0; padding-top: 0; }
.cht-studio__kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.cht-studio__nr { font-family: var(--font-titel); font-size: 15px; color: var(--gold); }
.cht-studio__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.cht-studio__reihe { display: flex; flex-wrap: wrap; gap: 9px; }

.cht-studio__pill {
	font-family: var(--font);
	font-size: 13.5px;
	padding: 11px 18px;
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cht-studio__pill:hover { transform: translateY(-2px); }
.cht-studio__pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.cht-studio__segment {
	display: inline-flex;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
}
.cht-studio__segment button {
	border: 0;
	background: none;
	font-family: var(--font);
	font-size: 13px;
	padding: 9px 16px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--ink-soft);
	transition: background .2s, color .2s;
}
.cht-studio__segment button[aria-pressed="true"] {
	background: #fff;
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(35, 32, 25, .12);
}

.cht-studio__flaechen { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.cht-studio__flaeche {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--font);
	font-size: 12.5px;
	transition: border-color .2s, box-shadow .2s;
}
.cht-studio__flaeche[aria-pressed="true"] {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .16);
}
.cht-studio__punkt { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(35, 32, 25, .16); }

/* Garnfarben */
.cht-studio__palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 12px;
}
.cht-studio__garn { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; }
.cht-studio__knaeuel {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(35, 32, 25, .14);
	transition: transform .18s, box-shadow .18s;
}
.cht-studio__garn:hover .cht-studio__knaeuel { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(35, 32, 25, .16); }
.cht-studio__garn[aria-pressed="true"] .cht-studio__knaeuel { box-shadow: 0 0 0 2px var(--gold), 0 8px 18px rgba(35, 32, 25, .14); }
.cht-studio__garnname { display: block; margin-top: 7px; font-size: 10.5px; color: var(--ink-soft); line-height: 1.35; }
.cht-studio__garn:focus-visible .cht-studio__knaeuel { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Fußleiste */
.cht-studio__leiste {
	position: sticky;
	bottom: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
}
.cht-studio__leiste-inner {
	padding: 14px var(--gap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.cht-studio__code { font-size: 12.5px; color: var(--ink-soft); }
.cht-studio__code b { color: var(--ink); font-weight: 500; }
.cht-studio__aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 899px) {
	.cht-studio__raster { grid-template-columns: 1fr; gap: 22px; }
	.cht-studio__buehne { position: static; min-height: 300px; }
	.cht-studio__buehne svg { max-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
	.cht-studio__pill, .cht-studio__knaeuel, .cht-zone__flaeche { transition: none; }
}

/* Hinweis im Farbstudio: steht mittig über dem ersten Schritt und tritt
   beim Weiterscrollen zurück, sobald man mit dem Zusammenstellen beginnt. */
.cht-studio__hinweis {
	max-width: 520px;
	margin: 0 auto 26px;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	border-radius: 12px;
	background: var(--soft);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ink-soft);
	text-align: center;
	transition: opacity .4s ease, transform .4s ease;
	will-change: opacity;
}

.cht-studio__hinweis.is-weg {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

/* Preis in der Zusammenfassung des Farbstudios. */
.cht-studio__preis {
	margin-left: 8px;
	padding-left: 10px;
	border-left: 1px solid var(--line);
	color: var(--ink);
	font-weight: 500;
}

/* Verweis von der Taschenseite ins Farbstudio. */
.cht-bag__studio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 3px;
	transition: color .25s ease, border-color .25s ease;
}

.cht-bag__studio::after { content: "→"; color: var(--gold); transition: transform .25s ease; }
.cht-bag__studio:hover { color: var(--gold); border-color: var(--gold); }
.cht-bag__studio:hover::after { transform: translateX(3px); }

/* ==========================================================================
   FARBSTUDIO – Vollbild: alles auf einen Blick, ohne Scrollen
   ========================================================================== */
.cht-studio-seite--voll .cht-studio {
	padding: 0;
	max-width: none;
}

.cht-studio-seite--voll .cht-studio__raster {
	/* Kopfzeile abziehen, damit die Seite exakt in den Bildschirm passt. */
	min-height: calc(100vh - 76px);
	min-height: calc(100dvh - 76px);
	grid-template-columns: 1.05fr .95fr;
	gap: 0;
}

/* Vorschau füllt die linke Hälfte. */
.cht-studio-seite--voll .cht-studio__buehne {
	position: relative;
	top: 0;
	height: 100%;
	border: 0;
	border-right: 1px solid var(--line);
	border-radius: 0;
	padding: 30px;
	min-height: 0;
}

.cht-studio-seite--voll .cht-studio__buehne svg {
	max-width: min(480px, 60vh);
}

/* Auswahl rechts, scrollt bei Bedarf für sich allein. */
.cht-studio-seite--voll .cht-studio__wahl {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 76px);
	height: calc(100dvh - 76px);
	overflow-y: auto;
	padding: 30px clamp(20px, 3vw, 44px) 20px;
	scrollbar-width: thin;
}

.cht-studio__intro { margin-bottom: 8px; }

.cht-studio__h1 {
	font-family: var(--font-titel);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 36px);
	margin: 0 0 6px;
}

.cht-studio__lead {
	margin: 0 0 20px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.6;
}

/* Im Vollbild ist der Hinweis kompakter. */
.cht-studio-seite--voll .cht-studio__hinweis {
	margin: 0 auto 20px;
	padding: 12px 16px;
	font-size: 11.5px;
	line-height: 1.6;
}

/* Zusammenfassung sitzt fest am unteren Rand des Bildschirms. */
.cht-studio-seite--voll .cht-studio__leiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
}

.cht-studio-seite--voll .cht-studio__leiste-inner {
	max-width: none;
	padding: 12px clamp(20px, 3vw, 44px);
}

/* Platz, damit die Leiste nichts verdeckt. */
.cht-studio-seite--voll .cht-studio__wahl { padding-bottom: 96px; }
.cht-studio-seite--voll .cht-studio__schritt { padding: 16px 0; }

@media (max-width: 899px) {
	.cht-studio-seite--voll .cht-studio__raster {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.cht-studio-seite--voll .cht-studio__buehne {
		position: sticky;
		top: 76px;
		z-index: 5;
		height: 42vh;
		border-right: 0;
		border-bottom: 1px solid var(--line);
		background: radial-gradient(120% 80% at 50% 0%, #fff 0%, var(--soft) 70%);
	}
	.cht-studio-seite--voll .cht-studio__buehne svg { max-width: min(300px, 34vh); }
	.cht-studio-seite--voll .cht-studio__wahl {
		height: auto;
		overflow: visible;
		padding: 22px var(--gap) 110px;
	}
}

/* Verweis ins Farbstudio auf Shop- und Bestellseite. */
.cht-baghero__aktion { margin: 22px 0 0; }
.cht-bestellen__studio { grid-column: 1 / -1; margin: 26px 0 0; text-align: center; }

/* Maschenbild über die Farbe multiplizieren – dadurch wirkt jede Wollfarbe
   plastisch, ohne dass ein Foto nötig ist. */
.cht-zone__struktur { mix-blend-mode: multiply; }
.cht-zone { isolation: isolate; }

/* --------------------------------------------------------------------------
   Farbstudio: echte Taschenfotos einfärben.
   Aufbau von unten nach oben: Farbfläche (auf das Garn maskiert) → Struktur
   des Fotos (multipliziert) → Metall (Kette und Schild, unverändert).
   -------------------------------------------------------------------------- */
.cht-studiofoto {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	isolation: isolate;
	filter: drop-shadow(0 20px 34px rgba(35, 32, 25, .16));
}

.cht-studiofoto img {
	display: block;
	width: 100%;
	height: auto;
}

.cht-studiofoto__zonen {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cht-studiofoto__zone {
	position: absolute;
	inset: 0;
	cursor: pointer;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: filter .2s ease;
}

.cht-studiofoto__zone:hover { filter: brightness(1.07); }
.cht-studiofoto__zone.is-aktiv { outline: 0; }

/* Kleiner goldener Hinweis, welche Fläche gerade gewählt ist. */
.cht-studiofoto__zone.is-aktiv::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 2px var(--gold);
	opacity: .55;
	pointer-events: none;
}

.cht-studiofoto__struktur {
	position: relative;
	z-index: 2;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.cht-studiofoto__metall {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

@media (max-width: 899px) {
	.cht-studiofoto { max-width: 280px; }
}

/* ==========================================================================
   FARBSTUDIO – alles auf einen Bildschirm, ohne Scrollen.
   Die Größen hängen an der Bildschirmhöhe (vh), damit sich das Werkzeug auf
   kleinen Notebooks genauso ausgeht wie auf großen Schirmen.
   ========================================================================== */
.cht-studio-seite--voll .cht-studio__wahl {
	overflow: hidden;                 /* kein eigenes Scrollen mehr */
	padding: clamp(14px, 2.4vh, 30px) clamp(18px, 2.4vw, 40px) clamp(70px, 9vh, 96px);
	gap: 0;
}

.cht-studio-seite--voll .cht-studio__intro { margin-bottom: clamp(4px, 1vh, 12px); }
.cht-studio-seite--voll .cht-studio__h1 { font-size: clamp(20px, 3.4vh, 32px); margin-bottom: 2px; }
.cht-studio-seite--voll .cht-studio__lead { font-size: clamp(11.5px, 1.6vh, 14px); margin-bottom: clamp(6px, 1.2vh, 16px); }

.cht-studio-seite--voll .cht-studio__schritt { padding: clamp(8px, 1.4vh, 18px) 0; }
.cht-studio-seite--voll .cht-studio__kopf { margin-bottom: clamp(6px, 1vh, 12px); }
.cht-studio-seite--voll .cht-studio__nr { font-size: clamp(12px, 1.7vh, 15px); }
.cht-studio-seite--voll .cht-studio__label { font-size: clamp(9.5px, 1.3vh, 12px); }

.cht-studio-seite--voll .cht-studio__pill {
	font-size: clamp(11.5px, 1.6vh, 13.5px);
	padding: clamp(7px, 1.1vh, 11px) clamp(12px, 1.6vw, 18px);
}

.cht-studio-seite--voll .cht-studio__segment button {
	font-size: clamp(11px, 1.5vh, 13px);
	padding: clamp(6px, 1vh, 9px) clamp(10px, 1.4vw, 16px);
}

.cht-studio-seite--voll .cht-studio__flaechen { margin: clamp(8px, 1.2vh, 14px) 0; }
.cht-studio-seite--voll .cht-studio__flaeche {
	font-size: clamp(11px, 1.5vh, 12.5px);
	padding: clamp(5px, .8vh, 7px) clamp(10px, 1.4vw, 14px) clamp(5px, .8vh, 7px) 6px;
}
.cht-studio-seite--voll .cht-studio__punkt { width: clamp(16px, 2.4vh, 22px); height: clamp(16px, 2.4vh, 22px); }

/* Garnfarben: Kachelgröße folgt der Bildschirmhöhe, damit alle Platz finden. */
.cht-studio-seite--voll .cht-studio__palette {
	grid-template-columns: repeat(auto-fill, minmax(clamp(46px, 6.4vh, 74px), 1fr));
	gap: clamp(6px, 1vh, 12px);
}
.cht-studio-seite--voll .cht-studio__garnname {
	margin-top: 4px;
	font-size: clamp(8.5px, 1.15vh, 10.5px);
}

/* Vorschau nutzt die Höhe aus. */
.cht-studio-seite--voll .cht-studio__buehne { padding: clamp(14px, 2.4vh, 30px); }
.cht-studio-seite--voll .cht-studiofoto {
	max-width: min(520px, 46vw);
	max-height: calc(100dvh - 76px - clamp(96px, 12vh, 130px));
}
.cht-studio-seite--voll .cht-studiofoto__struktur { max-height: inherit; width: auto; margin: 0 auto; }

/* Meldung über der Tasche */
.cht-studio__meldung {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	width: min(400px, 82%);
	padding: 20px 22px 18px;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 18px 40px rgba(35, 32, 25, .18);
	text-align: center;
	transition: opacity .3s ease, transform .3s ease;
}

.cht-studio__meldung p {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--ink-soft);
}

.cht-studio__meldung-zu {
	font-family: var(--font);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--ink);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.cht-studio__meldung-zu:hover { background: var(--gold); }

.cht-studio__meldung.is-weg {
	opacity: 0;
	transform: translate(-50%, -54%);
	pointer-events: none;
}

@media (max-width: 899px) {
	.cht-studio-seite--voll .cht-studio__wahl { overflow: visible; }
	.cht-studio-seite--voll .cht-studiofoto { max-width: 260px; max-height: 38vh; }
}

/* Leinwand-Darstellung der Tasche (ersetzt die Ebenen-Technik). */
.cht-studiofoto__leinwand {
	display: block;
	width: 100%;
	height: auto;
	max-height: inherit;
	margin: 0 auto;
	cursor: pointer;
}

.cht-studio-seite--voll .cht-studiofoto__leinwand {
	max-height: calc(100dvh - 76px - clamp(96px, 12vh, 130px));
	width: auto;
	max-width: 100%;
}

/* Nummer auf der gewählten Garnfarbe: zeigt, welche Fläche sie einfärbt. */
.cht-studio__knaeuel { position: relative; }

.cht-studio__nummer {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--gold);
	color: #fff;
	font-family: var(--font);
	font-size: 11px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(35, 32, 25, .28);
}

.cht-studio__garn.is-gewaehlt .cht-studio__knaeuel {
	box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(35, 32, 25, .14);
}

/* Nummer auch auf den Flächen-Marken, damit die Zuordnung eindeutig ist. */
.cht-studio__punkt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cht-studio__punktnr {
	font-family: var(--font);
	font-style: normal;
	font-size: 10px;
	line-height: 1;
	color: #fff;
	mix-blend-mode: difference;
}

/* ==========================================================================
   „Bald verfügbar" – Platzhalter, wenn keine fertigen Stücke da sind.
   Drei angedeutete Kacheln mit laufender Masche zeigen: hier entsteht etwas.
   ========================================================================== */
.cht-bald {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	padding: 12px 0 8px;
}

.cht-bald__reihe {
	display: flex;
	justify-content: center;
	gap: 18px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.cht-bald__kachel {
	position: relative;
	width: clamp(88px, 16vw, 150px);
	aspect-ratio: 4 / 5;
	border: 1px dashed rgba(35, 32, 25, .22);
	border-radius: 14px;
	background: var(--soft);
	overflow: hidden;
}

/* Eine Masche, die langsam durch die Kachel wandert – wie beim Häkeln. */
.cht-bald__masche {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 12px 8px at 50% 50%, rgba(35, 32, 25, .10) 0 42%, transparent 44%),
		radial-gradient(ellipse 12px 8px at 0% 50%, rgba(35, 32, 25, .07) 0 42%, transparent 44%);
	background-size: 30px 22px, 30px 22px;
	background-position: 0 0, 15px 11px;
	opacity: .8;
}

.cht-bald__kachel::after {
	content: "";
	position: absolute;
	/* Breiter als die Kachel, damit der Streifen flach hereinläuft statt
	   als schmaler Blitz durchzuschießen. */
	top: -20%;
	bottom: -20%;
	left: -95%;
	right: -95%;
	/* Drei überlagerte Verläufe mit leicht verschobenen Kanten: dadurch hat
	   der Schein keine saubere Kante mehr, sondern franst aus wie Licht,
	   das über eine gehäkelte Oberfläche wandert. */
	background-image:
		linear-gradient(98deg, transparent 12%, rgba(255, 255, 255, .40) 40%, rgba(255, 248, 224, .52) 50%, rgba(255, 255, 255, .30) 60%, transparent 88%),
		linear-gradient(104deg, transparent 20%, rgba(234, 191, 0, .16) 47%, transparent 74%),
		linear-gradient(92deg, transparent 28%, rgba(255, 255, 255, .18) 55%, transparent 82%);
	background-size: 100% 100%, 100% 100%, 100% 100%;
	background-position: 0 0, 6% 0, -8% 0;
	filter: blur(11px);
	transform: translateX(-80%);
}

@media (prefers-reduced-motion: no-preference) {
	.cht-bald__kachel::after { animation: cht-bald-lauf 11s cubic-bezier(.35, 0, .25, 1) infinite; }
	.cht-bald__kachel:nth-child(2)::after { animation-delay: 1.1s; }
	.cht-bald__kachel:nth-child(3)::after { animation-delay: 2.2s; }
}

/* Langer Durchlauf, dann eine deutliche Pause – der Schein kommt gelegentlich
   vorbei, statt ständig zu laufen. */
@keyframes cht-bald-lauf {
	0%        { transform: translateX(-80%); opacity: 0; }
	6%        { opacity: 1; }
	30%       { opacity: 1; }
	40%       { transform: translateX(80%); opacity: 0; }
	100%      { transform: translateX(80%); opacity: 0; }
}

.cht-bald__eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
}

.cht-bald__titel {
	font-family: var(--font-titel);
	font-weight: 400;
	font-size: clamp(22px, 3vw, 30px);
	margin: 0 0 14px;
}

.cht-bald__text {
	margin: 0 auto 26px;
	max-width: 520px;
	line-height: 1.75;
	color: var(--ink-soft);
}

.cht-bald__aktionen { margin: 0; }

@media (max-width: 560px) {
	.cht-bald__reihe { gap: 12px; }
	.cht-bald__kachel:nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   Häkel-Animation neben dem „Bald verfügbar"-Hinweis.
   Der Faden läuft vom Knäuel zur Nadel, die Tasche entsteht Reihe für Reihe.
   -------------------------------------------------------------------------- */
.cht-bald__buehne {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
	text-align: left;
	margin-top: 8px;
}

.cht-bald__wort { text-align: left; }
.cht-bald__wort .cht-bald__text { margin-left: 0; }

.cht-bald__anim { width: 100%; height: auto; }

.cht-bald__anim g,
.cht-bald__anim path {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cht-bald__knaeuel { stroke-width: 1.8; opacity: .85; }
.cht-bald__faden { stroke: var(--gold); stroke-width: 2.2; }
.cht-bald__henkel,
.cht-bald__korpus { stroke-width: 2.4; }
.cht-bald__reihe { stroke: var(--gold); stroke-width: 2; opacity: .75; }

/* Ruhezustand ohne Bewegung: alles fertig gezeichnet. */
@media (prefers-reduced-motion: no-preference) {

	/* Die Tasche entsteht einmal und bleibt dann stehen – sie soll nicht
	   immer wieder verschwinden. Lebendig bleibt danach nur das Knäuel. */
	.cht-bald__faden  { stroke-dasharray: 150; animation: cht-strich 3.4s ease-out forwards; }
	.cht-bald__henkel { stroke-dasharray: 130; animation: cht-strich 3.4s ease-out .2s forwards; }
	.cht-bald__korpus { stroke-dasharray: 320; animation: cht-strich 3.8s ease-out .5s forwards; }

	.cht-bald__reihe  { opacity: 0; animation: cht-reihe 1s ease forwards; }
	.cht-bald__reihe1 { animation-delay: 3.4s; }
	.cht-bald__reihe2 { animation-delay: 4.1s; }
	.cht-bald__reihe3 { animation-delay: 4.8s; }

	.cht-bald__knaeuel { transform-origin: 42px 164px; animation: cht-knaeuel 9s ease-in-out infinite; }
	.cht-bald__nadel   { animation: cht-nadel 6s ease-in-out forwards; }
}

@keyframes cht-strich {
	from { stroke-dashoffset: 320; }
	to   { stroke-dashoffset: 0; }
}

@keyframes cht-reihe {
	from { opacity: 0; transform: translateX(-6px); }
	to   { opacity: .75; transform: translateX(0); }
}

@keyframes cht-knaeuel {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(-12deg); }
}

/* Die Nadel wandert die Reihen entlang. */
/* Die Nadel arbeitet die drei Reihen ab und legt sich dann zur Seite. */
@keyframes cht-nadel {
	0%        { transform: translate(120px, 128px); opacity: 1; }
	26%       { transform: translate(196px, 128px); }
	28%       { transform: translate(120px, 144px); }
	52%       { transform: translate(196px, 144px); }
	54%       { transform: translate(120px, 160px); }
	80%       { transform: translate(196px, 160px); opacity: 1; }
	100%      { transform: translate(214px, 172px); opacity: .35; }
}

@media (max-width: 720px) {
	.cht-bald__buehne { grid-template-columns: 1fr; text-align: center; }
	.cht-bald__wort { text-align: center; }
	.cht-bald__anim { max-width: 240px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Rechtliche Seiten (AGB, Datenschutz, Impressum): ruhig und gut lesbar.
   -------------------------------------------------------------------------- */

/* Die Zeile „Stand: …" steht abgesetzt über dem Text. */
.cht-prose .cht-recht__stand {
	margin-bottom: 34px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ink-soft);
}

/* Paragraphen bekommen etwas mehr Luft und einen feinen Goldstrich –
   dadurch findet man sich in langen Texten schneller zurecht. */
.cht-prose h2 {
	position: relative;
	margin-top: 2.4em;
	padding-top: 18px;
}

.cht-prose h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 2px;
	background: var(--gold);
	opacity: .85;
}

.cht-prose h2:first-child { margin-top: 0; }

/* ==========================================================================
   NACHTRAG 0.11.95 – KI-Hinweis auf Bildern
   In der Mediathek trägt ein KI-Bild das Häkchen „KI-generiert“ – dann
   erscheint dieses Etikett unten rechts im Bild, überall wo es gezeigt
   wird. Hintergrund: EU-KI-Verordnung, Art. 50 (Transparenz).
   ========================================================================== */

/* Hülle um automatisch ausgegebene <img> – nur der Anker fürs Etikett.
   height:100% ist bewusst: in Kästen mit fester Höhe (Lager, 4/5-Format)
   füllt die Hülle den Kasten, sonst fällt sie auf die Bildhöhe zurück. */
.cht-ki-bild {
	position: relative;
	display: block;
	height: 100%;
}

/* Das Etikett: klein und ruhig, lesbar auf hellem wie dunklem Motiv.
   pointer-events:none – Klicks gehen weiter aufs Bild bzw. den Link. */
.cht-ki-hinweis {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	padding: 2px 10px;
	font-family: var(--font);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.7;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .92);
	background: rgba(24, 24, 24, .55);
	border-radius: 999px;
	pointer-events: none;
}

/* Kopfbereiche tragen ihr Bild als Hintergrund – fürs Etikett brauchen
   sie einen Positionsanker. Die Gründerinnen-Sektion der Über-Seite ebenso. */
.cht-baghero,
.cht-ueber__story {
	position: relative;
}