/* =========================================================================
   hypnoinside.com - design system

   One dark stage at the top of the home page, where the gold logo can
   actually glow, and a white document everywhere else. Nothing luminous is
   attempted on white, because nothing can out-shine a white ground.

   Layout principle: a single asymmetric column grid with generous margins,
   large serif headings against small sans-serif labels. No card grids, no
   equal-width thirds - those are what make template sites recognisable.
   ========================================================================= */

:root {
	--paper: #071714;
	--paper-warm: #04100E;
	/* Not a pure white: long passages set in one on a dark ground halate,
	   and the AGB is several screens of running text. */
	--ink: #E4EDEA;
	--ink-soft: #9FBAB2;
	--ink-faint: #6E8880;
	--rule: rgba(156, 200, 188, 0.20);

	--gold: #C9982E;
	--gold-bright: #E8C25E;
	--gold-pale: #3A2E12;

	--stage: #071714;

	/* The close runs on the logo's own hue - 168 degrees, the same green as
	   the brain band's wireframe - taken right down in lightness so the
	   gold has something to sit on. */
	--forest: #0A1F1B;
	--forest-deep: #04100E;
	--forest-line: rgba(156, 200, 188, 0.22);
	/* The logo green itself, used straight rather than darkened. */
	--teal: #64C4B1;
	--on-forest: #F2F6F4;
	--on-forest-soft: #9FBAB2;
	--on-forest-faint: #6E8880;

	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Typographic scale - fixed ceilings so nothing grows on wide screens */
	/* ONE size for every large statement line - hero headline, hero slogan,
	   the brain band claim and its closing line, the Sabine title, the quiet
	   statement block. Seven hand-picked clamps had drifted apart, from
	   2.35rem to 5.2rem, and the page read as if each section had been
	   designed by somebody else. Change it here or nowhere. */
	/* The whole scale was taken down a notch once and read too quiet at it;
	   this is that step back up, applied to every rung at the same ratio so
	   the intervals between them stay exactly as they were. */
	--t-display: clamp(1.72rem, 2.85vw, 2.54rem);
	--t-h1: var(--t-display);
	--t-h2: clamp(1.24rem, 1.68vw, 1.57rem);
	--t-h3: clamp(1.08rem, 1.03vw, 1.19rem);
	--t-body: clamp(0.97rem, 0.22vw + 0.92rem, 1.04rem);
	--t-lead: clamp(1.03rem, 0.32vw + 0.95rem, 1.17rem);
	--t-label: 0.78rem;

	/* Roughly the height of the fixed bar. Anything pinned in the middle of
	   the screen has to clear it at the top, and by the same amount at the
	   bottom to stay centred. */
	--mast-h: 5.1rem;

	--edge: clamp(1.25rem, 5vw, 5.5rem);
	--gap: clamp(3.5rem, 9vh, 8rem);
	--measure: 64ch;
}

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

/* ---------- Das Pink des Elternthemes ----------
   hello-elementor's reset.css paints the whole site in #c36:

     a { color: #c36 }
     button { border: 1px solid #c36; color: #c36 }
     button:hover, button:focus { background-color: #c36; color: #fff }

   That is where the pink came from - the links on the legal pages, and the
   solid bar across a question the moment the pointer touched it. Our own
   rules set background: transparent on the button, but never touched its
   hover state, and .frage__knopf (0,1,0) loses to button:hover (0,1,1).

   Overridden here once, for the whole site, rather than per component. */
a { color: var(--gold); }

button,
[type="button"],
[type="submit"] {
	background-color: transparent;
	border-color: var(--rule);
	color: inherit;
	/* And it sets white-space: nowrap on every button. The longest question
	   was one unbreakable 490px line, which is what pushed a 390px phone
	   sideways. */
	white-space: normal;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	background-color: transparent;
	color: inherit;
}

/* The selection colour is ours, not the machine's. Chrome paints selected
   text in the system highlight colour, so on a Windows with a pink accent a
   clicked row turned pink - which is exactly what happened here. */
::selection {
	background: rgba(201, 152, 46, 0.30);
	color: var(--ink);
}

html {
	scroll-behavior: smooth;
	/* The gutter is always there anyway - reserving it means locking the
	   page for the title card cannot shift the layout sideways. */
	scrollbar-gutter: stable;
}


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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--serif);
	/* 400, not 500: at display sizes Fraunces at 500 reads black and shouts
	   over everything around it. opsz 144 is the display cut - finer
	   hairlines, more contrast - which is what carries the size instead of
	   weight. WONK off: the angled alternates are charming small and noisy
	   large. */
	font-weight: 400;
	font-variation-settings: "SOFT" 24, "WONK" 0, "opsz" 144;
	letter-spacing: -0.018em;
	line-height: 1.14;
	color: var(--ink);
	margin: 0 0 0.5em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.3; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--ink);
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
}

.label {
	font-family: var(--sans);
	/* Pinned: these are h2 now, and an h2 defaults to bold. */
	font-weight: 400;
	font-size: var(--t-label);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.4rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.label::after {
	content: "";
	height: 1px;
	flex: 1;
	max-width: 5rem;
	background: currentColor;
	opacity: 0.4;
}

/* ---------- Masthead ---------- */
.mast {
	/* Fixed, not sticky: a sticky header occupies space in the flow, which
	   pushed the full-height hero panel down by exactly its own height. The
	   artwork then hung out of the bottom of the screen and the headline sat
	   off-centre by the same amount. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding: 0.9rem var(--edge);
	/* No fill of its own. See .mast::after. */
	background: transparent;
}

/* The bar used to be a solid block of --paper with a short fade tacked on
   below it. Over the page's own colour that was invisible, but over the star
   field, whose ground is darker, it read as a lighter band with a cut across
   the bottom - a bar in a different colour, exactly what it should never be.

   One scrim instead, reaching from the top of the bar to well below it in a
   single gradient. There is no edge anywhere in it: it is at its strongest
   behind the navigation, where text has to be kept apart from whatever is
   scrolling underneath, and is already gone by the time it leaves the bar.
   Over any ground, light or dark, it reads as shading rather than as a shape. */
.mast::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	/* The bar itself plus the same again below it, so the ramp is long enough
	   that the eye cannot find where it ends. */
	bottom: -3.4rem;
	/* --paper-warm, not --paper: it is the same colour the brain band is
	   painted in, and all but identical to the page's own. A scrim in the
	   darker of the two can never show up as a lighter patch on either. */
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--paper-warm) 94%, transparent) 0%,
		color-mix(in srgb, var(--paper-warm) 88%, transparent) 32%,
		color-mix(in srgb, var(--paper-warm) 58%, transparent) 58%,
		color-mix(in srgb, var(--paper-warm) 22%, transparent) 80%,
		transparent 100%);
	pointer-events: none;
	z-index: -1;
}

/* On the home page the reader opens on the field itself, and even a scrim is
   one shape too many before anything has moved. It comes in with the first
   touch of scroll - ui.js publishes --bar - and by then the field underneath
   is moving anyway. */
.mast--onStage::after { opacity: var(--bar, 0); }

/* The mark is the logo alone - no wordmark beside it. It stays visible
   because the masthead is sticky, and clicking it returns to the top. */
.brand {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
	transition: transform 0.25s ease;
}

.brand img {
	width: clamp(40px, 4vw, 52px);
	height: auto;
}

.brand:hover { transform: scale(1.06); }
.brand:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
	.brand { transition: none; }
	.brand:hover, .brand:active { transform: none; }
}

/* On the middle line of the page, and not of whatever the grid has left
   over. The columns are sized to a small logo on one side and a wide
   booking button on the other, so the leftover middle sat up to 97px left
   of centre - the navigation was the only thing on the site off the axis.
   Taken out of the flow, it is always centred. */
.mast__nav {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	justify-content: center;
	gap: clamp(1rem, 2vw, 2rem);
}
/* The navigation now sits on the page's middle line, which needs real room
   beside the logo and the booking button - below this it would run into
   them, so the burger takes over instead. */
@media (min-width: 1300px) { .mast__nav { display: flex; } }

.mast__nav a {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
	padding: 0.5rem 0;
	position: relative;
}

.mast__nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0.2rem;
	height: 1px;
	background: var(--gold);
	transition: right 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mast__nav a:hover::after,
.mast__nav a[aria-current="page"]::after { right: 0; }

.mast__end { display: flex; align-items: center; gap: 0.7rem; justify-self: end; }

.mast__cta {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	border: 1px solid var(--rule);
	padding: 0.7rem 1.2rem;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mast__cta:hover { background: var(--gold); border-color: var(--gold); color: var(--paper-warm); }

/* ---------- Mobile drawer ---------- */
.burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	padding: 0 9px;
	background: none;
	border: 1px solid var(--rule);
	cursor: pointer;
}

.burger span { display: block; height: 1px; background: var(--ink); transition: transform 0.28s ease, opacity 0.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1300px) { .burger { display: none; } }

.drawer {
	position: fixed; inset: 0; z-index: 39;
	background: var(--paper);
	padding: clamp(5rem, 13vh, 7rem) var(--edge) 2rem;
	overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer nav { display: flex; flex-direction: column; }
.drawer a {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 6vw, 2.1rem);
	color: var(--ink);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--rule);
}
.drawer a:hover { color: var(--gold); }
.drawer__cta {
	margin-top: 1.6rem;
	background: var(--gold);
	color: var(--paper-warm) !important;
	text-align: center;
	font-family: var(--sans) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1rem !important;
	border: 0 !important;
}
body.drawer-open { overflow: hidden; }

/* The drawer carries its own full-width booking button, so the small one in
   the bar would be the same call twice on one screen. */
body.drawer-open .mast__cta { display: none; }
@media (min-width: 1000px) { .drawer { display: none !important; } }

/* ---------- The dark stage (home hero only) ---------- */
/* Scroll runway. The section is 240vh tall; the panel inside sticks for the
   whole of it, so scrolling drives the animation instead of moving the page.
   At the end the reader arrives directly at the first section. */
.stage {
	position: relative;
	z-index: 1;
	/* Transparent: the canvas now sits behind the whole document, so any
	   background here would cover it. The page ground comes from body. */
	background: transparent;
	color: var(--ink);
	/* Just enough runway for zoom and burst - any longer and the reader
	   scrolls through emptiness before the first section arrives. */
	height: 210vh;
}

.stage__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
}

/* Fixed behind everything, for the whole document - not just the hero. */
.ground {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--forest);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom,
		#000 calc(var(--open, 0) * 100%), transparent calc(var(--open, 0) * 100% + 2px));
	mask-image: linear-gradient(to bottom,
		#000 calc(var(--open, 0) * 100%), transparent calc(var(--open, 0) * 100% + 2px));
}

