/* LSB LebensBusiness — landing page styles.
   Colours + type from Isabella's Adobe XD (dev spec, 28.7.2026).
   Colours are wired as variables because the client's colour corrections
   are still in progress — final values swap in one place. */

/* ============================================================= Tokens */
:root {
	/* Brand palette (XD) */
	--c-aubergine: #5C0F47;  /* hero/footer bg, dark cards, headings on light */
	--c-yellow:    #FFB91C;  /* main CTA (Aufnahmegespräch), accents */
	--c-orange:    #FF4500;  /* secondary CTA (Schnupperabend), Abschluss step */
	--c-cream:     #F8F1EA;  /* light section background */
	--c-peach:     #F2D8C2;  /* team placeholders / soft accent */
	--c-white:     #FFFFFF;
	--c-grey:      #707070;  /* muted text */
	--c-green:     #338D4F;  /* checkmarks in pricing */
	--c-red:       #AF0000;  /* excluded/annotation accents */
	--c-aubergine-hover: #7D1A61;  /* lifted aubergine for text hovers */

	/* Type — IvyMode is licence-TBD; Playfair Display is a temporary stand-in */
	--font-heading: 'IvyMode', 'Playfair Display', Georgia, serif;
	--font-body:    'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--container: 1280px;
	--gutter: 40px;
	/* XD content column: x138 → x1142 on the 1280 artboard (1004px wide).
	   138/1280 = 10.78vw keeps the inset proportional below the artboard width. */
	--gutter-inset: clamp(24px, 10.78vw, 138px);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--c-aubergine);
	background: var(--c-white);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

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

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

/* Narrower variant used by the content sections below the hero (XD: 1004px column). */
.container--inset { padding-inline: var(--gutter-inset); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================= Hero */
.hero {
	position: relative;
	color: var(--c-white);
	/* Isabella's watercolour texture (geliefert 30.7.2026). The flat aubergine
	   stays underneath as the fallback while the image loads. */
	background: var(--c-aubergine);
	background-image: url("../img/hero-hintergrund.jpg");
	background-size: cover;
	background-position: center;
	min-height: 100vh;
	display: flex;
	overflow: hidden;
}

.hero__inner {
	position: relative; width: 100%; min-height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
	padding-block: 110px 64px;
}

/* Logo pinned to the top-left corner of the full-bleed hero (not the centred container). */
.hero__brand { position: absolute; top: clamp(24px, 3vw, 40px); left: clamp(24px, 4vw, 48px); z-index: 2; display: inline-block; }
.hero__brand img { width: min(425px, 55vw); }

/* Main content indented + vertically centred, matching the XD composition. */
.hero__body { padding-left: clamp(0px, 24vw, 300px); }

.hero__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2.6rem, 6vw, 4.375rem);   /* 70px @ desktop */
	line-height: 1;
	margin: 0;
}

.hero__subtitle {
	color: var(--c-yellow);
	font-size: clamp(1.15rem, 2vw, 1.5625rem);  /* 25px */
	line-height: 1.16;
	margin: .7em 0 0;
}

.hero__lower {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(28px, 3vw, 40px);   /* XD: circle → text gap ≈ 33px */
	align-items: center;
	margin-top: clamp(40px, 7vh, 96px);
}

.hero__cta-circle {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center;
	width: 182px; height: 182px; flex: 0 0 auto;   /* XD: 182 × 182 */
	border-radius: 50%;
	background: var(--c-yellow); color: var(--c-aubergine);
	border: 1px solid var(--c-grey);               /* XD: 1px #707070 */
	text-decoration: none;
	font-family: var(--font-heading);              /* circle text — best guess IvyMode 18px; confirm */
	font-size: 18px; line-height: 1.3;
	padding: 22px;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .2s ease;
}
.hero__cta-circle:focus-visible { outline: 3px solid var(--c-white); outline-offset: 4px; }

/* white chevron pointing right — drawn as SVG to match the XD vector path (17×34, white stroke) */
.hero__cta-arrow {
	display: block; color: var(--c-white); margin-top: 10px;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.hero__brand img { transition: opacity .2s ease; }

.hero__claim {
	font-family: var(--font-heading); font-weight: 400;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);  /* XD: 30px */
	line-height: 1.47;                          /* XD: 30 / 44 */
	margin: 0 0 8px;
}
.hero__text { font-size: 16px; line-height: 1.19; margin: 0 0 14px; max-width: 368px; }  /* XD: 16 / 19, w368 */
.hero__facts {
	color: var(--c-yellow); font-size: 16px; line-height: 1.19; margin: 0;
	max-width: 404px; padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, .5);   /* vertical rule left of the facts (XD "Gruppe 18") */
}

@media (max-width: 860px) {
	.hero { min-height: auto; }
	.hero__inner { min-height: auto; justify-content: flex-start; padding-block: 88px 48px; }
	.hero__brand img { width: 240px; }
	.hero__body { padding-left: 0; }
	.hero__lower { grid-template-columns: 1fr; gap: 32px; justify-items: start; }
	.hero__cta-circle { width: 170px; height: 170px; font-size: 16px; }
}

/* ============================================================= Intro + Überblick
   XD Y-positions on the 1280 artboard (dev spec, 28.7.2026):
   headline 860 · body copy 870 · "Überblick" 1102 · cards 1177 · buttons 1410 · note 1464.
   Spacing below is expressed as the gaps between those anchors, so the whole
   block keeps its rhythm even though the hero is viewport-height rather than fixed. */
.intro {
	background: var(--c-white);
	/* Note ends y1483, the cream section starts y1579 (Rechteck 15) → 96px.
	   The 76px top is still measured off the full-page export (hero ends ~y784). */
	padding-block: 76px 96px;
}

/* The 1004px column splits into two 502px halves: headline left, body copy from x640. */
.intro__lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 99px;         /* body copy ends y1003 → "Überblick" y1102 */
}

.intro__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 40px; line-height: 70px;   /* XD: 40/70 */
	color: var(--c-aubergine);
	margin: 0;
	max-width: 463px;
}