.site__canvas {
	position: fixed;
	inset: 0;
	/* Above the green ground, below every section - the gold is drawn ON the
	   close, not behind it. */
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --exit runs 0 to 1 as the stage scrolls past; it is set from JS. The
   headline leaves with the artwork instead of hanging over an empty page. */
.stage__sticky { --exit: 0; }

.stage__inner {
	position: relative;
	z-index: 2;
	/* Symmetrical: asymmetric padding inside a centred flex box shifts the
	   block off the optical centre. */
	padding: clamp(3rem, 8vh, 5rem) var(--edge);
	text-align: center;
	max-width: 1200px;
	margin-inline: auto;
	pointer-events: none;

	opacity: calc(1 - var(--exit));
	transform: translateY(calc(var(--exit) * -3.5rem)) scale(calc(1 - var(--exit) * 0.06));
	filter: blur(calc(var(--exit) * 6px));
	will-change: opacity, transform;
}

/* The cue is the first thing to go - it has done its job by then. */
/* The slogan. Sits in the same centred position the headline just vacated,
   so it reads as one thought replacing another rather than a new block
   appearing elsewhere. --slogan runs 0 to 1 and is set from JS. */
.stage__sticky { --slogan: 0; --slogan-out: 0; --slogan-gone: 0; }

.stage__second {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* This was missing, and it is the whole of the fault: the box is the full
	   screen, so without it the three lines stacked from the very top. The
	   slogan - the first of them - sat at y=0, straight behind the fixed bar,
	   which left the reader looking at a stray subtitle and a button with
	   nothing above them. It belongs in the middle, where the headline it
	   replaces just stood. */
	justify-content: center;
	text-align: center;
	padding-inline: var(--edge);
	pointer-events: none;

	/* Driven by three variables, all set from JS:
	     --slogan       0 to 1  arrives from depth, larger and blurred
	     --slogan-out   0 to 1  sinks downward, under the rising dark band
	     --slogan-gone  0 to 1  the last of the opacity, right at the end

	   The travel is deliberately far larger than the fade. The line is meant
	   to be COVERED by the band climbing over it, not to dissolve in mid-air:
	   4.5rem of drop just made it twitch and vanish where it stood. 34vh
	   carries it well below the band edge, and the fade only catches up once
	   it is already behind. */
	opacity: calc(var(--slogan) * (1 - var(--slogan-gone)));
	transform:
		translateY(calc(var(--slogan-out) * 34vh))
		scale(calc(1.12 - var(--slogan) * 0.12 - var(--slogan-out) * 0.06));
	filter: blur(calc(((1 - var(--slogan)) * 14px) + (var(--slogan-out) * 5px)));
	will-change: opacity, transform, filter;
}

.stage__slogan {
	margin: 0;
	max-width: none;
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
	font-size: var(--t-display);
	line-height: 1.16;
	/* Slightly tightened: large serif at display size reads loose by default,
	   and the gap after "Weg" opens up visibly without this. */
	letter-spacing: -0.018em;
	word-spacing: -0.02em;
	color: var(--ink);
	text-shadow: 0 0 22px var(--paper), 0 0 44px var(--paper);
}

/* A hairline between claim and explanation. It gives the block a spine and
   keeps the two lines from reading as one loose paragraph. */
.stage__slogan::after {
	content: "";
	display: block;
	width: 3.2rem;
	height: 1px;
	margin: clamp(1.4rem, 3vh, 2.1rem) auto 0;
	background: var(--gold);
	opacity: 0.55;
}

@media (min-width: 760px) {
	.stage__slogan { white-space: nowrap; }
}

.stage__sloganSub {
	margin: clamp(1.2rem, 2.6vh, 1.8rem) auto 0;
	max-width: 38ch;
	font-family: var(--sans);
	font-size: clamp(0.88rem, 0.32vw + 0.8rem, 1rem);
	font-weight: 400;
	/* Light tracking against the tight serif above: the contrast between the
	   two is what makes the pairing look deliberate instead of default. */
	letter-spacing: 0.045em;
	line-height: 1.68;
	color: var(--ink-soft);
	text-shadow: 0 0 18px var(--paper), 0 0 32px var(--paper);
	text-wrap: balance;
}

.stage__sloganCta {
	margin-top: clamp(2.2rem, 4.5vh, 3.4rem);
	/* The panel above ignores pointer events so the canvas stays reachable;
	   the button has to opt back in or it cannot be clicked. */
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.stage__slogan { transform: none; filter: none; }
}

.stage h1 {
	/* Wider measure and a step smaller: the line runs longer before it
	   breaks, which reads calmer than a few huge stacked words. */
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
	font-size: var(--t-display);
	color: var(--ink);
	max-width: 30ch;
	margin-inline: auto;
	/* A halo in the ground colour keeps the type readable where particles
	   crowd behind it. */
	text-shadow: 0 0 24px var(--paper), 0 0 48px var(--paper);
}

/* The claim stands directly on the mark at full zoom and had no backing at
   all. White on bright gold is the worst pairing on the page. */
.stage__inner h1 {
	text-shadow:
		0 0 12px var(--paper), 0 0 26px var(--paper),
		0 0 44px var(--paper), 0 0 70px var(--paper);
}

.stage__sub {
	margin: 1.8rem auto 0;
	max-width: 52ch;
	color: var(--ink-soft);
	font-size: 1rem;
	/* Four stacked glows, not two. Over the brain at full zoom the old pair
	   was not enough to lift the line off the brightest gold. */
	text-shadow:
		0 0 10px var(--paper), 0 0 20px var(--paper),
		0 0 36px var(--paper), 0 0 56px var(--paper);
}



/* ---------- Sections on white ---------- */
.section { position: relative; z-index: 2; padding: var(--gap) var(--edge); max-width: 1200px; margin-inline: auto; }

/* The section slides UP OVER the sticky hero instead of waiting below it.
   Without the negative margin the panel occupies the full screen until its
   own section ends, and the reader scrolls through emptiness first.

   PLACEMENT ONLY. Appearance belongs to .brainscroll - an id beats every
   class, so a background declared here silently overrides the band colour
   and no amount of editing .brainscroll has any effect. */
#erkennen {
	position: relative;
	z-index: 5;
	/* Also sets how far the band can climb over the hero before the hero
	   panel unsticks - which is what decides whether it reaches the slogan.
	   ui.js reads the same edge; changing this changes the slogan exit. */
	margin-top: -44vh;
}
.section--warm { background: rgba(156, 200, 188, 0.045); max-width: none; }
.section--warm > * { max-width: 1200px; margin-inline: auto; }

/* Asymmetric split: label column beside content, not equal halves */
.split { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 900px) { .split { grid-template-columns: 15rem 1fr; align-items: start; } }
@media (min-width: 900px) { .split .label { margin-top: 0.6rem; } }

/* Numbered editorial list */
.entries { list-style: none; margin: 0; padding: 0; }
.entries > li {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: clamp(1rem, 2vw, 2rem);
	padding: clamp(1.6rem, 3vw, 2.4rem) 0;
	border-top: 1px solid var(--rule);
	align-items: start;
}
.entries > li:last-child { border-bottom: 1px solid var(--rule); }
.entries .n { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); line-height: 1; padding-top: 0.15rem; }
.entries h3 { margin-bottom: 0.35rem; }
.entries p { color: var(--ink-soft); margin: 0; }

/* Quiet statement block */
.statement {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
	font-size: var(--t-display);
	line-height: 1.3;
	max-width: 24ch;
	color: var(--ink);
}

/* ---------- Portrait / text pairing ---------- */
.pair { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .pair { grid-template-columns: 0.8fr 1.2fr; } }
/* No frame: the one image .pair carries is an oval with transparent
   corners, and a border draws a rectangle around the empty space. */
.pair img { border: 0; }

/* ---------- Sabine, in two beats ----------
   The small gold uppercase label was thrown out - it is the most template-
   looking device on the page - so the label is promoted to a full screen:
   the line writes itself, holds, clears, and her screen follows. Same
   rhythm as the dark band above, on white.

   ui.js publishes four numbers onto .meet__stick: --r-in (the rule leads),
   --t-in (the line is wiped in behind it), --t-out (beat one clears) and
   --p-in (her screen assembles). */
.meet {
	--lead: 14vh;   /* the line holds briefly after writing itself on the way in */
	--tail: 121vh;  /* her screen, and a proper while to stand before it is covered */
	position: relative;
	/* Barely overlaps, and that is deliberate. At -30vh the line landed in
	   the middle of the dark band fading out and sat half on black: this
	   section has no background of its own, so an overlap does not cover the
	   band, it only moves the type on top of it. Enough to avoid a seam
	   between the band fade and the white, nothing more. */
	z-index: 6;
	margin-top: -8vh;
	min-height: calc(100vh + var(--lead) + var(--tail));
}

.meet__stick {
	--r-in: 0; --t-in: 0; --t-out: 0; --p-in: 0; --turn: 0;
	position: sticky;
	top: 0;
	height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	/* Erased from the top down along the same line the closing sheet is
	   uncovered on, so the two are never printed over each other.
	   Complementary masks rather than a fade - a fade would show both at
	   half strength through the middle of the move. It belongs HERE and
	   not on the beat inside: only this box is the sheet's box, pinned to
	   the top of the screen and one screen tall, so only here do the two
	   edges land on the same line. */
	-webkit-mask-image: linear-gradient(to bottom,
		transparent calc(var(--turn) * 100%), #000 calc(var(--turn) * 100% + 2px));
	mask-image: linear-gradient(to bottom,
		transparent calc(var(--turn) * 100%), #000 calc(var(--turn) * 100% + 2px));
}

/* Both beats share one grid cell, so they cross over in place instead of
   pushing each other around. */
.meet__beat { grid-area: 1 / 1; width: min(1200px, calc(100% - 2 * var(--edge))); }

/* ---- beat one: the line ---- */
.meet__beat--title {
	position: relative;
	text-align: center;
	/* Hung from the TOP of the panel, not centred in it. Centred, the line
	   sat 58% down, so while the section rode into view its whole upper half
	   was empty white - 400px of scrolling before anything appeared. From
	   20vh it arrives almost as soon as the panel does, and a single line at
	   a fifth of the height reads better than one nailed to the middle.
	   Her screen below still centres itself. */
	align-self: start;
	/* 34vh, not 20: higher up it collided with the tail of the dark band.
	   Still well above the middle, so the section does not ride in with an
	   empty upper half the way a centred line made it. */
	margin-top: 34vh;
	opacity: calc(1 - var(--t-out));
	transform: translateY(calc(var(--t-out) * -2.6rem));
	pointer-events: none;
}

.meet__arc {
	position: absolute;
	left: -8%;
	top: 50%;
	width: 116%;
	height: clamp(110px, 20vw, 240px);
	transform: translateY(-56%);
	color: var(--gold);
	opacity: calc(0.22 * var(--r-in));
}

.meet__title {
	position: relative;
	font-size: var(--t-display);
	margin: 0;
	/* Wiped in, not faded: with the gold rule running slightly ahead the
	   line reads as written rather than switched on. */
	clip-path: inset(0 calc((1 - var(--t-in)) * 100%) 0 0);
}

.meet__rule {
	display: block;
	width: clamp(130px, 17vw, 250px);
	height: 1px;
	margin: clamp(1.1rem, 2.4vw, 1.9rem) auto 0;
	background: var(--gold);
	transform: scaleX(var(--r-in));
	transform-origin: left;
}

/* ---- beat two: her screen ---- */
/* Erased from the top down as the sheet is uncovered along the same line, so
   the two are never printed on top of each other. Complementary masks rather
   than a fade: a fade would show both at half strength through the middle of
   the move. */


.meet__beat--person { display: grid; gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .meet__beat--person { grid-template-columns: 19rem 1fr; } }

/* Each part arrives after the one before it: --s is that part own progress,
   offset along the same scroll value and clamped where it is used. */
.meet__figure { --s: calc(var(--p-in) * 2.6); margin: 0; }
.meet__name   { --s: calc(var(--p-in) * 2.6 - 0.30); }
.meet__role   { --s: calc(var(--p-in) * 2.6 - 0.52); }
.meet__quote  { --s: calc(var(--p-in) * 2.6 - 0.74); }
.meet__note   { --s: calc(var(--p-in) * 2.6 - 0.96); }
.meet__more   { --s: calc(var(--p-in) * 2.6 - 1.16); }

.meet__figure,
.meet__name,
.meet__role,
.meet__quote,
.meet__note,
.meet__more {
	opacity: clamp(0, var(--s), 1);
	transform: translateY(calc((1 - clamp(0, var(--s), 1)) * 1.5rem));
}

/* The photograph is the one thing here that must never be see-through.
   Faded in with opacity it spent its whole arrival as a window: the star
   field, the lattice and anything travelling through them showed straight
   through her. It is uncovered from the bottom instead, so whatever is
   visible of it is fully opaque at every moment. */
.meet__figure {
	opacity: 1;
	-webkit-mask-image: linear-gradient(to top,
		#000 calc(clamp(0, var(--s), 1) * 100%),
		transparent calc(clamp(0, var(--s), 1) * 100% + 2px));
	mask-image: linear-gradient(to top,
		#000 calc(clamp(0, var(--s), 1) * 100%),
		transparent calc(clamp(0, var(--s), 1) * 100% + 2px));
}

.meet__figure img {
	/* Two caps, and each has a reason. 19rem: the source file is 531px wide,
	   so anything larger goes soft on a retina screen. 42vh: the portrait is
	   1.52x as tall as it is wide, so on a short window a width in rem alone
	   would push a 462px image out of a 100vh panel. Below roughly a 720px
	   window the second cap takes over. */
	width: min(100%, 19rem, 42vh);
	height: auto;
}

.meet__name {
	font-size: var(--t-h2);
	margin: 0 0 0.3rem;
}

/* The role reads as a sentence about a person, not as a badge in capitals. */
.meet__role {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1rem, 1.35vw, 1.22rem);
	color: var(--ink-soft);
	margin: 0 0 1.3rem;
	padding-bottom: 1.3rem;
	border-bottom: 1px solid var(--rule);
	max-width: none;
}

.meet__quote {
	font-family: var(--serif);
	font-size: clamp(1.12rem, 1.7vw, 1.5rem);
	line-height: 1.42;
	margin: 0 0 1.2rem;
}

.meet__note { color: var(--ink-soft); margin: 0 0 1.7rem; }

.meet__more {
	display: inline-block;
	font-size: 0.86rem;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--gold);
	transition: color 0.25s ease;
}
.meet__more:hover { color: var(--gold); }

/* Two cases need the section to stop sticking and simply stack: without
   motion the beats would sit on top of each other in the shared grid cell,
   and under 900px the person beat stacks photo over text - around 840px,
   which no 100vh panel can hold. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
	.meet { min-height: 0; margin-top: 0; }
	.meet__stick {
		position: static;
		height: auto;
		display: block;
		padding-block: var(--gap);
		overflow: visible;
		/* ui.js keeps publishing --turn here even though no sheet comes down
		   on a narrow screen, and without these she would simply fade to
		   nothing as the reader scrolled past her. */
		opacity: 1;
	}
	.meet__stick,
	.meet__beat--person { -webkit-mask-image: none; mask-image: none; }
	.meet__beat { width: auto; }
	.meet__beat--title { align-self: auto; margin-top: 0; margin-bottom: var(--gap); opacity: 1; transform: none; }
	.meet__title { clip-path: none; }
	.meet__rule { transform: none; }
	/* 116% of a narrow beat reaches past the viewport and gives the document
	   two stray pixels of horizontal scroll. Narrower here, same shape. */
	.meet__arc { opacity: 0.22; left: -6%; width: 112%; }
	.meet__figure, .meet__name, .meet__role,
	.meet__quote, .meet__note, .meet__more { opacity: 1; transform: none; }
	.meet__figure { -webkit-mask-image: none; mask-image: none; }
	.meet__more { transition: none; }
}

/* ---------- Accordion ---------- */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
	cursor: pointer;
	list-style: none;
	padding: clamp(1.1rem, 2vw, 1.6rem) 3rem clamp(1.1rem, 2vw, 1.6rem) 0;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold); }
.qa summary::after {
	content: "";
	position: absolute; right: 0.4rem; top: 50%;
	width: 0.6rem; height: 0.6rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-60%) rotate(45deg);
	transition: transform 0.3s ease;
}
.qa details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa details > div { padding-bottom: 1.5rem; color: var(--ink-soft); }