.intro__text {
	font-size: 16px; line-height: 19px;   /* XD: 16/19, 7 lines = 133px */
	color: var(--c-aubergine);
	margin: 0;
	padding-top: 10px;                    /* XD: headline y860, body copy y870 */
	max-width: 408px;
}

.intro__overview-title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 40px; line-height: 70px;   /* XD: 40/70, centred on the artboard */
	color: var(--c-aubergine);
	text-align: center;
	margin: 0 0 5px;                      /* line box ends y1172 → cards y1177 */
}

/* ---------------------------------------------------- Überblick cards
   4 × 239px + 3 × 16px gap = 1004px, so equal columns reproduce the XD exactly. */
.overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none; margin: 0; padding: 0;
}

.overview__card {
	background: var(--c-aubergine);
	border-radius: 20px;                  /* XD: Rechteck 9 */
	padding: 27px;                        /* XD: card x138 → text x165, text box 185 wide */
	min-height: 190px;                    /* XD: 239 × 190 */
}

.overview__card-title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 */
	color: var(--c-peach);                /* XD: #F2D8C2 */
	margin: 0;
	width: 171px; max-width: 100%;        /* XD text box — narrower than the card, forces the designed 2-line break */
	min-height: 57px;                     /* XD box height; keeps all four card texts on one baseline */
}

.overview__card-text {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-white);
	margin: 7px 0 0;                      /* title box ends y1261 → text y1268 */
}

/* ============================================================= Buttons (XD)
   Both CTAs are fixed-width rectangles in the XD (they recur in the final
   "Berufen Sie sich." section), so the widths are taken literally rather than
   derived from padding. */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; border-radius: 20px;
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px;   /* XD: 16/24 */
	text-align: center; text-decoration: none; white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--c-aubergine); outline-offset: 3px; }

.btn--primary   { width: 359px; background: var(--c-yellow); color: var(--c-aubergine); }
.btn--secondary { width: 293px; background: var(--c-orange); color: var(--c-white); }

/* CTA row: yellow + 15px + orange, centred as a pair; the €55 note sits under the orange one. */
.cta-row {
	display: flex; justify-content: center; align-items: flex-start;
	gap: 15px;
}
.cta-row__group { display: flex; flex-direction: column; align-items: center; }
.cta-row__note {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-aubergine);
	text-align: center;
	margin: 6px 0 0;                      /* buttons end y1458 → note y1464 */
}

.intro .cta-row { margin-top: 43px; }     /* cards end y1367 → buttons y1410 */

/* ---------------------------------------------------- Responsive
   Only the phone artboard exists in the XD (single column, full-width cards and
   buttons); the tablet step below is an interpolation — replace once specced. */
@media (max-width: 1024px) {
	.overview { grid-template-columns: repeat(2, 1fr); }
	.overview__card-title { width: auto; }
}

@media (max-width: 860px) {
	.intro { padding-block: 56px 56px; }
	.intro__lead { grid-template-columns: 1fr; margin-bottom: 56px; }
	.intro__title { line-height: 1.15; max-width: none; margin-bottom: 16px; }
	.intro__text { padding-top: 0; max-width: none; }
	.intro__overview-title { line-height: 1.15; margin-bottom: 24px; }
}

@media (max-width: 620px) {
	.overview { grid-template-columns: 1fr; gap: 12px; }
	.overview__card { min-height: 0; }
	.overview__card-title { min-height: 0; }
	.overview__card-text { margin-top: 12px; }
	.cta-row { flex-direction: column; align-items: stretch; gap: 16px; }
	.cta-row__group { align-items: stretch; }
	.btn--primary, .btn--secondary { width: 100%; }
	.btn { white-space: normal; height: auto; min-height: 48px; padding: 12px 20px; }
}

/* ============================================================= Lehrgang (tabbed)
   XD: Rechteck 15 — full-bleed #F8F1EA, y1579 → y2997 (1418 tall).
   Anchors: bar 1635 · heading 1742 · intro 1809 · steps 1909 · semesters 2093 ·
   Ausbildungslinien 2688 · end 2997. The gaps below sum to exactly 1418. */
.lehrgang {
	background: var(--c-cream);
	padding-block: 56px 100px;
}

/* ---------------------------------------------------- Tab bar
   XD: Rechteck 16 — 1004 × 70, radius 40, white. The tabs are hand-placed in the
   XD (the label boxes have arbitrary sizes — two different labels are both w103,
   and the heights run 24/41/33 for identical single-line text), so the only
   trustworthy figure is each label's centre. Every tab is centred on its XD
   centre expressed as a % of the bar, which reproduces the row exactly. */
.tabs__bar {
	position: relative;
	height: 70px;
	background: var(--c-white);
	border-radius: 40px;
}

.tabs__tab {
	position: absolute; top: 11px;              /* (70 − 48) / 2 — bar and pill share a centre at y1670 */
	transform: translateX(-50%);
	display: flex; align-items: center;
	height: 48px; padding: 0 18px;
	border: 0; border-radius: 20px;             /* XD: Pfad 42, same radius as the CTA buttons */
	background: transparent; color: var(--c-aubergine);
	font-family: var(--font-body); font-weight: 400;
	font-size: 16px; line-height: 19px;         /* XD: 16/19 */
	white-space: nowrap; cursor: pointer;
	transition: background .15s ease;
}
.tabs__tab[aria-selected="true"] { background: var(--c-peach); }   /* XD: 170 × 48 #F2D8C2 */

/* Sliding pill. Once JS has measured the tabs it takes over the peach fill and
   the selected tab goes transparent, so the shape travels between tabs instead
   of jumping. Width has to animate too — the tabs are different sizes — and
   scaleX would distort the 20px radius, so width is transitioned directly.
   It is one small element, so that costs nothing here. */
.tabs__indicator {
	position: absolute; top: 11px; left: 0;
	width: 0; height: 48px;
	border-radius: 20px;
	background: var(--c-peach);
	pointer-events: none;
	display: none;
	transition: transform .32s cubic-bezier(.4, 0, .2, 1),
	            width .32s cubic-bezier(.4, 0, .2, 1);
}
.tabs__bar.has-indicator .tabs__indicator { display: block; }
.tabs__bar.has-indicator .tabs__tab[aria-selected="true"] { background: transparent; }

/* The incoming panel fades in over the same window as the slide, rather than
   waiting for it — gating content on the animation just feels slow. */
@keyframes lsb-panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.tabs__panel:not([hidden]) { animation: lsb-panel-in .32s cubic-bezier(.4, 0, .2, 1) both; }

/* XD label centres on the 1004 bar: 238 · 399.5 · 529.5 · 694 · 900 · 1068 */
.tabs__tab:nth-of-type(1) { left: 9.960%; }
.tabs__tab:nth-of-type(2) { left: 26.046%; }
.tabs__tab:nth-of-type(3) { left: 38.994%; }
.tabs__tab:nth-of-type(4) { left: 55.378%; }
.tabs__tab:nth-of-type(5) { left: 75.896%; }
.tabs__tab:nth-of-type(6) { left: 92.629%; }

.tabs__toggle { display: none; }              /* dropdown control — phone only */

.tabs__panel { padding-top: 37px; }           /* bar ends y1705 → heading y1742 */

.panel__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;         /* XD: 40/42 — tighter than the intro section's 40/70 */
	color: var(--c-aubergine);
	margin: 0 0 25px;                           /* heading line box ends y1784 → intro y1809 */
	max-width: 964px;
}

.panel__intro {
	font-size: 16px; line-height: 19px;         /* XD: 16/19, 3 lines = 57px */
	color: var(--c-aubergine);
	margin: 0; max-width: 942px;
}

/* ---------------------------------------------------- Six-step row
   XD Gruppe 28: x139 w980 h129. Six 129px circles + five 10.25px chevrons laid
   out space-between put chevron 1 at x283.5 and circle 2 at x309.2 — both exactly
   as specced, so the row needs no per-circle positioning. */
.steps {
	display: flex; align-items: center; justify-content: space-between;
	width: 97.61%;                              /* 980 of the 1004 column */
	margin-top: 43px;                           /* intro ends y1866 → circles y1909 */
}

.steps__item {
	flex: 0 0 13.163%;                          /* 129 of 980 */
	aspect-ratio: 1;
	display: flex; flex-direction: column; align-items: center;
	padding-top: 16px;                          /* circle top y1909 → number y1925 */
	border-radius: 50%;
	background: var(--c-yellow); color: var(--c-aubergine);
	text-align: center;
}
.steps__item--final { background: var(--c-orange); color: var(--c-white); }   /* XD: #FF4500 with #FFFFFF text */

.steps__num {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;         /* XD: 40/42 */
}
.steps__label {
	font-size: 16px; line-height: 19px;         /* XD: 16/19 */
	width: 77.52%;                              /* 100 of 129 — narrow enough to break "Praxis-/integration" as designed */
	margin-top: 15px;                           /* number line box ends y1967 → label y1982 */
}

.steps__sep { flex: 0 0 auto; color: var(--c-aubergine); }
.steps__sep svg { display: block; }

/* ---------------------------------------------------- Module list (tab 2)
   Its own artboard: 1280 × 3153, cream from y0. Modul I starts at y136, i.e. the
   tab bar's bottom plus the same 37px the first panel uses — so nothing above
   this changes. 136 + 13×100 + 55×19 + 12×48 + 96 = 3153, the artboard exactly. */
.module { margin-bottom: 48px; }
.module:last-child { margin-bottom: 0; }

/* The circle is centred on the wordmark rather than offset from the XD text box
   top: that box is h75 for a single 42px line, so its top sits well above the
   actual glyphs and anchoring to it dropped the circle too low. Centring also
   survives the switch from the Playfair stand-in to IvyMode unchanged. */
.module__head { display: flex; align-items: center; }

.module__label {
	flex: 0 0 124px;                      /* "Modul" at x137 → circle at x261 */
	min-width: 0;                         /* flex items default to min-width:auto — without this "Modul" pushes the circle right */
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;   /* XD: 40/42 */
	color: var(--c-aubergine);
}

.module__num {
	flex: 0 0 48px;
	min-width: 0;                         /* likewise: keeps VIII/XIII from stretching the circle into an ellipse */
	display: flex; align-items: center; justify-content: center;
	height: 48px;                         /* XD: Ellipse 4 — 48 × 48 #FFB91C */
	border-radius: 50%;
	background: var(--c-yellow);
	color: var(--c-aubergine);
	font-family: var(--font-heading); font-weight: 400;
	font-size: 25px; line-height: 42px;   /* XD: 25/42, centred */
}

.module__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 */
	color: var(--c-aubergine);
	margin: 12px 0 0;                     /* keeps the title at wordmark-top + 60 (XD y136 → y196) */
}

/* Meta line and body are one text box in the XD — the first line is the Bold run. */
.module__body {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-aubergine);
	margin: 16px 0 0;                     /* title line box ends y220 → body y236 */
	max-width: 934px;
}
.module__body strong { font-weight: 700; }

@media (max-width: 860px) {
	.module { margin-bottom: 32px; }
	.module__head { align-items: center; gap: 12px; }
	.module__label { flex: 0 1 auto; font-size: 30px; line-height: 34px; }
	.module__num { flex: 0 0 40px; height: 40px; margin-top: 0; font-size: 20px; }
}

/* ---------------------------------------------------- Aufnahmeprozess (tab 4)
   Own artboard: 1280 × 2086, cream from y0. Anchors: 152 · 235 · 341 · 482 ·
   579 · 606 · 782 · 871 · 1106 · 1170 · 1541 · 1611 · 1675 · 1736 · 1858 · 1922. */
.admission__h {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;   /* XD: 40/42 */
	color: var(--c-aubergine);
	margin: 0 0 41px;                     /* line box ends y194 → pill row y235 */
}
/* 40/42 heading → its body is a consistent 22px here; the gap above each one is
   hand-set, so the three are given explicitly. */