/* ---------- Price rows: a table, not cards ---------- */
.rates { width: 100%; border-collapse: collapse; }
.rates th, .rates td { text-align: left; padding: clamp(1rem, 2vw, 1.5rem) 0; border-top: 1px solid var(--rule); vertical-align: top; }
.rates tr:last-child td { border-bottom: 1px solid var(--rule); }
.rates th { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); width: 40%; }
.rates .amount { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); white-space: nowrap; text-align: right; }
.rates td p { font-size: 0.95rem; color: var(--ink-soft); margin: 0.3rem 0 0; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1.05rem 2.1rem;
	text-decoration: none;
	background: var(--gold);
	color: var(--paper-warm);
	border: 1px solid var(--gold);
	transition: background-color 0.24s ease, color 0.24s ease, transform 0.24s ease;
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-1px); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; border-color: var(--gold); color: var(--gold); transform: none; }
.btn--onDark { background: var(--ink); color: var(--paper-warm); border-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* ---------- Contact details ---------- */
.details { list-style: none; margin: 0; padding: 0; }
.details li { padding: 0.9rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.details li:last-child { border-bottom: 1px solid var(--rule); }
.details dt, .details .k { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); padding-top: 0.25rem; }
.details a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.details a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Page header for subpages ---------- */
.pagehead {
	padding: clamp(6rem, 14vh, 9rem) var(--edge) clamp(2.5rem, 6vh, 4rem);
	max-width: 1200px;
	margin-inline: auto;
	border-bottom: 1px solid var(--rule);
}
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { margin-top: 1.2rem; max-width: 52ch; }

/* ---------- Footer ---------- */
.foot {
	position: relative;
	z-index: 2;
	overflow: hidden;
	border-top: 1px solid var(--forest-line);
	padding: clamp(3rem, 7vw, 5rem) var(--edge) clamp(4.5rem, 8vh, 6.5rem);
	background: var(--forest-deep);
	color: var(--on-forest-soft);
}

/* The name, once, at the very bottom - the last thing on the page rather
   than another link. Sunk far enough that its descenders run off the edge,
   which is what stops it reading as a heading. */
.foot__mark {
	position: absolute;
	left: 50%;
	bottom: -0.16em;
	transform: translateX(-50%);
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 144;
	font-size: clamp(2.6rem, 8vw, 6.5rem);
	line-height: 1;
	white-space: nowrap;
	color: var(--on-forest);
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}
.foot__grid { display: grid; gap: 2.5rem; max-width: 1200px; margin-inline: auto; }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot__label { font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-forest-faint); margin-bottom: 1rem; }
.foot nav { display: flex; flex-direction: column; gap: 0.55rem; }
.foot a { color: var(--on-forest); text-decoration: none; font-size: 0.92rem; }
.foot a:hover { color: var(--teal); }
.foot__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--forest-line); font-size: 0.82rem; color: var(--on-forest-faint); display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; max-width: 1200px; margin-inline: auto; }

/* ---------- Focus ---------- */
a:focus-visible, summary:focus-visible, button:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ---------- Placeholder flag ---------- */
.todo {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: #B5543F;
	color: #fff;
	padding: 0.15rem 0.45rem;
	margin-left: 0.4rem;
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	.btn, .mast__nav a::after, .burger span { transition: none; }
	.btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.stage__inner {
		transform: none;
		filter: none;
	}
}



/* =========================================================================
   The call to action

   Deliberately not a filled rounded box - that shape is what makes template
   sites recognisable at a glance. This is a bare word with a rule beneath
   it: the rule is drawn from left to right on approach, and a hairline frame
   grows out of it. Restraint reads as expensive; a loud button does not.
   ========================================================================= */
.cta {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: 0.2rem 0.6rem 0;
	text-decoration: none;
	color: var(--ink);
	background: none;
	border: 0;
	pointer-events: auto;
	isolation: isolate;
}

.cta__label {
	font-family: var(--sans);
	font-size: 0.74rem;
	font-weight: 500;
	text-shadow:
		0 0 6px var(--paper), 0 0 6px var(--paper),
		0 0 14px var(--paper), 0 0 22px var(--paper);
	/* Wide tracking is the single strongest signal of considered typography
	   at small sizes - it turns a label into a mark. */
	letter-spacing: 0.34em;
	text-transform: uppercase;
	text-indent: 0.34em;   /* balances the trailing letter-space */
	white-space: nowrap;
	transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The rule: a hairline that draws itself across on hover. */
.cta__rule {
	position: relative;
	display: block;
	width: clamp(7rem, 12vw, 10rem);
	height: 1px;
	background: var(--rule);
	box-shadow: 0 0 8px 3px var(--paper);
	overflow: visible;
}

.cta__rule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta:hover .cta__rule::after,
.cta:focus-visible .cta__rule::after { transform: scaleX(1); }
.cta:hover .cta__label { color: var(--gold); }

/* A frame that unfolds from the rule outward, rather than sitting there
   from the start. */
.cta::before {
	content: "";
	position: absolute;
	inset: -0.9rem -1.6rem -0.5rem;
	border: 1px solid var(--gold);
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	z-index: -1;
}

.cta:hover::before,
.cta:focus-visible::before { opacity: 0.55; transform: scale(1); }

.cta:focus-visible { outline: none; }
.cta:focus-visible .cta__label { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
	.cta__label, .cta__rule::after, .cta::before { transition: none; }
}

/* =========================================================================
   The brain

   A dark, full-bleed band inside a white document. It is the one place on
   the site where something is meant to glow, and nothing glows on white.

   The section is the runway; the panel inside it sticks. Positions of the
   notes come from brain.js, which measures each one and places it beside
   whichever point is currently lit - so this stylesheet deliberately gives
   them no layout beyond a width cap and their type.
   ========================================================================= */
/* Runway, in three parts. brain.js reads these same three numbers to work
   out when each beat happens - they are declared here because this is where
   the height comes from, and the two must not drift apart. */
.brainscroll {
	--steps: 5;
	--lead: 55vh;   /* before the first point: the opening line stands */
	--step: 48vh;   /* per point */
	--tail: 45vh;   /* after the last point: the closing line */
	--deep: #04100E;
	--glow: #2AC4A8;
	--point: #FF6048;
	position: relative;
	min-height: calc(100vh + var(--lead) + var(--steps) * var(--step) + var(--tail));
	background: var(--deep);
	color: #DCEFE9;
}

/* Blend into the white page above and below, so the band reads as part of
   the document rather than as a pasted-in rectangle. */
.brainscroll::before,
.brainscroll::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(2.5rem, 6vw, 5rem);
	pointer-events: none;
	z-index: 4;
}
.brainscroll::before { top: 0; background: linear-gradient(var(--paper), transparent); }
.brainscroll::after { bottom: 0; background: linear-gradient(transparent, var(--paper)); }

.brainscroll__stick {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.brainscroll__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Intro, centred, clears out as the first point arrives ---------- */
.brainscroll__intro {
	--out: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, calc(-50% - var(--out) * 3rem));
	width: min(44rem, calc(100% - 2 * var(--edge)));
	text-align: center;
	opacity: calc(1 - var(--out));
	pointer-events: none;
	z-index: 3;
}

.brainscroll__claim {
	color: #F2F8F5;
	font-size: var(--t-h1);
	margin-bottom: 0.7rem;
}

.brainscroll__lead {
	color: #93B3AB;
	font-size: var(--t-lead);
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	margin: 0 auto;
	max-width: 34ch;
}

/* ---------- One note at a time, placed by the script ---------- */
.brainscroll__note {
	--show: 0;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	width: min(21rem, 62vw);
	opacity: var(--show);
	pointer-events: none;
	z-index: 3;
	will-change: transform, opacity;
}

/* The leader always meets the edge of the box nearest the brain, so the
   text has to hug that edge. */
.brainscroll__note { text-align: right; }
.brainscroll__note.is-right { text-align: left; }
.brainscroll__note.is-below { text-align: center; }

/* The number belongs to the point, not to the paragraph. At 0.7rem in flat
   red it was a detail nobody found; now it burns in the same colour and to
   the same heartbeat as the dot on the brain - brain.js publishes that beat
   as --gluehen, so the two are literally in step rather than merely alike.
   Three shadows, not one: a tight core, a body, and a wide bloom, which is
   how the halo around the point itself is built. */
.brainscroll__n {
	display: block;
	font-family: var(--sans);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	color: #FF8C74;
	text-shadow:
		0 0 calc(4px + 4px * var(--gluehen, 0.5)) rgba(255, 96, 72, 0.95),
		0 0 calc(12px + 11px * var(--gluehen, 0.5)) rgba(255, 96, 72, 0.6),
		0 0 calc(26px + 18px * var(--gluehen, 0.5)) rgba(255, 96, 72, 0.3);
	margin-bottom: 0.55rem;
}

@media (prefers-reduced-motion: reduce) {
	/* Still lit, simply not breathing. */
	.brainscroll__n { --gluehen: 0.5; }
}

.brainscroll__note p {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 48;
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	line-height: 1.34;
	color: #F0F6F3;
	margin: 0;
	max-width: none;
}

/* ---------- The closing line, after the last point ---------- */
.brainscroll__outro {
	--show: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, calc(-50% + (1 - var(--show)) * 2.4rem));
	width: min(42rem, calc(100% - 2 * var(--edge)));
	text-align: center;
	opacity: var(--show);
	pointer-events: none;
	z-index: 3;
}

.brainscroll__outro p {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
	/* Between h2 and display. Full display size is for short statement lines
	   and this sentence runs to three of them - but at h2 it was the smallest
	   thing on a screen it has entirely to itself, and read as a footnote to
	   the passage rather than as its closing thought. */
	font-size: clamp(1.3rem, 1.95vw, 1.78rem);
	line-height: 1.4;
	letter-spacing: -0.008em;
	color: #F2F8F5;
	margin: 0 auto;
	max-width: 30ch;
}

/* ---------- The closing invitation, turning open like a page ----------
   It sits OVER the tail of the section before it and rotates flat around
   its left edge as the reader arrives, so the handover is one gesture
   rather than two blocks that merely follow each other.

   ui.js publishes --open, 0 closed to 1 flat. Everything else is CSS. */
.step {
	--open: 0;
	position: relative;
	z-index: 7;
	/* Sits over the tail of her section so it is already in place, waiting to
	   be uncovered, rather than arriving afterwards. */
	margin-top: -130vh;
	min-height: 175vh;
}

.step__page {
	/* NO background of its own, and that is the whole point. An opaque white
	   sheet cut off the fixed star canvas that shows through every other
	   section, so the page read as a foreign grey slab dropped onto the site.
	   The ground has to stay continuous, so the sheet is transparent and the
	   section underneath fades out instead - see --turn on .meet__stick. */
	background: transparent;
	/* Pinned like her panel, and the same height, so the wipe boundary below
	   is the same screen line in both. */
	position: sticky;
	top: 0;
	height: 100vh;
	display: grid;
	/* The TEXT is what sits on the centre line, not the block as a whole.
	   Centring everything together pushed the words below the middle by
	   half the height of the mark - and no fixed offset fixes that, since
	   it changes with the viewport. Equal rows either side of the words do
	   it by construction, and they leave the mark free to run off the top
	   edge, which is where it wants to go. */
	grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
	justify-items: center;
	row-gap: clamp(1.2rem, 3vh, 2.4rem);
	padding: var(--gap) var(--edge);
	/* Uncovered from the top down: above the edge this page is already there,
	   below it she still is. A sheet laid over the one before it - and it
	   works without any ground of its own, which an opaque sheet would have
	   needed and which would have cut off the star field. */
	-webkit-mask-image: linear-gradient(to bottom,
		#000 calc(var(--open) * 100%), transparent calc(var(--open) * 100% + 2px));
	mask-image: linear-gradient(to bottom,
		#000 calc(var(--open) * 100%), transparent calc(var(--open) * 100% + 2px));
}

/* The leading edge. With no ground of its own the sheet would otherwise have
   nothing to announce it - this hairline is the paper edge travelling down
   the screen. Brightest halfway through, gone at both ends. */
.step__page::before {
	content: "";
	position: absolute;
	/* 0, not a negative edge inset: an absolutely positioned child is placed
	   against the PADDING box, so it already spans the full width. Pulling it
	   out by --edge on both sides pushed 70px of page off the right of the
	   screen and gave the whole document a horizontal scrollbar. */
	left: 0;
	right: 0;
	top: calc(var(--open) * 100%);
	height: 1px;
	background: linear-gradient(90deg,
		rgba(166, 124, 0, 0) 0%,
		rgba(166, 124, 0, 0.85) 18%,
		rgba(166, 124, 0, 0.85) 82%,
		rgba(166, 124, 0, 0) 100%);
	opacity: calc(var(--open) * (1 - var(--open)) * 3.4);
	pointer-events: none;
}


/* Two columns: the mark on the left, the words on the right against a
   hairline. The close used to be one more centred block of serif text
   directly after the one above it, and that repetition is what made the
   foot of the page read as filler however carefully each part was set. */
/* The mark's square. Its size decides the mark's size, so it is given in
   viewport height - the closing page is one screen tall and the words have
   to fit under it. */
.step__visual {
	align-self: end;
	width: min(22vh, 190px);
	height: min(22vh, 190px);
}

.step__body {
	max-width: 40rem;
	text-align: center;
}

.is-overMark { cursor: pointer; }
.is-overMark p,
.is-overMark h1,
.is-overMark h2,
.is-overMark h3,
.is-overMark figcaption { cursor: auto; }
.is-overMark a,
.is-overMark button { cursor: pointer; }

.step__title {
	font-size: var(--t-display);
	color: var(--on-forest);
	margin: 0 0 clamp(1.1rem, 2.6vh, 1.6rem);
}

.step__line {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--on-forest-soft);
	margin: 0 auto 0.8rem;
	max-width: 42ch;
}

/* The three sentences settle one after the other as the wipe passes down
   over them, rather than the whole block landing at once. --i is the line
   index, set in the markup; --open is the wipe. */
.step__line,
.step__cta {
	--s: calc((var(--open) - 0.18 - var(--i) * 0.16) * 5);
	opacity: clamp(0, var(--s), 1);
	transform: translateY(calc((1 - clamp(0, var(--s), 1)) * 0.9rem));
}

/* The button is the last beat of the passage, so it arrives after the last
   sentence rather than sitting there waiting for it. */
.step__cta {
	align-self: start;
	margin-top: clamp(1.6rem, 4vh, 2.6rem);
	color: var(--on-forest);
}

/* The halo behind the label has to match whatever it stands on, or it
   glows the wrong colour - here that is the green, not the paper. */
.step__cta .cta__label { text-shadow: 0 0 8px var(--forest), 0 0 18px var(--forest); }
.step__cta .cta__rule { background: var(--forest-line); box-shadow: 0 0 8px 3px var(--forest); }

.step__line:last-child { margin-bottom: 0; }


/* Narrow screens and reduced motion: no page, no turn - the section simply
   follows the one above it. A 3D rotation on a phone is a lot of paint for
   very little, and the overlap would hide the section before it. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
	.step { margin-top: 0; min-height: 0; }
	.step__page { position: static; height: auto; min-height: 0;
		-webkit-mask-image: none; mask-image: none; }
	.step__page { grid-template-rows: auto auto auto; }
	.step__visual { display: block; }
	.step__line,
	.step__cta { opacity: 1; transform: none; }
	.step__page::before { display: none; }
}

.foot__links { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline; }
.foot__links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.foot__links a:hover { border-bottom-color: currentColor; }

/* ---------- The invitation ----------
   No panel, no border, no card. A thread comes down from the section above,
   ends in a point, and the invitation sits under it - the eye is led to the
   button rather than fenced in with it. The thread draws itself on scroll,
   the same gesture the Sabine title and the pain-point leaders use, so this
   section belongs to the page rather than being decorated separately. */
.invite {
	--draw: 0;
	--thread: clamp(7rem, 19vh, 13rem);
	position: relative;
	padding: calc(var(--thread) + clamp(2.5rem, 6vh, 4.5rem)) var(--edge) clamp(3.5rem, 11vh, 8rem);
	text-align: center;
}

/* A shooting star, falling the whole time rather than a line that waits to
   be scrolled into existence. Pure CSS: one element, transform and opacity
   only, so it costs a compositor layer and no script at all - and it keeps
   moving whether or not the reader has arrived yet.

   The streak is the tail; the head is the bright point at its lower end. */
.invite__thread {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 6rem;
	margin-left: -0.5px;
	background: linear-gradient(to bottom, rgba(166, 124, 0, 0), var(--gold));
	animation: invite-fall 4.2s cubic-bezier(0.45, 0, 0.75, 1) infinite;
}

.invite__thread::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--gold-bright);
	box-shadow: 0 0 7px 1px rgba(212, 168, 44, 0.55);
}

@keyframes invite-fall {
	0%   { transform: translateY(-7rem); opacity: 0; }
	14%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { transform: translateY(var(--thread)); opacity: 0; }
}

/* Where the star lands. Quiet - it is a destination, not a bullet. */
.invite::after {
	content: "";
	position: absolute;
	left: 50%;
	top: var(--thread);
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--gold);
	opacity: calc(var(--draw) * 0.75);
}


@media (prefers-reduced-motion: reduce) {
	.invite { --draw: 1; }
	/* No falling: the thread simply hangs there. */
	.invite__thread { animation: none; transform: translateY(var(--thread)); }
}

/* ---------- Legal pages ----------
   Long, dense, and read only when someone is looking for one specific
   clause - so a narrow measure and a visible clause number matter more
   here than anything decorative. */
.legal { max-width: 46rem; }

.legal h2 {
	font-size: var(--t-h3);
	margin: 2.6rem 0 0.9rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rule);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.legal p {
	position: relative;
	padding-left: 3.2rem;
	margin-bottom: 0.9rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: none;
}

/* The number sits in the margin, so the paragraphs keep a clean left edge
   and a clause can be found by eye. */
.legal__n {
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--sans);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--gold);
	line-height: 1.95;
}

/* No clause numbers here, so no margin to hang them in. */
.legal--plain p { padding-left: 0; }

.legal__list {
	margin: 0 0 0.9rem;
	padding-left: 1.15rem;
	color: var(--ink-soft);
	font-size: 0.95rem;
	line-height: 1.65;
}
.legal__list li { margin-bottom: 0.32rem; }
.legal__list li::marker { color: var(--gold); }
.legal--plain h2 { margin-top: 2.2rem; }

@media (max-width: 599px) {
	.legal p { padding-left: 2.6rem; }
	.legal--plain p { padding-left: 0; }
}

/* ---------- Masthead over the dark band ----------
   The header is fixed and inked for a white page. brain.js sets .on-dark on
   the root while the band is behind it, or the navigation disappears. */
.on-dark .mast__nav a { color: #A8C6BE; }
.on-dark .mast__nav a[aria-current="page"] { color: #EAF4F0; }
.on-dark .mast__cta {
	color: #EAF4F0;
	border-color: rgba(234, 244, 240, 0.28);
}
.on-dark .mast__cta:hover {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	color: #0A1614;
}
.on-dark .burger { border-color: rgba(234, 244, 240, 0.28); }
.on-dark .burger span { background: #EAF4F0; }

.mast__nav a,
.mast__cta,
.burger,
.burger span {
	transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

@media (max-width: 859px) {
	.brainscroll { --step: 62vh; --tail: 78vh; }
	.brainscroll__note { width: min(24rem, calc(100% - 2.5rem)); }
}

@media (prefers-reduced-motion: reduce) {
	.mast__nav a, .mast__cta, .burger, .burger span { transition: none; }
}

/* ---------- Phone ----------
   Not the desktop composition shrunk, but re-laid. Three things were wrong
   on a phone and none of them is a size: the closing mark was drawn across
   the words instead of beside them, the footer was taller than the screen
   so it could never be taken in as one thing, and the band spent five and a
   half screens on five short lines. Desktop is untouched. */
@media (max-width: 899px) {

	/* A slot of its own above the words. Hidden, the mark had no target and
	   fell back to the middle of the screen - which is exactly where the
	   closing text and the button are. Measured: mark 273..507, text 0..499. */
	.step__visual {
		display: block;
		width: min(48vw, 26vh, 220px);
		height: min(48vw, 26vh, 220px);
		z-index: 1;
	}
	.step__page {
		gap: clamp(0.8rem, 2.5vh, 1.6rem);
	}

	/* Once the two columns collapse the portrait keeps the column width and
	   sits against the left edge. */
	.meet__figure img { margin-inline: auto; }

	/* 847px against a 780px screen. Contact and Pages go side by side rather
	   than stacking a seven-link column under two more. */
	.foot { padding-bottom: clamp(3rem, 5vh, 4rem); }
	.foot__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
	.foot__grid > :first-child { grid-column: 1 / -1; }
	.foot nav { gap: 0.42rem; }
	.foot h4 { margin-bottom: 0.7rem; }
	.foot__legal { margin-top: 2rem; padding-top: 1.1rem; gap: 0.5rem; }
	.foot__mark { font-size: clamp(1.9rem, 9vw, 2.6rem); }

	/* A third of the screen wide, next to the burger. */
	.mast__cta { font-size: 0.62rem; letter-spacing: 0.13em; padding: 0.62rem 0.8rem; }
}

/* On a narrow phone the booking word, the burger and the mark together were
   47px wider than the screen and pushed the masthead out of the page. The
   word gives up the difference - it is the only part of the row that can. */
@media (max-width: 430px) {
	.mast {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.6rem;
	}
	.mast__end { gap: 0.5rem; min-width: 0; }
	.mast__cta {
		font-size: 0.55rem;
		letter-spacing: 0.07em;
		padding: 0.55rem 0.6rem;
	}

	/* 4235px of runway for five lines. */
	.brainscroll { --lead: 42vh; --step: 46vh; --tail: 52vh; }
}

/* ---------- Video, erst auf Klick ----------
   The still is the 16:9 thumbnail YouTube hands out, but the film itself is a
   vertical Short sitting in the middle of it. `cover` on a 9:16 frame scales
   the image to the frame's height and crops the sides away - which is exactly
   the vertical frame, no image editing needed. */
.tube {
	margin: 0;
	max-width: 300px;
}

.tube__start {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 1px solid var(--rule);
	border-radius: 2px;
	background: var(--paper-warm);
	overflow: hidden;
	cursor: pointer;
	isolation: isolate;
}

.tube__still {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.4s ease;
}

/* A wash from the foot of the frame, so the caption edge and the play mark
   both have something to sit against whatever the still happens to show. */
.tube__start::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4, 16, 14, 0.55), transparent 45%);
	pointer-events: none;
}

.tube__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.6rem;
	height: 3.6rem;
	margin: -1.8rem 0 0 -1.8rem;
	border-radius: 50%;
	background: rgba(4, 16, 14, 0.55);
	border: 1px solid var(--gold);
	z-index: 1;
	transition: background-color 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The triangle, drawn rather than set: a glyph would sit off-centre in the
   circle and shift with the font. */
.tube__play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	/* Optical centre, not geometric: a triangle looks left-heavy at 50%. */
	transform: translate(-38%, -50%);
	border-left: 0.85rem solid var(--gold-bright);
	border-top: 0.55rem solid transparent;
	border-bottom: 0.55rem solid transparent;
}

.tube__start:hover .tube__still,
.tube__start:focus-visible .tube__still { transform: scale(1.03); }
.tube__start:hover .tube__play,
.tube__start:focus-visible .tube__play {
	background: rgba(4, 16, 14, 0.75);
	transform: scale(1.08);
}

.tube__caption {
	display: block;
	margin-top: 0.9rem;
	max-width: 300px;
	font-size: 0.86rem;
	line-height: 1.5;
}
.tube__caption strong { display: block; color: var(--ink); font-weight: 500; }
.tube__caption span { display: block; margin-top: 0.2rem; color: var(--ink-faint); font-size: 0.78rem; }


@media (prefers-reduced-motion: reduce) {
	.tube__still, .tube__play { transition: none; }
	.tube__start:hover .tube__still { transform: none; }
}

/* ---------- Ueber mich ----------
   Centred, in the home page's register. Measured there: headings Fraunces at
   --t-display, running text Fraunces at --t-lead in --ink-soft, both centred
   in a column that wraps around 585px. This page used to set its body in
   Instrument Sans at 16px and align it left, which made it read as if it came
   from a different site. */
.pagehead--mid {
	text-align: center;
}
.pagehead--mid h1,
.pagehead--mid .lead {
	margin-inline: auto;
}
/* .label is a flex row with a rule after it, so centring the text is not
   enough - the box itself has to be centred and the rule dropped. */
.pagehead--mid .label {
	justify-content: center;
	max-width: none;
}
.pagehead--mid .label::after { display: none; }

/* Down to the film. Sits where the portrait used to, and says where it goes. */
.tojump {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-top: clamp(1.8rem, 4vh, 2.6rem);
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
}
.tojump__arrow {
	width: 1px;
	height: 2.2rem;
	background: linear-gradient(to bottom, var(--gold), transparent);
	transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tojump:hover { color: var(--ink); }
.tojump:hover .tojump__arrow { height: 3rem; }

.about {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(2rem, 5vh, 3rem) var(--edge) clamp(5rem, 12vh, 8rem);
	text-align: center;
}

/* An article that the cover hands over to starts at the very top of the
   screen, so it needs room of its own to clear the masthead. */
.about[data-nach-intro] {
	padding-top: clamp(7rem, 15vh, 9rem);
}


.about h2 {
	font-size: var(--t-display);
	color: var(--ink);
	max-width: 20ch;
	margin: clamp(3rem, 7vh, 4.5rem) auto 1.6rem;
}
.about > h2:first-child { margin-top: 0; }

/* 42ch at this size lands on the same measure the home page wraps at. */
.about p {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 42ch;
	margin: 0 auto 1.1rem;
}

.about__quote {
	color: var(--ink) !important;
	max-width: 30ch !important;
}

/* A short gold rule instead of a bar down the side: a left border cannot mark
   centred text without pulling it off the middle. */
.about__mark {
	width: clamp(3rem, 10vw, 5.5rem);
	height: 1px;
	margin: clamp(2.4rem, 5.5vh, 3.4rem) auto;
	border: 0;
	background: linear-gradient(90deg,
		rgba(201, 152, 46, 0), var(--gold), rgba(201, 152, 46, 0));
}

.about .tube {
	margin: 0.4rem auto 0;
	max-width: min(300px, 100%);
}
.about .tube__caption {
	max-width: 300px;
	margin: 0.7rem auto 0;
	color: var(--ink-faint);
	font-size: 0.78rem;
	text-align: center;
}

.about__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
	margin-top: clamp(3rem, 7vh, 4rem);
}

/* ---------- Schwerpunkte: der Stapel ----------
   The cards lie on one another. Those still to come are offset to the right
   and a shade smaller, so their edges stand out past the front card and you
   can see there is more waiting. Scrolling carries the front card off to the
   right and brings the next one forward.

   Every card occupies the same grid cell and is moved only by transform and
   opacity, both derived from one number: --d, the card's distance from the
   front, written by the scroll handler. Nothing is repositioned in layout, so
   the whole thing composites. */
.deck {
	/* The runway: one screen of scroll for each change of card, plus room to
	   settle at either end. */
	min-height: calc((var(--karten, 7) * 62vh) + 40vh);
	position: relative;
	/* --spahn: how far each card behind peeks out to the right.
	   --tiefe: how many of them are still visible. */
	--spahn: 30px;
	--tiefe: 3;
	/* The leaving card is thrown right hard: it has to be clear of the pile
	   and gone from the screen well before the next card has settled,
	   otherwise it hangs about at the edge for the rest of the step. */
	--flucht: 1400px;
	--frei: 0.45;   /* clear of the pile - it may start to fade */
	--weg: 0.62;    /* fully gone, with a third of the step still to run */
	/* Half of one visible step. The steps come out shorter than --spahn
	   because the cards behind are scaled back, so this is measured. */
	--halbschritt: 9px;
	/* How many cards are still stacked behind the front one, counted down
	   towards the end of the deck by the scroll handler. */
	--rest: var(--tiefe);
}