.admission__h--anrechnung { margin: 88px 0 22px; }
.admission__h--schnupper  { margin: 56px 0 22px; }
.admission__h--wissen     { margin: 49px 0 22px; }

/* Three aubergine pills with the step-row chevron between them. */
.wayline {
	display: flex; align-items: center;
	list-style: none; padding: 0;
	margin: 0 0 34px;                     /* pills end y307 → intro y341 */
}
.wayline__step {
	display: flex; align-items: center; justify-content: center;
	width: 194px; height: 72px; border-radius: 20px;   /* XD: Rechteck 38 */
	background: var(--c-aubergine); color: var(--c-peach);   /* label #F2D8C2 */
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px;   /* XD: 16/24, centred */
	text-align: center;
}
.wayline__sep {
	flex: 0 0 auto; margin-inline: 14.5px;   /* pill ends x332 → chevron x346.5 */
	color: var(--c-aubergine);
}
.wayline__sep svg { display: block; }

/* Numbered steps: circle on the left, text column beside it (not beneath). */
.admission__step { display: flex; align-items: flex-start; }
.admission__step + .admission__step { margin-top: 35px; }
.outcome__text + .admission__step { margin-top: 84px; }   /* intro ends y398 → step 1 y482 */

.admission__num {
	flex: 0 0 48px; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	height: 48px; margin-top: 5px;        /* heading box y482 → circle y487 */
	border-radius: 50%;
	background: var(--c-yellow); color: var(--c-aubergine);
	font-family: var(--font-heading); font-weight: 400;
	font-size: 25px; line-height: 42px;   /* XD: 25/42 */
}

.admission__col { flex: 1 1 auto; min-width: 0; margin-left: 14px; }   /* circle ends x186 → text x200 */

.admission__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 — the 25px is the numeral */
	color: var(--c-aubergine);
	margin: 0 0 13px;                     /* line box ends y506 → body y519 */
}

.admission__lead {
	font-size: 16px; line-height: 19px; font-weight: 700;   /* XD: Roboto Condensed Bold */
	color: var(--c-aubergine);
	margin: 22px 0 0;                     /* body ends y557 → y579 */
}

/* Bullet lists: 15px yellow dot at x202, text at x230, 28px pitch. */
.dotlist { list-style: none; margin: 8px 0 0; padding: 0; }   /* lead ends y598 → first item y606 */
.dotlist li {
	position: relative; padding-left: 28px;
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-aubergine);
	margin-bottom: 9px;                   /* 28px pitch − the 19px line */
}
.dotlist li:last-child { margin-bottom: 0; }
.dotlist li::before {
	content: ''; position: absolute; left: 0; top: 3px;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--c-yellow);          /* XD: Ellipse 5 — 15 × 15 #FFB91C */
}

/* The button sits at the panel's left edge (x136), not in the step's column. */
.admission__btn { margin-top: 45px; }
.admission__btn + .admission__step { margin-top: 41px; }

.admission__note {
	font-size: 12px; line-height: 14px;   /* XD: 12/14 */
	color: var(--c-aubergine);
	margin: 40px 0 0;                     /* list ends y1501 → note y1541 */
}

.admission__cta { margin-top: 23px; }    /* body ends y1713 → orange button y1736 */

@media (max-width: 860px) {
	.admission__h { font-size: 30px; line-height: 1.15; margin-bottom: 28px; }
	.admission__h--anrechnung,
	.admission__h--schnupper,
	.admission__h--wissen { margin-top: 56px; margin-bottom: 20px; }
	.wayline { flex-wrap: wrap; gap: 12px; }
	.wayline__step { width: auto; flex: 1 1 auto; padding-inline: 16px; }
	.wayline__sep { display: none; }
	.admission__col { margin-left: 12px; }
	.admission__btn { margin-top: 28px; }
}

/* ---------------------------------------------------- Abschluss & Perspektiven (tab 5)
   Own artboard: 1280 × 1634, cream from y0. Anchors: y152 · 223 · 323 · 516 ·
   757 · 903 · 1008 · 1386. Paragraphs inside a block are one XD text box with a
   blank line between them, hence the 19px (= one line) sibling margin. */
.outcome__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;   /* XD: 40/42 */
	color: var(--c-aubergine);
	margin: 0 0 29px;                     /* line box ends y194 → intro y223 */
}
.outcome__title--section { margin: 90px 0 18px; }   /* body ends y667 → "Ihre Perspektiven" y757 */
.outcome__title--cta     { margin: 74px 0 30px; }   /* body ends y1312 → y1386, then the buttons */

.outcome__sub {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 */
	color: var(--c-aubergine);
	margin: 42px 0 13px;                  /* body end → heading; heading line box → its body */
}
.outcome__sub--item { margin-top: 30px; }           /* the four Perspektiven blocks sit tighter (y903 → y1008) */
.outcome__title--section + .outcome__sub { margin-top: 0; }   /* let the title's 18px stand */

.outcome__text {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-aubergine);
	margin: 0; max-width: 957px;
}
.outcome__text strong { font-weight: 700; }         /* XD: Roboto Condensed Bold 16px */
.outcome__text + .outcome__text { margin-top: 19px; }

.cta-row--start { justify-content: flex-start; }

@media (max-width: 860px) {
	.outcome__title { font-size: 30px; line-height: 1.15; }
	.outcome__title--section { margin-top: 56px; }
	.outcome__title--cta { margin-top: 48px; }
}

/* ---------------------------------------------------- FAQ (tab 6)
   Own artboard: 1280 × 2734, cream from y0. Item rhythm from the dev panel:
   question 22/24 at y154 → 14px → answer 16/19 at y192 → 28px → 1px divider
   (Linie 1, x139 w954). Collapsible per Isabella's "FAQ einklappbar" comment;
   drawn expanded in the XD, so that is the starting state. */
.faq { max-width: 954px; }