.deck__stick {
	position: sticky;
	top: 0;
	height: 100svh;
	display: grid;
	place-items: center;
	padding: var(--edge);
	/* Clip sideways so a card leaving the pile disappears cleanly; leave the
	   vertical alone so an opened card may use the padding if it needs to. */
	overflow-x: clip;
	overflow-y: visible;
}

.deck__stage {
	display: grid;
	align-items: start;
	width: min(38rem, 100%);
	/* The pile leans to the right, so the stage leans back by half of it -
	   otherwise the group as a whole would sit off-centre on the screen. */
	/* The pile leans right, so the stage leans back by half of it and the
	   group sits centred on screen. As the deck runs out and fewer cards
	   remain behind, the lean eases off with them - the last card ends up
	   dead centre. */
	transform: translateX(calc(var(--rest) * var(--halbschritt) * -1));
}

.deck__card {
	--d: 0;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* A common floor, so the closed pile is even rather than ragged. The
	   card is 38rem wide at every width that gets the deck, so the text
	   wraps the same everywhere and this height holds. */
	min-height: 25rem;
	padding: clamp(1.8rem, 4vw, 2.8rem);
	border: 1px solid var(--rule);
	border-radius: 18px;
	/* Solid. A translucent card let the one behind it read straight
	   through the headline, which looked like a rendering fault. */
	background: var(--paper-warm);
	box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);
	text-align: center;
	transform-origin: center center;
	will-change: transform, opacity;
	pointer-events: none;
	/* Behind (d > 0): stepped to the right and set back.
	   Leaving (d < 0): carried further right, tipped, faded.
	   One expression covers both, which is why nothing jumps as a card
	   passes through the front position. */
	transform:
		translateX(calc(var(--d) * var(--spahn) + max(var(--d) * -1, 0) * var(--flucht)))
		rotate(calc(max(var(--d) * -1, 0) * 7deg))
		scale(calc(1 - max(var(--d), 0) * 0.04));
	/* The leaving card keeps full cover until it is off the pile, then goes
	   in the remaining fifth of the step. Deep in the stack the far cards
	   fade out instead of piling up forever. */
	opacity: calc(
		1
		- max(var(--d) - var(--tiefe) + 1, 0) * 0.5
		- max((var(--d) * -1) - var(--frei), 0) * calc(1 / (var(--weg) - var(--frei)))
	);
	z-index: calc(100 - var(--d) * 10);
}
/* Only the card in front takes clicks. */
.deck__card[data-front] { pointer-events: auto; }

.deck__title {
	/* One step above --t-h2. A card owns its whole screen, and at h2 the
	   headline sat only four pixels above the line under it - it read as a
	   caption rather than the title of the panel. Still well below the
	   section headline, so the scale keeps its order. The 18ch measure below
	   grows with the type, so the line breaks stay exactly where they were. */
	font-size: clamp(1.46rem, 2.1vw, 1.94rem);
	color: var(--ink);
	max-width: 18ch;
	margin: 0 auto 0.8rem;
}

.deck__short {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 34ch;
	margin: 0 auto;
}

.deck__more {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1.4rem;
	padding: 0.5rem 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	transition: color 0.25s ease;
}
.deck__more:hover { color: var(--ink); }

.deck__moreMark { position: relative; width: 0.7rem; height: 0.7rem; flex: none; }
.deck__moreMark::before,
.deck__moreMark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--gold);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.deck__moreMark::after { transform: rotate(90deg); }
.deck__more[aria-expanded="true"] .deck__moreMark::after { transform: rotate(0deg); }

.deck__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.55s;
}
.deck__panelInner {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.35s ease 0.12s;
}
.deck__card.is-open .deck__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.deck__card.is-open .deck__panelInner { opacity: 1; }

/* The longest entry is taller than a laptop screen once it is open, and the
   card is pinned inside a sticky panel - anything past the bottom edge would
   be unreachable. So the card stops at the height of its screen and the text
   itself takes the scroll. Shorter cards never reach the cap and behave
   exactly as before. */
.deck__card.is-open { max-height: calc(100svh - 2 * var(--mast-h)); }
.deck__card.is-open .deck__panel { min-height: 0; }
.deck__card.is-open .deck__panelInner {
	overflow-y: auto;
	/* Reading the card must not drag the deck along underneath it. */
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
}

.deck__panelInner p {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	/* Same setting as an opened answer on the Fragen page - both are the text
	   you unfold to read closely, so they have no business being different
	   sizes. At --t-body this prose was smaller than the teaser above it. */
	font-size: var(--t-lead);
	line-height: 1.65;
	color: var(--ink-soft);
	/* Wider measure and a tighter rhythm to pay for the larger type: at 38ch
	   the longest entry grew past the bottom of the screen it opens on. The
	   column still stops well inside the card. */
	max-width: 46ch;
	margin: 0.7rem auto 0;
}
.deck__panelInner p:first-child { margin-top: 1.1rem; }

.deck__after {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 var(--edge) clamp(5rem, 12vh, 8rem);
	text-align: center;
}

.deck__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}

/* Narrow screens and reduced motion: no pile. A pinned stack needs height to
   work in and a phone has none to spare, so the cards simply follow one
   another - the fold still opens. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
	.deck { min-height: 0; }
	.deck__stick {
		position: static;
		height: auto;
		display: block;
		/* Clear of the fixed masthead: without the title card taking up the
		   first screen, the stack now starts at the very top of the page. */
		padding: clamp(7rem, 16vh, 9rem) var(--edge) 0;
		overflow: visible;
	}
	.deck__stage {
		display: block;
		width: auto;
		max-width: 38rem;
		margin-inline: auto;
		transform: none;
	}
	.deck__card {
		min-height: 0;
		transform: none;
		opacity: 1;
		pointer-events: auto;
		margin: 0 auto clamp(1rem, 3vh, 1.6rem);
	}
}

.about--top { padding-bottom: 0; }
.about--after { padding-top: clamp(2rem, 5vh, 3rem); }

/* ---------- Die Titelkarte ----------
   A cover for the page. It plays by itself on arrival - the line comes out of
   the middle, stands, dissolves, and what follows comes up in its place - and
   it stays reachable afterwards: scroll back to the top and it is there again.

   Two parts with two different jobs. The section is a plain screen-high
   spacer: it is the room above the content that you can scroll back into, and
   nothing more. The block inside is fixed, so it holds the middle of the
   screen whatever the page does underneath.

   On arrival the page is put at the foot of that spacer straight away, while
   the cover is still opaque and what follows is still down. That is why there
   is nothing to scroll through to reach the content, and why it sits at rest
   the moment the cover clears.

   Everything is driven by numbers written by the handler:
   --e1 … --e4  label, line, text and the way down, arriving in that order
   --x          the cover going
   --k          what follows coming up
   They only start hidden under .hi-js, so without scripts you simply get the
   cover and the content, one under the other. */
/* One screen, and the reader's to scroll through. The cover fades as they
   come down and returns as they go back up - so the opening lines can be read
   again. Nothing moves the page by itself: no jump on arrival, no lock, no
   timer. That was the source of every jolt. */
.intro {
	height: 100svh;
}

.intro__inner {
	--e1: 1;
	--e2: 1;
	--e3: 1;
	--e4: 1;
	--x: 0;
	position: fixed;
	inset: 0;
	/* Above the content, below the masthead. */
	z-index: 30;
	display: grid;
	place-items: center;
	align-content: center;
	padding: var(--edge);
	text-align: center;
	/* It never takes a click - what is underneath does. */
	pointer-events: none;
	/* Nor a selection. A drag across the page, or a select-all, used to paint
	   the gold selection box behind the small label, which made a piece of
	   decoration look like a button. */
	-webkit-user-select: none;
	user-select: none;
}

/* The same goes for every other layer of staged type: lines that fade in and
   out over the page and take no click. Highlighting one of them shows a gold
   box around a word in mid-fade, which reads as a control rather than as the
   decoration it is. The running text of the pages stays selectable. */
.stage__inner,
.stage__second,
.meet__beat--title,
.brainscroll__intro,
.brainscroll__lead,
.brainscroll__note,
.brainscroll__outro {
	-webkit-user-select: none;
	user-select: none;
}

.hi-js .intro__inner { --e1: 0; --e2: 0; --e3: 0; --e4: 0; }

/* Whatever the cover hands over to - the deck on one page, the article on
   another - carries this. It is held down until the cover starts to go. */
.hi-js [data-nach-intro] { opacity: var(--k, 0); }

/* Arriving: up out of a blur, growing into place. Leaving: on past you,
   softening. One expression each, so a cover caught mid-arrival by an
   impatient reader still leaves from wherever it had got to. */
.intro__label {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	max-width: none;
	margin: 0 auto clamp(1.4rem, 3.5vh, 2rem);
	opacity: calc(var(--e1) * (1 - var(--x)));
	transform: scale(calc(0.9 + var(--e1) * 0.1 + var(--x) * 0.08));
	filter: blur(calc((1 - var(--e1)) * 12px + var(--x) * 9px));
	will-change: opacity, transform, filter;
}

/* One step above display, and only here. A cover is the one place on a
   subpage that carries the whole screen. */
.intro__title {
	font-size: clamp(2.27rem, 4.54vw, 3.67rem);
	line-height: 1.14;
	/* Large serif reads loose by default; the gap after "Weg" opens up
	   visibly without this. */
	letter-spacing: -0.018em;
	word-spacing: -0.02em;
	color: var(--ink);
	/* Left to itself the line broke before "dir"; balanced it splits where
	   the sentence actually turns. */
	text-wrap: balance;
	max-width: 26ch;
	margin: 0 auto;
	opacity: calc(var(--e2) * (1 - var(--x)));
	transform: scale(calc(0.9 + var(--e2) * 0.1 + var(--x) * 0.08));
	filter: blur(calc((1 - var(--e2)) * 12px + var(--x) * 9px));
	will-change: opacity, transform, filter;
}

/* The gold hairline the home page draws between the same claim and its
   explanation. It gives the block a spine and keeps the two from reading as
   one loose paragraph. */
.intro__title::after {
	content: "";
	display: block;
	width: 3.2rem;
	height: 1px;
	margin: clamp(1.6rem, 3.5vh, 2.4rem) auto 0;
	background: var(--gold);
	opacity: 0.55;
}

/* The cover takes no clicks - except this one. It is the way down to the
   film, and it is there whenever the cover is: on arrival, and again any
   time you scroll back to the top. */
.intro__inner .tojump {
	pointer-events: auto;
	opacity: calc(var(--e4) * (1 - var(--x)));
	transform: scale(calc(0.9 + var(--e4) * 0.1 + var(--x) * 0.08));
	filter: blur(calc((1 - var(--e4)) * 12px + var(--x) * 9px));
	will-change: opacity, transform, filter;
}

/* A jump to the film must not land it under the fixed masthead. */
[id="video"] { scroll-margin-top: clamp(6rem, 14vh, 8rem); }

.intro__lead {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 46ch;
	margin: clamp(1.4rem, 3.5vh, 2.2rem) auto 0;
	opacity: calc(var(--e3) * (1 - var(--x)));
	transform: scale(calc(0.9 + var(--e3) * 0.1 + var(--x) * 0.08));
	filter: blur(calc((1 - var(--e3)) * 12px + var(--x) * 9px));
	will-change: opacity, transform, filter;
}

/* Asked for less motion: the same order and the same timing, but the cover
   only fades. Nothing grows, nothing blurs. */
@media (prefers-reduced-motion: reduce) {
	.intro__label,
	.intro__title,
	.intro__lead,
	.intro__inner .tojump {
		transform: none;
		filter: none;
	}
}

/* ---------- Kontakt: die Karte ----------
   Name, what she does, where she is, how to reach her - four lines under a
   gold rule, centred like the rest. Not a table with labels down the side:
   nobody needs to be told that "Düsseldorf" is a place. */
.about__actions--auf { margin-top: clamp(1.6rem, 4vh, 2.4rem); }

.karte {
	max-width: 34ch;
	margin-inline: auto;
}

.about .karte__name {
	font-size: var(--t-h2);
	color: var(--ink);
	max-width: none;
	margin: 0 auto 0.7rem;
}

.about .karte__rolle,
.about .karte__zeile {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: none;
	margin: 0 auto;
}

.about .karte__zeile { margin-top: 1.5rem; }

.about .karte__zeile a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	transition: color 0.25s ease, border-color 0.25s ease;
}
.about .karte__zeile a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Die Praxis: die Räume ----------
   A room is shown, not described. Four photographs, centred in the same
   column the text uses: the wide view of the room, then the two upright ones
   side by side, then the corner. Each frame holds its shape whatever the
   file's own proportions are, so the group stays even. */
.raeume {
	display: grid;
	gap: clamp(0.7rem, 1.6vw, 1.1rem);
	max-width: 56rem;
	/* The card below is part of the same grid as far as the eye is concerned,
	   so the space to it is the space between the photographs and not the gap
	   between two sections. */
	margin: 0 auto clamp(0.7rem, 1.6vw, 1.1rem);
}

.raeume figure {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--forest);
}

.raeume img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.raeume__weit { aspect-ratio: 3 / 2; }

.raeume__paar {
	display: grid;
	gap: clamp(0.7rem, 1.6vw, 1.1rem);
}
.raeume__paar figure { aspect-ratio: 2 / 3; }

@media (min-width: 640px) {
	.raeume__paar { grid-template-columns: 1fr 1fr; }
}

/* An empty frame would be a grey box on the page. Until a photograph is
   there, the frame takes no room at all. */
.raeume figure:not(:has(img)) { display: none; }

.about .anfahrt__adresse {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.6;
	color: var(--ink);
	max-width: none;
	margin: 0 auto 1.6rem;
}

/* =========================================================================
   Handy
   =========================================================================
   Everything below this line is for narrow screens only. The desktop is not
   touched by any of it.

   Three things were wrong. The type scale bottoms out at sizes chosen for a
   wide screen, so on a phone the headings arrived at nearly thirty pixels and
   filled the width. The edge was 20px, which is not a margin, it is a
   rounding error. And the buttons ran the full width of the screen, which is
   what an app does, not a page.
   ========================================================================= */
@media (max-width: 899px) {
	:root {
		/* One step down across the board. These are the floors of the same
		   clamps the desktop uses, so nothing above 900px changes. */
		--t-display: 1.62rem;
		--t-h2: 1.19rem;
		--t-h3: 1.03rem;
		--t-lead: 1.03rem;
		/* Running text stays at 16px. It is already at the floor of what is
		   comfortable to read, and it was never the thing that looked big. */

		/* The bar is shorter here - no navigation, smaller logo. */
		--mast-h: 4.5rem;

		/* Room to breathe at the sides. */
		--edge: 1.6rem;         /* was 1.25rem */
		--gap: clamp(3rem, 7vh, 4.5rem);
	}

	/* No scrollbar on a phone, so no gutter to reserve - it only took two
	   pixels off the width. The reservation exists for the desktop lock. */
	html { scrollbar-gutter: auto; }

	/* The cover's line has its own scale, and its floor was larger than the
	   page's own h1. */
	.intro__title { font-size: 1.89rem; }

	/* A button is as wide as its words, not as wide as the screen. */
	.btn {
		padding: 0.95rem 1.6rem;
		font-size: 0.72rem;
		letter-spacing: 0.12em;
	}
	.about__actions,
	.deck__actions { justify-content: center; }

	/* The masthead keeps out of the way on a phone: it has no bar, so the
	   background does not change colour under it as you scroll. The type is
	   only the mark, the booking word and the burger, all of which carry
	   their own contrast. */
	.mast { background: transparent; }

	/* The opening screen sat in its top two thirds and left the bottom one
	   empty: the mark is drawn high on the canvas, and the words were
	   centred under it. Hung from the foot instead, mark and words together
	   fill the screen. */
	.stage__sticky {
		justify-content: flex-end;
		padding-bottom: 16vh;
	}
}

/* ---------- Handy: "Wie ich mit dir arbeite" ----------
   On a phone the beats lost their inset entirely - the panel had vertical
   padding only and the beat's own width rule was switched off - so her name,
   the quote and the note ran edge to edge and stayed left-aligned from the
   two-column desktop layout. */
@media (max-width: 899px) {
	.meet__stick { padding-inline: var(--edge); }
	.meet__beat { width: 100%; }
	.meet__beat--person { text-align: center; }
	.meet__body { text-align: center; }
	.meet__role { border-bottom: 0; padding-bottom: 0; margin-bottom: 1rem; }
	.meet__quote,
	.meet__note {
		max-width: 34ch;
		margin-inline: auto;
	}

	/* Her photograph is a cut-out on a transparent ground, so the star
	   field behind the page shone straight through the empty half of the
	   frame and looked as though the stars were crawling over her. A soft
	   pool of the page colour behind it closes that gap without drawing a
	   box around her. */
	.meet__figure {
		position: relative;
		isolation: isolate;
	}
	.meet__figure::before {
		content: "";
		position: absolute;
		inset: -6% -4%;
		z-index: -1;
		background: radial-gradient(60% 55% at 50% 55%,
			var(--paper) 0%, var(--paper) 58%, rgba(7, 23, 20, 0) 100%);
	}
}

/* ---------- Seite nicht gefunden ----------
   The way back, as a row of words rather than a list: seven short links wrap
   into two or three lines and read as one sentence of places. */
.verirrt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.4rem;
	max-width: 32rem;
	margin: 0 auto;
}

.verirrt a {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
	padding: 0.4rem 0;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.verirrt a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Fußzeile: die Anfahrt ----------
   The map loads with the page, on the client's decision - so Google is
   contacted on every page a visitor scrolls to the bottom of, and the privacy
   policy has to say so.

   No caption under it: the address stands in the first column of the same
   footer, an arm's length to the left, and Google prints its own attribution
   inside the frame. */
.anfahrt iframe {
	background: var(--forest-deep);
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 8px;
}

/* Four columns on a wide screen, so the map sits on the right where it was
   asked for. Below that the footer keeps its two-column arrangement and the
   map takes the full width under it. */
@media (min-width: 800px) {
	.foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
}
@media (max-width: 799px) {
	.anfahrt { grid-column: 1 / -1; }
	.anfahrt iframe { aspect-ratio: 16 / 9; }
}

/* ---------- Sitzungen: das Honorar ----------
   Quiet, and last. It was set as a figure in display type at the head of each
   block, which made the price the first thing on the page - the wrong first
   thing when what is being offered is time and attention. Now it is one plain
   line in her own wording, after the text, with a hairline above it so it is
   still findable at a glance. */
.about .honorar {
	font-size: var(--t-body);
	color: var(--ink);
	max-width: none;
	margin: clamp(1.6rem, 4vh, 2.4rem) auto 0;
	padding-top: clamp(1.2rem, 3vh, 1.8rem);
	border-top: 1px solid var(--rule);
}

/* =========================================================================
   Sitzungen: two cards, and a scroll that unrolls
   =========================================================================
   She offers two different things. Printed one after the other, whoever came
   for the talking hour had to read past a hypnosis fee to reach it. Two cards
   side by side put the choice first; the one that is chosen unrolls below
   them, and only that one.

   The scroll is built from three pieces that move on their own clock:

     the rods    stretch out sideways from the middle          - 0.40s
     the sheet   unrolls downward from under the top rod       - 0.85s, +0.12s
     the writing arrives once there is paper to carry it       - 0.45s, +0.42s

   Which is the order the thing happens in when you open a real one, and the
   reason it reads as unrolling rather than as a box getting taller.
   ========================================================================= */
.wahl {
	--karte-b: min(27rem, 44vw);
	max-width: 58rem;
	margin: 0 auto;
}

/* One stage, and everything on it in the same cell: the pair of cards, and
   the two pages. A page therefore opens ON TOP of the cards and covers them
   rather than pushing them anywhere - the cards are the choice, the page is
   what you chose, and the two do not need to be on screen at once. The cell
   is as tall as whatever is open, so the block still grows and shrinks with
   the page instead of reserving room for it. */
.wahl__buehne {
	display: grid;
}
.wahl__buehne > * { grid-area: 1 / 1; }

/* Two cards lying on a table, the second a fifth of the way under the first.
   Not a row of tiles: the overlap is what says there is a second one and that
   it has to be picked up. Reaching for either lifts it clear of the other. */
.wahl__karten {
	display: flex;
	justify-content: center;
	align-items: stretch;
	/* Keeps its own height in the stage. Stretched to the cell it would grow
	   to the height of whatever page is open - unseen while the page covers
	   it, but visible as a stretch and a snap on the way back. */
	align-self: start;
	/* Room for the lift, so nothing is clipped as a card rises. */
	padding: 0.9rem 2.6rem;
}

/* A fifth, not a third. A third looked right as a shape and was wrong as a
   card: it reached past the margin and into the words, and the only way to
   keep them clear was to push them off their own centre. A fifth covers the
   card's empty edge and stops there. */
.wahl__karte + .wahl__karte { margin-left: calc(var(--karte-b) / -5); }

.wahl__karte {
	position: relative;
	isolation: isolate;
	width: var(--karte-b);
	min-height: clamp(12.5rem, 25vh, 16rem);
	display: grid;
	gap: 0.6rem;
	justify-items: center;
	align-content: center;
	text-align: center;
	padding: clamp(1.9rem, 3.6vw, 2.7rem) clamp(1.3rem, 2.6vw, 2.1rem);
	border: 1px solid var(--rule);
	border-radius: 16px;
	/* The same tone as the cards on Schwerpunkte, so a card is a card
	   wherever it turns up. Flat: a gradient on a card this size is the first
	   thing the eye finds, and this should be a surface, not an effect. The
	   shadow does the lifting. */
	background: var(--paper-warm);
	box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.9);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	color: inherit;
	transition:
		transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.35s ease,
		box-shadow 0.5s ease;
}

/* The fan. A degree of tilt each way is all it takes for two rectangles to
   stop reading as one shape. */
.wahl__karte:nth-child(1) { z-index: 2; transform: rotate(-1.2deg); }
.wahl__karte:nth-child(2) { z-index: 1; transform: rotate(1.2deg); }

/* Reached for: straightens, steps out from under the other one, and comes to
   the front - so the card being considered is always the whole card. */
.wahl__karte:hover,
.wahl__karte:focus-visible,
.wahl__karte.is-offen { z-index: 3; }

.wahl__karte:nth-child(1):hover,
.wahl__karte:nth-child(1):focus-visible,
.wahl__karte:nth-child(1).is-offen {
	transform: rotate(0deg) translate(-2.4rem, -0.55rem);
}
.wahl__karte:nth-child(2):hover,
.wahl__karte:nth-child(2):focus-visible,
.wahl__karte:nth-child(2).is-offen {
	transform: rotate(0deg) translate(2.4rem, -0.55rem);
}

.wahl__karte:hover,
.wahl__karte:focus-visible,
.wahl__karte.is-offen { box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.95); }

/* Both cards keep their writing in their own middle. It was carried into the
   visible strip of the card underneath for a while, which did keep it off the
   fold - but a centred card with its type sitting to one side reads as a
   mistake, not as a card that is partly covered. The overlap is set instead
   (see --karte-b and the margin above) so that it only ever eats into the
   card's margin, never into a word. */

/* On a phone there is no room to lay one over the other, and a card you have
   to slide out of the way would be a puzzle on a touch screen. */
@media (max-width: 760px) {
	.wahl { --karte-b: 100%; }
	.wahl__karten {
		flex-direction: column;
		gap: clamp(0.9rem, 3vw, 1.4rem);
		padding: 0;
	}
	.wahl__karte + .wahl__karte { margin-left: 0; }
	.wahl__karte,
	.wahl__karte:nth-child(1),
	.wahl__karte:nth-child(2),
	.wahl__karte:nth-child(1):hover,
	.wahl__karte:nth-child(2):hover,
	.wahl__karte:nth-child(1).is-offen,
	.wahl__karte:nth-child(2).is-offen,
	.wahl__karte:nth-child(2) > * { transform: none; }
	.wahl__karte { min-height: 0; }
}

/* Reached for: the edge draws itself, and that is all the colour does. No
   wash underneath any more - a gold glow rising out of the foot of a card was
   the one thing on this page that looked like it came from somewhere else -
   and no change of surface either, so the card holds the deck's own tone in
   every state. The movement and the shadow say it is being picked up. */
.wahl__karte:hover,
.wahl__karte:focus-visible,
.wahl__karte.is-offen {
	border-color: color-mix(in srgb, var(--ink-soft) 42%, transparent);
}

.wahl__titel {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "opsz" 96;
	font-size: clamp(1.3rem, 1.75vw, 1.62rem);
	line-height: 1.22;
	color: var(--ink);
	max-width: 15ch;
}

.wahl__kurz {
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 24ch;
}

.wahl__mehr {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.5rem;
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	transition: color 0.3s ease;
}
.wahl__karte:hover .wahl__mehr,
.wahl__karte.is-offen .wahl__mehr { color: var(--gold); }

/* The seal: a rolled scroll seen end-on. Two strokes that lie on top of one
   another while it is shut and part as it opens - the roll coming undone. */