.faq__item {
	position: relative;
	padding-bottom: 28px;                 /* answer ends y268 → divider y296 */
	border-bottom: 1px solid var(--c-aubergine);
}
.faq__item + .faq__item { padding-top: 30px; }   /* ⚠ only figure not read from the panel — see docs/PLAN.md */

.faq__q { margin: 0; }

.faq__toggle {
	display: block; width: 100%;
	padding: 0 60px 0 0;                  /* keeps long questions clear of the chevron */
	border: 0; background: none; cursor: pointer; text-align: left;
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 */
	color: var(--c-aubergine);
	transition: color .18s ease;
}

/* Animating to "auto" height isn't possible directly, so the answer lives in a
   grid track that goes 0fr → 1fr. That interpolates cleanly and needs no
   measured pixel height, so answers of any length open at the same speed. */
.faq__a-wrap {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	transition: grid-template-rows .28s ease, margin-top .28s ease;
}
.faq__item.is-open .faq__a-wrap {
	grid-template-rows: 1fr;
	margin-top: 14px;                     /* question line box ends y178 → answer y192 */
}

.faq__a {
	overflow: hidden; min-height: 0;
	max-width: 888px;
	/* A zero-height grid row still exposes its text to screen readers, which
	   would contradict aria-expanded. Hiding it after the animation keeps the
	   two in step without breaking the open transition. */
	visibility: hidden;
	transition: visibility 0s .28s;
}
.faq__item.is-open .faq__a { visibility: visible; transition: visibility 0s 0s; }

.faq__a p {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-aubergine);
	margin: 0;
}

/* XD: Pfad 56 — the step-row chevron rotated 270°, so 20.5 × 10.25 pointing up.
   Centred on the item, which means it tracks the question by itself once an
   item is collapsed and the answer is gone. */
.faq__chevron {
	position: absolute; top: 50%;
	transform: translateY(-50%);
	/* The glyph is only 20.5 × 10.25 — far too small to hit comfortably. The
	   padding grows the click target to ~48 × 38 without moving the glyph:
	   content-box keeps the SVG at its drawn size, and right: -6px puts its
	   visible right edge back on the XD's 8px inset. */
	box-sizing: content-box;
	width: 20.5px; height: 10.25px;
	padding: 14px; right: -6px;
	color: currentColor;
	transition: transform .2s ease;
}
.faq__item:not(.is-open) .faq__chevron { transform: translateY(-50%) rotate(180deg); }

.faq__toggle:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.faq__a-wrap, .faq__a, .faq__chevron { transition: none; }
}

@media (max-width: 860px) {
	.faq__toggle { font-size: 20px; line-height: 24px; padding-right: 44px; }
	.faq__chevron { right: -14px; }   /* glyph flush with the item's right edge */
}

/* ---------------------------------------------------- Semester list
   XD Gruppe 184: y2093 h486. Title→text is 38px; with 36px between items the
   five entries (1, 2, 2, 2, 1 body lines) end at y2579 — exactly h486. */
.semesters { margin-top: 55px; }                /* circles end y2038 → y2093 */
.semesters__item { margin-bottom: 36px; }
.semesters__item:last-child { margin-bottom: 0; }

.semesters__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;         /* XD: 22/24 */
	color: var(--c-aubergine);
	margin: 0 0 14px;                           /* 24 + 14 = the 38px title→text offset */
}
.semesters__text {
	font-size: 16px; line-height: 19px;         /* XD: 16/19 */
	color: var(--c-aubergine);
	margin: 0; max-width: 934px;
}

/* ---------------------------------------------------- Drei Ausbildungslinien
   XD Gruppe 37: x138 y2688 w986 h209 — heading plus three 306px columns with
   34px gutters, ending at x1124. That right edge is what makes the group 986
   rather than the 964 of the heading box, so the columns are inset from the
   content column and the widths are taken literally. */
.tracks { margin-top: 109px; }                  /* semesters end y2579 → y2688 */

.tracks__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 30px; line-height: 42px;         /* XD: 30/42 */
	color: var(--c-aubergine);
	margin: 0 0 15px;                           /* line box ends y2730 → column titles y2745 */
	max-width: 964px;
}

.tracks__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 98.207%;                             /* 986 of the 1004 column */
	column-gap: 3.4483%;                        /* 34 of 986 → columns land on 306px */
}

.tracks__item-title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;         /* XD: 22/24 */
	color: var(--c-aubergine);
	margin: 0 0 14px;                           /* title y2745 → text y2783 */
}
.tracks__text {
	font-size: 16px; line-height: 19px;         /* XD: 16/19, 6 lines = 114px → group ends y2897 */
	color: var(--c-aubergine);
	margin: 0;
}

/* ---------------------------------------------------- Lehrteam (tab 3)
   Own artboard: 1281 × 3326, cream from y0. Two profile blocks, then the
   Expert:innen-Team grid. Anchors: y152 · 736 · 1381 · 1450 · 1559 · 1991.
   Both profile text boxes hold their two paragraphs with a blank line between
   them, so the sibling margin is one 19px line — same as the Abschluss tab. */
.teacher {
	display: grid;
	grid-template-columns: 44.7211% minmax(0, 44.7211%);   /* 449 twice, of the 1004 column */
	column-gap: 5.2789%;                  /* 53: image ends x587 → text x640 */
	align-items: start;
}
.teacher + .teacher { margin-top: 92px; }   /* last bullet of profile 1 ends y644 → image2 y736 */

.teacher__figure {
	aspect-ratio: var(--teacher-ratio, 449 / 370);   /* per-tile: 449 × 370 and 449 × 376 */
	border-radius: 20px;                  /* XD: 20px on all four corners */
	overflow: hidden;
	background: var(--c-peach);           /* only visible behind the placeholder */
	display: flex; justify-content: center; align-items: flex-end;
}
.teacher__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teacher__figure .avatar { width: 56.125%; }   /* placeholder at the same 252px as the expert tiles */

.teacher__name {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;   /* XD: 40/42 IvyMode */
	color: var(--c-aubergine);
	margin: 0 0 18px;                     /* name line ends y194 → role y212 */
}
.teacher__role {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 IvyMode */
	color: var(--c-aubergine);
	margin: 0 0 19px;                     /* role (2 lines) ends y260 → body y279 */
}
.teacher__text {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	color: var(--c-aubergine);
	margin: 0;
}
.teacher__text + .teacher__text { margin-top: 19px; }

.teacher__lead {
	font-size: 16px; line-height: 19px; font-weight: 700;   /* XD: Roboto Condensed Bold */
	color: var(--c-aubergine);
	margin: 21px 0 0;                     /* body ends y469 → "Schwerpunkte" y490 */
}
/* This artboard runs the bullets on a 29px pitch, one more than the 28px in the
   Aufnahmeprozess panel — hence the local override of .dotlist's margin. */
.teacher__focus { margin-top: 10px; }     /* lead ends y509 → first item y519 */
.teacher__focus li { margin-bottom: 10px; max-width: 405px; }   /* 28px indent + the 377px XD box */
.teacher__focus li:last-child { margin-bottom: 0; }

/* --- Interdisziplinäres Expert:innen-Team.
   Heading and intro are centred on the artboard (x290 w700, x155 w971); the
   tiles use the full content column: 3 × 324 + 2 × 16 = 1004. */
.experts { margin-top: 105px; }           /* last bullet of profile 2 ends y1276 → heading y1381 */

.experts__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;   /* XD: 40/42 IvyMode, centred */
	color: var(--c-aubergine);
	text-align: center;
	margin: 0 auto 27px; max-width: 700px;   /* title line ends y1423 → intro y1450 */
}
.experts__intro {
	font-size: 16px; line-height: 19px;   /* XD: 16/19, 3 lines = 57px */
	color: var(--c-aubergine);
	text-align: center;
	margin: 0 auto; max-width: 971px;
}

.experts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 1.5936%;                  /* 16 of 1004 → tiles land on 324px */
	row-gap: 50px;                        /* role (2 lines) ends y1941 → next tile y1991 */
	margin-top: 52px;                     /* intro ends y1507 → first tile y1559 */
}

.expert__figure {
	aspect-ratio: 324 / 297;              /* XD: Rechteck 9 — 324 × 297 #F2D8C2 */
	border-radius: 20px;
	background: var(--c-peach);
	overflow: hidden;
	display: flex; justify-content: center; align-items: flex-end;
}
.expert__figure .avatar { width: 77.858%; }   /* 252.26 of 324, flush with the bottom edge */

.expert__name {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 22px; line-height: 24px;   /* XD: 22/24 IvyMode, centred */
	color: var(--c-aubergine);
	text-align: center;
	margin: 11px 0 0;                     /* tile ends y1856 → name y1867 */
}
.expert__role {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 Roboto Condensed Regular */
	color: var(--c-aubergine);
	text-align: center;
	margin: 12px 0 0;                     /* name line ends y1891 → role y1903 */
}

.avatar { display: block; fill: var(--c-cream); }   /* XD: iconmonstr-user-3 in #F8F1EA */

@media (max-width: 1024px) {
	.teacher__name,
	.experts__title { font-size: 34px; line-height: 1.15; }
}

@media (max-width: 860px) {
	.teacher { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.teacher + .teacher { margin-top: 56px; }
	.teacher__figure { max-width: 449px; }
	.teacher__focus li { max-width: none; }
	.experts { margin-top: 64px; }
	.experts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 36px; }
}