.wahl__siegel {
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid currentColor;
	flex: none;
}
.wahl__siegel::before,
.wahl__siegel::after {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	height: 1px;
	top: 50%;
	background: currentColor;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.wahl__karte.is-offen .wahl__siegel::before { transform: translateY(-2.5px); }
.wahl__karte.is-offen .wahl__siegel::after { transform: translateY(2.5px); }

/* ---------- The page it opens ----------
   Not a scroll any more: a single sheet, the width of the block, that opens
   under the pair and carries the rest of what there is to say. The rods and
   the unrolling were a nice object and the wrong one - what a reader wants
   here is a page, and a page has no business performing.

   The height is on .seite__falte and on nothing else: one track that is only
   ever 0fr or 1fr, the same fold the Fragen page uses. The sheet inside
   settles the last hair of the way and the writing arrives after it, so the
   page reads as being laid down rather than as a box getting taller. */
.seite {
	visibility: hidden;
	/* Level with the cards, because it lies on them. */
	align-self: start;
	z-index: 5;
	transition: visibility 0s linear 0.9s;
}

.seite.is-offen {
	visibility: visible;
	transition: visibility 0s;
}

.seite__falte {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.seite.is-offen .seite__falte { grid-template-rows: 1fr; }

.seite__blatt {
	/* The clip that makes it an opening rather than a squeeze: the writing
	   inside keeps its own height and the sheet passes over it. */
	overflow: hidden;
	min-height: 0;
	border-radius: 18px;
	/* Flat, and opaque - it has cards underneath it to cover. The gold wash
	   that used to sit in the top corner is gone: this is a sheet of the
	   page's own material, not a lit panel. */
	background: color-mix(in srgb, var(--ink) 6%, var(--paper-warm));
	border: 1px solid var(--rule);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 1);
	transform: scale(0.985);
	transform-origin: top center;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.seite.is-offen .seite__blatt { transform: none; }

/* Roomy, the way the page it is modelled on is roomy: the type has to have
   somewhere to sit, or a full-width sheet is just a wide strip of text. */
.seite__innen {
	position: relative;
	padding: clamp(2.4rem, 5.5vw, 4rem) clamp(1.6rem, 5vw, 4rem);
	text-align: center;
	opacity: 0;
	transform: translateY(0.7rem);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.seite.is-offen .seite__innen {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease 0.34s, transform 0.55s ease 0.34s;
}

/* The way out. The page covers the cards it opened from, so there has to be
   one, and it has to be where a reader looks for it. */
.seite__zu {
	position: absolute;
	top: clamp(0.9rem, 2vw, 1.4rem);
	right: clamp(0.9rem, 2vw, 1.4rem);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.7rem;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
	transition: color 0.3s ease;
}
.seite__zu:hover,
.seite__zu:focus-visible { color: var(--ink); }

.seite__kreuz {
	position: relative;
	width: 13px;
	height: 13px;
	flex: none;
}
.seite__kreuz::before,
.seite__kreuz::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: currentColor;
}
.seite__kreuz::before { transform: rotate(45deg); }
.seite__kreuz::after { transform: rotate(-45deg); }

/* On a narrow screen the word would crowd the corner; the cross alone is
   plain enough, and the button keeps its label for screen readers. */
@media (max-width: 560px) {
	.seite__zuWort {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.about .seite__titel {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "opsz" 96;
	font-size: clamp(1.45rem, 2.1vw, 1.9rem);
	line-height: 1.22;
	color: var(--ink);
	max-width: none;
	margin: 0 auto clamp(1.1rem, 2.8vh, 1.6rem);
}

.about .seite__innen p {
	font-size: var(--t-lead);
	line-height: 1.62;
	max-width: 52ch;
	margin: 0 auto 1rem;
}
.about .seite__innen p:last-child { margin-bottom: 0; }

/* The fee is the last line and nothing more. It had a gold rule over it and
   gold type, which framed the number and made the page about the price - and
   the price is the least of what is being offered here. Same colour and same
   size as the sentences above it, one plain line at the end. */
.about .seite__innen .honorar {
	font-size: var(--t-lead);
	color: var(--ink-soft);
	margin-top: clamp(1.6rem, 3.6vh, 2.2rem);
	padding-top: 0;
	border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	/* Nothing opens; it is simply there or it is not. */
	.seite,
	.seite.is-offen,
	.seite__falte,
	.seite__blatt,
	.seite__innen,
	.wahl__karte,
	.wahl__karte > *,
	.wahl__siegel::before,
	.wahl__siegel::after { transition: none; }
}

/* ---------- Der Auftakt ----------
   The name, once, on the way in. It wipes open from the left, stands for a
   third of a second, and the whole ground lifts off it.

   The animation is entirely in the stylesheet: whatever happens to the
   scripts, the cover leaves on its own - and it needs no script to arrive
   either, so it is there on the very first painted frame. ui.js only shortens
   it for a reader who has already started scrolling.

   Every time the home page is opened. It was once per visit for a while,
   held by a flag in the session; the page is the front door and it opens the
   same way each time. */
.auftakt {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	background: var(--paper);
	/* It never takes a click: the reader can scroll straight through it, and
	   at the end it is a sheet of nothing that must not be in the way. */
	pointer-events: none;
	/* The delay is the hold; the whole thing comes to 2.2s.
	     140 -  900   the name writes itself
	     900 - 1580   it stands
	    1580 - 2200   the sheet leaves upward
	   It used to fade out on the spot. Drawn off the top instead it reads as
	   a curtain going up rather than as a layer being switched off, and the
	   page underneath is uncovered rather than revealed. */
	animation: auftakt-weg 620ms cubic-bezier(0.55, 0, 0.9, 0.35) 1580ms forwards;
}

.auftakt__wort {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 144;
	font-size: clamp(2rem, 5.2vw, 4.2rem);
	letter-spacing: -0.015em;
	line-height: 1;
	color: var(--ink);
	/* Wiped open from the left. Not a fade: a fade arrives everywhere at once
	   and has no direction, and the whole point of this is that the name is
	   written across the screen.

	   The negative top and bottom are not decoration. At line-height 1 the box
	   is exactly the font size, while the letters stand 8px taller and hang
	   8px lower than that - so an inset of 0 cut the descender clean off the
	   y and the p, and the tops off the H. This clips sideways and only
	   sideways. */
	clip-path: inset(-0.2em 100% -0.2em 0%);
	animation: auftakt-schrift 760ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;
}

/* Skipped: the reader moved, so the cover has nothing left to say. */
.hi-weiter .auftakt {
	animation: none;
	transform: translateY(-100%);
	transition: transform 320ms cubic-bezier(0.55, 0, 0.9, 0.35);
}
.hi-weiter .auftakt__wort {
	animation: none;
	clip-path: inset(-0.2em 0% -0.2em 0%);
}

@keyframes auftakt-schrift {
	to { clip-path: inset(-0.2em 0% -0.2em 0%); }
}

@keyframes auftakt-weg {
	to { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	/* No entrance at all. A full screen of brand is motion whichever way it
	   is dressed, and this reader asked for none. */
	.auftakt { display: none; }
}

/* ---------- Die Sternschnuppe ----------
   The thread the pointer draws behind it. Over everything, including the bar,
   so the line is never cut in half - and deaf to the mouse, so nothing on the
   page becomes harder to click because of it. The canvas is made by ui.js and
   only on a machine that has a pointer to follow. */
.funke {
	position: fixed;
	inset: 0;
	/* Ein <canvas> ist ein ersetztes Element: Bei fixer Position ohne
	   Breitenangabe nimmt es NICHT die Fensterbreite, sondern seine eigene
	   Pixelbreite als CSS-Groesse - auf einem Retina-Bildschirm also das
	   Doppelte. Der Faden erschien dort im doppelten Abstand zur Maus. */
	width: 100%;
	height: 100%;
	z-index: 60;
	pointer-events: none;
}

/* =========================================================================
   Praxis: Lage und Anfahrt
   =========================================================================
   One card the width of the photographs above it, so the foot of the page
   sits on the same measure as its head. Words on the left, the quarter on the
   right, a single hairline between them - one card with two halves, not two
   things placed next to each other.

   The map is drawn, not fetched. Nothing leaves for Google until somebody
   presses it, which is the same bargain the films on this site make: a reader
   who never asks for a map is never reported to anyone for having read the
   page. What is drawn is a schematic and looks like one - a few streets, the
   river, the block the practice stands on. Anything more faithful would be a
   picture of a map pretending to be the map.
   ========================================================================= */
.lage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	max-width: 56rem;
	margin: 0 auto;
	border: 1px solid var(--rule);
	border-radius: 16px;
	background: var(--paper-warm);
	overflow: hidden;
	text-align: left;
}

.lage__wort {
	padding: clamp(1.6rem, 3.4vw, 2.6rem);
	border-right: 1px solid var(--rule);
}

.about .lage__wort h2 {
	font-size: clamp(1.35rem, 1.9vw, 1.7rem);
	line-height: 1.22;
	max-width: none;
	margin: 0 0 1rem;
}

.about .lage__wort p {
	text-align: left;
	font-size: var(--t-body);
	line-height: 1.6;
	max-width: none;
	margin: 0 0 0.9rem;
}
.about .lage__wort p:last-child { margin-bottom: 0; }

.about .lage__wort .anfahrt__adresse {
	font-size: var(--t-lead);
	line-height: 1.45;
	color: var(--ink);
	margin: 0 0 1.2rem;
}

/* ---------- The quarter ---------- */
.lage__karte {
	position: relative;
	min-height: clamp(15rem, 26vw, 20rem);
	display: grid;
}

/* Once it has been asked for. */
.lage__karte iframe {
	width: 100%;
	height: 100%;
	min-height: clamp(15rem, 26vw, 20rem);
	border: 0;
	display: block;
}

@media (max-width: 760px) {
	.lage {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.lage__wort {
		border-right: 0;
		border-bottom: 1px solid var(--rule);
	}
	.about .lage__wort h2,
	.about .lage__wort p { text-align: center; }
	.about .lage__wort p { max-width: 42ch; margin-inline: auto; }
}

/* ---------- Der Hinweis ----------
   Not an offer but a condition, and the one thing on the page nobody should
   be able to skip. Held apart by a hairline frame rather than by shouting. */
.hinweis {
	max-width: 42ch;
	/* Well clear of what is above it. On the Sitzungen page the cards, an
	   unrolled scroll and this box all arrived in one screenful, which read
	   as one dense block instead of three separate things. */
	margin: clamp(6rem, 16vh, 10rem) auto 0;
	padding: clamp(1.4rem, 3.5vh, 2rem) clamp(1.4rem, 4vw, 2.2rem);
	border: 1px solid var(--rule);
	border-radius: 10px;
	text-align: center;
}

.about .hinweis__wort {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
	max-width: none;
	margin: 0 auto 0.9rem;
}

.about .hinweis p:not(.hinweis__wort) {
	font-size: var(--t-lead);
	line-height: 1.6;
	max-width: none;
	margin: 0 auto;
}

/* ---------- Fragen ----------
   Nine answers, folded. Laid out flat the page would be four screens of text
   and the one question somebody came for would be buried in it. Same fold as
   the cards on Schwerpunkte: a gold cross that turns into a dash, and rows
   that open by growing from nothing rather than by measuring in script. */
.fragen {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 44rem;
}

.frage {
	border-top: 1px solid var(--rule);
}
.frage:last-child { border-bottom: 1px solid var(--rule); }

.about .frage__kopf {
	font-size: inherit;
	margin: 0;
	max-width: none;
}

/* The row lights from the left when you come near it: a gold wash that
   draws itself across, and a gold hairline that runs along the foot with it.
   Same device the call to action on the home page uses - drawn, not switched
   on.

   appearance and the tap highlight are killed explicitly. A bare <button> is
   at the mercy of whatever the browser or a plug-in thinks a button should
   look like, and something was painting these pink. */
.frage__knopf {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 0.8rem minmax(0, 1fr) 0.8rem;
	align-items: center;
	gap: 1rem;
	width: 100%;
	/* Tighter than the page scale on purpose. Nine folds stacked on one screen
	   is a list, not nine headlines: at the shared h2 size with the shared
	   padding the block ran the whole height of the window and read heavier
	   than anything it was asking about. This size and this row height are
	   used nowhere else. */
	padding: clamp(0.72rem, 1.7vh, 0.95rem) 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	/* Clicking a fold must not start a text selection - that is what put a
	   band of the system highlight colour across the row. */
	user-select: none;
	-webkit-user-select: none;
	/* Centred like everything else. The plus was a flex item at the end, so
	   the question sat left of centre with the mark alone on the right - the
	   block read as if it had more air on one side than the other. Taking
	   the mark out of the flow puts the words on the middle line. */
	justify-content: center;
	text-align: center;
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: clamp(1.05rem, 1.4vw, 1.32rem);
	line-height: 1.25;
	color: var(--ink-soft);
	transition: color 0.25s ease;
}
.frage__knopf:hover,
.frage__knopf:focus-visible,
.frage__knopf[aria-expanded="true"] { color: var(--ink); }

/* The wash. Reaches a little past the text on both sides so the row lights,
   not the words. */
.frage__knopf::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Transparent at both ends: a filled rectangle put two hard vertical
	   edges across the row and a corner at each end, which read as a box
	   dropped on the page rather than as light moving over it. */
	background: linear-gradient(90deg,
		rgba(201, 152, 46, 0) 0%,
		rgba(201, 152, 46, 0.14) 14%,
		rgba(201, 152, 46, 0.03) 78%,
		rgba(201, 152, 46, 0) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* And the line under it, drawn the same way and at the same speed. It sits
   one pixel low, exactly on the divider of the row below, so the gold
   replaces that line instead of doubling it. */
.frage__knopf::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(201, 152, 46, 0) 0%, var(--gold) 12%,
		var(--gold) 82%, rgba(201, 152, 46, 0) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.frage__knopf:hover::before,
.frage__knopf:focus-visible::before,
.frage__knopf[aria-expanded="true"]::before,
.frage__knopf:hover::after,
.frage__knopf:focus-visible::after,
.frage__knopf[aria-expanded="true"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.frage__knopf::before,
	.frage__knopf::after { transition: none; }
}

.frage__wort {
	grid-column: 2;
	min-width: 0;
	overflow-wrap: break-word;
}

.frage__mark {
	position: relative;
	grid-column: 3;
	width: 0.8rem;
	height: 0.8rem;
}
.frage__mark::before,
.frage__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--gold);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.frage__mark::after { transform: rotate(90deg); }
.frage__knopf[aria-expanded="true"] .frage__mark::after { transform: rotate(0deg); }

.frage__antwort {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.5s;
}
.frage__inner {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.35s ease 0.1s;
}
.frage.is-offen .frage__antwort {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.frage.is-offen .frage__inner { opacity: 1; }

/* The answers are the one place on the site with running prose that has to be
   read closely, so they are set smaller and left aligned - a centred column
   of two hundred words is a wall. */
.about .frage__inner > * {
	max-width: none;
	text-align: center;
}
.about .frage__inner p {
	font-size: var(--t-lead);
	line-height: 1.65;
	margin: 0 0 1rem;
}
.about .frage__inner p:first-child { margin-top: 0.2rem; }
.about .frage__inner > :last-child { margin-bottom: clamp(1.4rem, 3.5vh, 2rem); }

.about .frage__inner ul {
	margin: 0 auto 1rem;
	padding-left: 1.1rem;
	list-style: none;
	max-width: 34ch;
	text-align: left;
}
.about .frage__inner li {
	position: relative;
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--ink-soft);
	margin-bottom: 0.6rem;
}
.about .frage__inner li::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	top: 0.72em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
}
.about .frage__inner strong { color: var(--ink); font-weight: 500; }

/* A run-in heading inside an answer: the same small capitals the site uses
   for labels, so a section inside a fold does not need another size. */
.about .frage__zwischen {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 1.6rem 0 0.7rem;
}

.about .frage__zitat {
	margin: 0 auto 1.2rem;
	max-width: 34ch;
	padding-left: 1.2rem;
	border-left: 1px solid var(--gold);
	text-align: left;
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.6;
	color: var(--ink);
}

/* =========================================================================
   Einwilligung: die Leiste und die Gates
   =========================================================================
   Eine Leiste am unteren Rand, kein Overlay. Rechtlich gefordert ist, dass
   vor der Entscheidung nichts geladen wird - nicht, dass die Entscheidung
   erzwungen wird. Ein blockierender Vorhang waere hier in der Naehe einer
   Cookie-Wall, und § 5 DDG verlangt, dass Impressum und Datenschutz staendig
   erreichbar bleiben. Ohne Modal gibt es zugleich keine Fokusfalle, kein
   inert, keine Escape-Falle.

   --gold kommt hier nirgends vor. Gold ist auf dieser Website die Farbe des
   Handlungsaufrufs; ein goldenes "Akzeptieren" neben einem blassen
   "Ablehnen" waere genau das Nudging, das die Aufsichtsbehoerden und das
   OLG Koeln (6 U 80/23) beanstanden.
   ========================================================================= */

/* hidden muss auch verstecken.
   Das Elterntheme gibt in reset.css jedem <button> ein display, und eine
   Autorenregel schlaegt die Browserregel [hidden]{display:none}. Ohne das
   hier stuende "Auswahl speichern" dauerhaft in der Knopfreihe, obwohl es
   erst mit der Einzelauswahl erscheinen soll - und der Knopf "Entscheidung
   ändern" stuende an jedem Gate, auch bevor irgendetwas abgelehnt wurde.
   Global gesetzt, weil jede kuenftige Stelle denselben Fehler haette. */
[hidden] { display: none !important; }

/* Ohne JavaScript gaebe es niemanden, der sie wieder schliesst. */
.zust { display: none; }
html.hi-js .zust:not([hidden]) { display: block; }

/* Wer entschieden hat, sieht sie nie wieder aufblitzen - auch nicht fuer
   einen Frame, und auch nicht nach "Alle ablehnen". */
html[data-consent-set] .zust { display: none; }

/* Das Menue liegt hoeher; die Leiste kommt danach unveraendert zurueck. */
.hi-drawer-offen .zust { display: none; }

.zust {
	position: fixed;
	/* Eine Karte in der Ecke, keine Bande ueber die ganze Breite. Sie
	   verdeckt weniger, wirkt weniger nach Behoerde - und die Seite dahinter
	   bleibt sichtbar, was ohnehin die Bedingung war. */
	right: clamp(0.8rem, 2vw, 1.5rem);
	bottom: clamp(0.8rem, 2vw, 1.5rem);
	left: auto;
	width: min(22.5rem, calc(100vw - 1.6rem));
	z-index: 38;
	background: var(--forest);
	border: 1px solid var(--rule);
	border-radius: 12px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
	color: var(--on-forest-soft);
	font-family: var(--sans);
	font-size: 0.88rem;
	line-height: 1.55;
	text-align: left;
	overflow: hidden;
}

.zust__inner {
	max-height: 60svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem 1.1rem 0;
	max-width: none;
	margin-inline: 0;
}

.zust__titel {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "SOFT" 30, "opsz" 96;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--on-forest);
	margin: 0 0 0.5rem;
}
.zust__titel:focus-visible { outline: 2px solid var(--on-forest); outline-offset: 3px; }

.zust__text { margin: 0 0 0.7rem; max-width: none; }
.zust__text a { color: var(--on-forest); }
.zust__text--neun { color: var(--on-forest); }

.zust__klein { font-size: 0.8rem; margin: 0 0 0.6rem; max-width: none; }
.zust__warnung { color: var(--on-forest); }

.zust__mehr { margin: 0 0 0.7rem; }
.zust__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--on-forest-soft);
	border-radius: 6px;
	color: var(--on-forest);
	font-family: var(--sans);
	font-size: 0.85rem;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Das Dreieck weg - der Knopf traegt seine Bedeutung im Wort. */
.zust__summary::-webkit-details-marker { display: none; }
.zust__summary::marker { content: ""; }
.zust__summary:hover { border-color: var(--on-forest); }
.zust__summary:focus-visible { outline: 2px solid var(--on-forest); outline-offset: 2px; }

.zust__feld {
	border: 1px solid var(--rule);
	border-radius: 8px;
	margin: 0.7rem 0;
	padding: 0.8rem;
}
.zust__feld legend { padding-inline: 0.35rem; color: var(--on-forest); font-size: 0.82rem; }

.zust__kat + .zust__kat {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rule);
}

.zust__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--on-forest);
	cursor: pointer;
	min-height: 32px;
}
.zust__label input {
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: var(--on-forest);
	cursor: pointer;
}
.zust__label input:focus-visible { outline: 2px solid var(--on-forest); outline-offset: 2px; }

.zust__erklaerung,
.zust__dienst { margin: 0.4rem 0 0; font-size: 0.79rem; line-height: 1.5; max-width: none; }
.zust__dienst { color: var(--on-forest-faint); }
.zust__dienst a { color: var(--on-forest-soft); }
.zust__erklaerung code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

/* Die Knopfreihe: "Einstellungen" oben ueber die volle Breite, darunter die
   beiden Sammelknoepfe nebeneinander - wie in der Vorlage. */
.zust__aktionen {
	position: sticky;
	bottom: 0;
	background: var(--forest);
	border-top: 1px solid var(--rule);
	padding: 0.85rem 1.1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	max-width: none;
	margin-inline: 0;
}
.zust__btn--breit { grid-column: 1 / -1; }

.zust__btn {
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	font-family: var(--sans);
	font-size: 0.85rem;
	letter-spacing: 0;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--ink);
	color: var(--paper-warm);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.zust__btn:focus-visible { outline: 2px solid var(--on-forest); outline-offset: 2px; }

/* Auf dem Telefon ueber die volle Breite unten, in Daumenreichweite. */
@media (max-width: 560px) {
	.zust {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		border-radius: 12px 12px 0 0;
	}
}

body {
	padding-bottom: 0;
	scroll-padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.zust { transition: none; animation: none; }
}

/* =========================================================================
   Die Gates am Inhalt
   ========================================================================= */
.gate {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	text-align: center;
	margin: 0;
}

.gate__vorschau { margin: 0; width: 100%; }
.gate__vorschau img,
.gate__vorschau svg { display: block; width: 100%; height: auto; }

.about .gate__hinweis,
.gate__hinweis {
	font-family: var(--sans);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 60ch;
	margin: 0 auto;
	text-align: left;
}

.gate__merken {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-family: var(--sans);
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 60ch;
	text-align: left;
	cursor: pointer;
	min-height: 32px;
}
.gate__merken input {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 0.15rem;
	accent-color: var(--gold);
	cursor: pointer;
}

.about .gate__abgelehnt,
.gate__abgelehnt {
	font-family: var(--sans);
	font-size: 0.9rem;
	color: var(--ink-soft);
	max-width: none;
	margin: 0;
}

.gate__aendern,
.gate__laden {
	min-height: 44px;
	padding: 0.65rem 1.1rem;
	font-family: var(--sans);
	font-size: 0.86rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: 4px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.3s ease;
}
.gate__aendern:hover,
.gate__laden:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gate__aendern:focus-visible,
.gate__laden:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Der Rahmen um den nachgeladenen Inhalt. Er nimmt den Fokus auf, den der
   verschwundene Knopf hinterlaesst - sonst faende sich ein Tastaturnutzer am
   Dokumentanfang wieder, und beim Video liefe schon der Ton. */
.gate__rahmen {
	width: 100%;
	display: block;
}
.gate__rahmen:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gate__rahmen iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Der Videorahmen nimmt die Box der Vorschau, die er ersetzt: 300 Pixel
   breit, mittig, Hochformat. Ohne das bekommt der iframe nur die Breite des
   Elternelements und die Standardhoehe von 150 Pixeln - der Player war ein
   Streifen quer ueber die Seite. */
.gate__rahmen[data-fuer="video"] {
	max-width: 300px;
	margin-inline: auto;
}
.gate__rahmen[data-fuer="video"] iframe {
	aspect-ratio: 9 / 16;
	border: 1px solid var(--rule);
	border-radius: 2px;
}

/* Ohne JavaScript kann nichts nachgeladen werden - dann steht dort auch kein
   Knopf, der nichts tut. */
html:not(.hi-js) [data-gate-laden] { display: none; }
html.hi-js .gate__ohnejs { display: none; }
.about .gate__ohnejs,
.gate__ohnejs {
	font-family: var(--sans);
	font-size: 0.86rem;
	color: var(--ink-faint);
	max-width: 60ch;
	margin: 0 auto;
}

/* Der Balken unter dem Video-Standbild. Deckend, nicht als Text auf dem Foto:
   ein Verlauf ueber einem unbekannten Bild garantiert die 4,5:1 aus WCAG
   1.4.3 nicht - und unlesbar waere ausgerechnet der Satz, der den Klick zur
   Einwilligung macht. */
.tube__label {
	display: block;
	background: var(--forest-deep);
	color: var(--on-forest);
	font-family: var(--sans);
	font-size: 0.86rem;
	line-height: 1.4;
	padding: 0.7rem 0.9rem;
	text-align: left;
}

/* ---------- Der Widerrufsknopf in der Fusszeile ----------
   Das Elterntheme gibt jedem <button> Rahmen, Radius und 1rem Schriftgrad.
   Woertlich uebernommen stuende hier ein gerahmter Kasten neben drei blassen
   Links - der Widerruf auffaelliger als Impressum und Datenschutz. */
.foot__links button {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: inherit;
	text-align: left;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	padding-block: 0.35rem;
	margin-block: -0.35rem;
}
.foot__links button:hover { border-bottom-color: currentColor; }
.foot__links button:focus-visible { outline: 2px solid var(--on-forest); outline-offset: 2px; }

/* ---------- Sprunglink und Vorleser-Texte ---------- */
.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.7rem 1.1rem;
	background: var(--ink);
	color: var(--paper-warm);
	font-family: var(--sans);
	font-size: var(--t-body);
}
.skip:focus {
	left: 0.5rem;
	top: 0.5rem;
}

.nurfuervorleser {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Der gezeichnete Stadtplan
   =========================================================================
   Steht an zwei Stellen: in der Fusszeile als Ersatz fuer die frueher dort
   automatisch ladende Google-Karte, und auf /praxis/ als Vorschau vor dem
   Einwilligungs-Gate. Eigenes Werk, deshalb ohne Lizenz-, Konto- oder
   Namensnennungsfrage - siehe parts/karte-plan.php.
   ========================================================================= */
.plan__zeichnung {
	display: block;
	width: 100%;
	height: 100%;
}

.plan__fluss { fill: color-mix(in srgb, var(--teal) 10%, transparent); }
.plan__ufer {
	fill: none;
	stroke: color-mix(in srgb, var(--teal) 40%, transparent);
	stroke-width: 1;
}
.plan__bloecke rect { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.plan__strassen path {
	fill: none;
	stroke: var(--rule);
	stroke-width: 1;
}
.plan__gasse {
	fill: none;
	stroke: color-mix(in srgb, var(--gold) 55%, transparent);
	stroke-width: 2;
	stroke-linecap: round;
}
.plan__punkt { fill: var(--gold); }
.plan__ring {
	fill: none;
	stroke: var(--gold);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: plan-puls 2.8s ease-out infinite;
}

@keyframes plan-puls {
	0%   { transform: scale(0.35); opacity: 0.9; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.plan__ring { animation: none; opacity: 0.5; }
}

/* In der Fusszeile: der Plan, darunter die Adresse als Text. */
.anfahrt__plan {
	margin: 0 0 0.7rem;
	border: 1px solid var(--forest-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--forest-deep);
}
.anfahrt__plan .plan__zeichnung {
	aspect-ratio: 4 / 3;
	height: auto;
}
.anfahrt__plan figcaption {
	padding: 0.55rem 0.7rem;
	border-top: 1px solid var(--forest-line);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--on-forest-soft);
}

/* Auf /praxis/ fuellt die Vorschau die rechte Haelfte der Karte. */
.lage__karte .gate { width: 100%; padding: clamp(1rem, 2.4vw, 1.6rem); }
.lage__karte .gate__vorschau {
	width: 100%;
	border: 1px solid var(--rule);
	border-radius: 8px;
	overflow: hidden;
	background: var(--paper-warm);
}
.lage__karte .gate__vorschau .plan__zeichnung {
	aspect-ratio: 4 / 3;
	height: auto;
}
.lage__karte .gate__rahmen iframe { min-height: clamp(15rem, 26vw, 20rem); }

/* Das Karten-Gate in der Fusszeile. Dieselbe Mechanik wie auf /praxis/, nur
   kleiner und ohne den langen Hinweistext - der steht dort, wo die Karte das
   Thema der Seite ist, und in der Datenschutzerklaerung. */
.gate--fuss {
	gap: 0.6rem;
	justify-items: stretch;
	text-align: left;
	margin-bottom: 0.7rem;
}
.gate--fuss .gate__vorschau {
	border: 1px solid var(--forest-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--forest-deep);
}
.gate--fuss .gate__vorschau .plan__zeichnung { aspect-ratio: 4 / 3; height: auto; }
.gate--fuss .gate__vorschau figcaption {
	padding: 0.5rem 0.65rem;
	border-top: 1px solid var(--forest-line);
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--on-forest-soft);
}
.gate--fuss .gate__laden,
.gate--fuss .gate__aendern {
	min-height: 38px;
	padding: 0.5rem 0.8rem;
	font-size: 0.78rem;
	color: var(--on-forest);
	border-color: var(--forest-line);
	justify-self: start;
}
.gate--fuss .gate__abgelehnt,
.gate--fuss .gate__ohnejs { color: var(--on-forest-faint); font-size: 0.8rem; }
.gate--fuss .gate__rahmen iframe { min-height: 12rem; border-radius: 8px; }