@media (max-width: 560px) {
	.experts__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- Responsive
   Phone layout follows the phone artboard (dropdown bar, stacked columns,
   scrolling step row); the exact phone paddings are not specced yet. */
@media (max-width: 1024px) {
	.panel__title { font-size: 34px; line-height: 1.15; }
}

@media (max-width: 860px) {
	.lehrgang { padding-block: 40px 64px; }

	.tabs__bar { height: auto; padding: 11px; border-radius: 24px; }
	.tabs__tab {
		position: static; transform: none;
		width: 100%; padding-right: 60px; display: none;
	}
	.tabs__tab[aria-selected="true"],
	.tabs__bar.is-open .tabs__tab { display: flex; }
	.tabs__toggle {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 11px; right: 11px;
		width: 48px; height: 48px;
		border: 0; border-radius: 50%; background: transparent;
		color: var(--c-aubergine); cursor: pointer;
	}
	.tabs__toggle svg { transition: transform .15s ease; }
	.tabs__bar.is-open .tabs__toggle svg { transform: rotate(180deg); }

	.tabs__panel { padding-top: 28px; }
	.panel__title { font-size: 30px; margin-bottom: 16px; }

	/* Step row keeps its XD dimensions and scrolls sideways, as on the phone artboard. */
	.steps {
		width: auto;
		margin-inline: calc(var(--gutter-inset) * -1);
		padding-inline: var(--gutter-inset);
		justify-content: flex-start; gap: 41px;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
	.steps__item { flex: 0 0 129px; }
	.steps__label { width: 100px; }
	.steps__sep { display: none; }

	.semesters { margin-top: 40px; }
	.tracks { margin-top: 64px; }
	.tracks__title { font-size: 26px; line-height: 1.2; }
	.tracks__grid { width: 100%; grid-template-columns: 1fr; row-gap: 32px; column-gap: 0; }
}

/* ============================================================= Investition (pricing)
   White section — the artboard itself is #FFFFFF, there is no background rect.
   Anchors: heading 3053 · intro 3119 · cards 3196–3977 · footnote 4019–4061. */
.pricing {
	/* Cream section ends y2997 → heading y3053; footnote ends y4061 → final CTA y4118. */
	padding-block: 56px 57px;
}

.pricing__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;      /* XD: 40/42 */
	color: var(--c-aubergine);
	text-align: center;
	margin: 0 0 24px;                        /* heading line box ends y3095 → intro y3119 */
}

.pricing__intro {
	font-size: 16px; line-height: 19px;      /* XD: 16/19, 2 lines = 38px */
	color: var(--c-aubergine);
	text-align: center;
	max-width: 942px; margin: 0 auto;
}

/* Three 324px cards 16px apart — the same grid as the Überblick cards (= 1004). */
.plans {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
	margin-top: 39px;                        /* intro ends y3157 → cards y3196 */
}

.plan {
	position: relative;
	min-height: 781px;                       /* XD: Rechteck 17 — 324 × 781, radius 20 */
	background: var(--c-cream);              /* #F8F1EA */
	border-radius: 20px;
}

/* XD: Rechteck 23 — the coloured cap, only the top corners rounded. */
.plan__head {
	height: 137px;
	padding: 27px 25px 0;                    /* card x138 → text x163; card y3196 → eyebrow y3223 */
	border-radius: 20px 20px 0 0;
}
.plan--basis   .plan__head { background: var(--c-yellow);    color: var(--c-aubergine); }
.plan--full    .plan__head { background: var(--c-orange);    color: var(--c-white); }
.plan--premium .plan__head { background: var(--c-aubergine); color: var(--c-white); }

.plan__eyebrow {
	font-size: 16px; line-height: 19px;      /* XD: 16/19 */
	margin: 0;
}
.plan__name {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 26px; line-height: 24px;      /* XD: 26/24 */
	margin: 0;
}

/* XD: Rechteck 22 — 271 × 70, radius 40, straddling the cap edge with exactly
   35px on the colour and 35px on the cream (cap ends y3333, pill 3298–3368). */
.plan__price {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 271px; max-width: calc(100% - 50px);
	height: 70px; margin: -35px 25px 0;
	border-radius: 40px;
	background: var(--c-peach);
	color: var(--c-aubergine);
	font-size: 30px; line-height: 35px;      /* XD: 30/35, centred in the pill both ways */
	text-align: center;
}

.plan__body { padding: 0 25px; }

.plan__lead {
	font-size: 16px; line-height: 19px;      /* XD: 16/19 */
	color: var(--c-aubergine);
	margin: 29px 0 0;                        /* pill ends y3368 → lead y3397 */
	min-height: 95px;                        /* 5 lines — holds all three lists on one line even though card 3's lead is shorter */
}
.plan__lead strong { font-weight: 700; }

.plan__list { list-style: none; margin: 37px 0 0; padding: 0; }   /* lead block ends y3492 → item 1 y3529 */

.plan__item {
	display: flex; align-items: flex-start; gap: 10px;   /* icon 18px at x163, text at x191 */
	font-size: 16px; line-height: 19px;      /* XD: 16/19 */
	color: var(--c-aubergine);
	margin-bottom: 12px;                     /* derived: stepping 12px from item 1 (y3529) lands item 8 on y3803 exactly */
}
.plan__item:last-child { margin-bottom: 0; }
.plan__icon { flex: 0 0 18px; width: 18px; height: 18px; }   /* XD: Ellipse 3 — 18 × 18, #338D4F / #AF0000 */

.plan__note {
	font-size: 12px; line-height: 14px;      /* XD: 12/14 */
	color: var(--c-aubergine);
	margin: 21px 0 0;                        /* card 1: list ends y3891 → note y3912 */
}

.plan__star {
	position: absolute; top: 13px; right: 13.5px;
	width: 18.23px; height: 17.34px;         /* XD: Pfad 49 — #FFB91C, inset symmetrically from the corner */
}

.pricing__footnote {
	font-size: 12px; line-height: 14px;      /* XD: 12/14, 3 lines = 42px */
	color: var(--c-aubergine);
	text-align: center;
	max-width: 696px; margin: 42px auto 0;   /* cards end y3977 → footnote y4019 */
}

@media (max-width: 860px) {
	.pricing { padding-block: 40px 64px; }
	.pricing__title { font-size: 30px; line-height: 1.15; }
	.plans { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
	.plan { min-height: 0; }
	.plan__lead { min-height: 0; }
	.pricing__footnote { margin-top: 28px; }
}

/* ============================================================= Final CTA
   XD: Rechteck 28 — full-bleed #F8F1EA, y4118 → y4437 (319 tall). Buttons and the
   €55 note are the same components as the CTA row in the Überblick section. */
.final-cta {
	background: var(--c-cream);
	text-align: center;
	/* 49 + 42 + 24 + 38 + 30 + 48 + 6 + 19 + 63 = 319. The 30px above the buttons is
	   the one figure measured off the export rather than read from the panel — an
	   error there shifts the block inside the band but keeps the band's height. */
	padding-block: 49px 63px;
}

.final-cta__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 40px; line-height: 42px;   /* XD: 40/42 */
	color: var(--c-aubergine);
	margin: 0 0 24px;                     /* heading line box ends y4209 → intro y4233 */
}

.final-cta__text {
	font-size: 16px; line-height: 19px;   /* XD: 16/19, 2 lines = 38px */
	color: var(--c-aubergine);
	max-width: 726px; margin: 0 auto;
}

.final-cta .cta-row { margin-top: 30px; }

@media (max-width: 860px) {
	.final-cta { padding-block: 40px 48px; }
	.final-cta__title { font-size: 30px; line-height: 1.15; margin-bottom: 16px; }
}

/* ============================================================= Motion & interactions
   All progressive enhancement: with JS unavailable or reduced motion preferred,
   everything below is simply present and static. */

/* Sticky tab bar. The Module panel is 3153px tall, so without this the tabs
   scroll out of reach entirely. The padding gives the backdrop room around the
   bar; the matching negative margin cancels it again, so the flow above and
   below is untouched and `top: 0` still parks the bar 16px down. */
.tabs__sticky {
	position: sticky; top: 0; z-index: 20;
	padding-block: 16px 36px; margin-block: -16px -36px;
}

/* A backdrop behind the bar, not a ring around it: a box-shadow spread follows
   the border-radius, so it would only move the gaps at the pill's rounded
   corners further out and content would still show through them. Opaque cream
   through the bar itself, then fading over the 36px below so content dissolves
   instead of being sliced off at a hard line. Explicit rgba rather than
   `transparent`, which interpolates through grey in a gradient. */
.tabs__sticky::before {
	content: ''; position: absolute; z-index: -1;
	top: 0; bottom: 0; left: -24px; right: -24px;
	background: linear-gradient(
		to bottom,
		var(--c-cream) 0,
		var(--c-cream) calc(100% - 36px),
		rgba(248, 241, 234, 0) 100%
	);
}

/* Scroll-reveal for the card rows. JS adds .reveal, so the cards are never
   left invisible if it fails to run. */
.reveal {
	opacity: 0; transform: translateY(18px);
	transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------- Hover
   Gathered behind (hover: hover) because on touch, :hover fires on tap and
   then stays applied until you tap elsewhere — leaving a button you just
   pressed stuck in its hover state. Convention: controls move, links fade.
   Deliberately absent: the Überblick and pricing cards. They are not
   clickable, and a hover would imply they are. */
@media (hover: hover) {
	.hero__brand:hover img { opacity: .85; }

	/* The chevron leads — this is the page's primary conversion element, and a
	   bare scale() reads as decoration rather than as something to click. */
	.hero__cta-circle:hover { transform: scale(1.03); background: #FFC63F; }
	.hero__cta-circle:hover .hero__cta-arrow { transform: translateX(5px); }

	/* Explicit colours rather than filter: brightness(), which lifts every
	   channel toward white — on the orange that washed the button out instead
	   of deepening it. The 1px lift is what reads as "pressable". */
	.btn:hover { transform: translateY(-1px); }
	.btn--primary:hover   { background: #EFA800; }
	.btn--secondary:hover { background: #E03C00; }

	.tabs__tab:not([aria-selected="true"]):hover { background: rgba(242, 216, 194, .5); }
	.faq__toggle:hover { color: var(--c-aubergine-hover); }
	.floating-cta__btn:hover { transform: scale(1.06); }

	.site-footer__brand:hover img { opacity: .85; }
	.site-footer__contact a:hover { text-decoration: underline; }
	.site-footer__social a:hover { opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }   /* the global smooth scroll is motion too */
	.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
	.tabs__indicator { transition: none; }
	.tabs__panel:not([hidden]) { animation: none; }
	.floating-cta { transition: none; transform: none; }
	.hero__cta-circle, .hero__cta-arrow, .btn { transition: none; }
	.hero__cta-circle:hover { transform: none; }
	.hero__cta-circle:hover .hero__cta-arrow { transform: none; }
	.btn:hover { transform: none; }
}

@media (max-width: 860px) {
	/* The bar is a dropdown here — there is no row to slide along. */
	.tabs__bar.has-indicator .tabs__indicator { display: none; }
	.tabs__bar.has-indicator .tabs__tab[aria-selected="true"] { background: var(--c-peach); }
}

/* ============================================================= Footer
   XD: Rechteck 27 — full-bleed #5C0F47, y4437, 112 tall. Four hand-placed
   columns starting at x30 / 379 / 786 / 1186 and ending at x1247, so the column
   track widths are taken literally rather than distributed. */
.site-footer {
	background: var(--c-aubergine);
	color: var(--c-white);
	min-height: 112px;
	padding-block: 32px 42px;      /* footer top y4437 → text blocks y4469; 112 − 32 − 38 */
}

.site-footer__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-left: 30px; padding-right: 33px;
	display: grid;
	grid-template-columns: 349fr 407fr 400fr 61fr;   /* 30→379→786→1186→1247 */
	align-items: start;
}

/* The logo sits 8px above the three text columns in the XD (y4461 vs y4469). */
.site-footer__brand { display: block; margin-top: -8px; }
.site-footer__brand img {
	width: 251.82px; height: auto;   /* XD: Gruppe 69 — 251.82 × 33.42 */
	transition: opacity .2s ease;
}

.site-footer__address,
.site-footer__contact {
	font-size: 16px; line-height: 19px;   /* XD: 16/19 */
	margin: 0;
}
.site-footer__address strong { font-weight: 700; }   /* XD: first line Roboto Condensed Bold */
.site-footer__contact a { text-decoration: none; }

.site-footer__social { display: flex; gap: 25px; }   /* LinkedIn ends x1210 → Facebook x1235 */
.site-footer__social a {
	display: block; color: var(--c-yellow);   /* XD: #FFB91C */
	transition: opacity .18s ease;
}
.site-footer__social a:focus-visible { outline: 2px solid var(--c-white); outline-offset: 4px; }
.site-footer__social svg { display: block; fill: currentColor; }
.icon-linkedin { width: 24px; height: 23px; }
.icon-facebook { width: 12px; height: 24px; }

@media (max-width: 860px) {
	.site-footer { padding-block: 32px; }
	.site-footer__inner {
		grid-template-columns: 1fr; gap: 24px;
		padding-inline: var(--gutter-inset);
	}
	.site-footer__brand { margin-top: 0; }
}

/* ============================================================= Floating CTAs */
/* Held back until the hero has scrolled away. Over the hero they only duplicate
   its own circle CTA and clutter the most important screen of the page; below
   it they are the only booking route in reach. JS adds .is-visible, and the
   <noscript> in footer.php reveals them when it cannot. */
.floating-cta {
	position: fixed; right: 30px; bottom: 40px;   /* lower-right, matching the XD placement */
	z-index: 100; display: flex; flex-direction: column; gap: 14px;
	opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}
.floating-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.floating-cta__btn {
	display: flex; align-items: center; justify-content: center;
	width: 58px; height: 48px; border-radius: 20px;   /* XD: 58×48, radius 20 */
	transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.floating-cta__btn:focus-visible { outline: 2px solid var(--c-aubergine); outline-offset: 3px; }
.floating-cta__btn--info  { background: var(--c-orange); color: var(--c-white); }      /* XD: #FF4500 */
.floating-cta__btn--group { background: var(--c-yellow); color: var(--c-aubergine); }  /* XD: #FFB91C */
.floating-cta__btn svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
	.floating-cta { right: 16px; gap: 12px; }
}