:root {
	/* brand / structure */
	--color-primary:#18315a;   /* dark navy - text, headings, brand dark */
	--color-secondary:#506281; /* slate blue - secondary buttons, muted accents */
	--color-accent:#ff5558;    /* brand red - logo, buttons, links, warnings */
	--color-alert:#c3373a;     /* darker red - overflow / error state */

	/* surfaces */
	--color-light:#faf8f9;     /* off-white - light background, inverted text */
	--color-white:#ffffff;     /* pure white */
	--color-beige:#eae3dd;     /* grey/beige buttons - @no-customise: only on dashboard/checkin, never the signup page */

	--color-muted:#c3c6d0;     /* light grey - placeholders, idle borders (customisable) */

	/* dark UI greys - not customisable. 3-digit keeps them out of the 6-digit
	   customiser scan; @no-customise makes that explicit and survives widening. */
	--color-grey:#999;         /* @no-customise - mid grey, secondary text */
	--color-grey-dark:#666;    /* @no-customise - dark grey, UI text/icons */
	--color-grey-darker:#333;  /* @no-customise - near-black text */
	--color-black:#000;        /* @no-customise - pure black */
}

html, body { margin:0; padding:0; }
body { font-family:'Barlow',sans-serif; font-size:24px; background-color:var(--color-light); color:var(--color-primary); }
body.dark { background-color:var(--color-primary); color:var(--color-light); }

div.logo { position:fixed; z-index:998; top:0; left:0; width:100px; height:100px; background-color:var(--color-accent); overflow:hidden; }
div.logo.custom { background-color:transparent; }
div.logo img { display:block; width:100%; height:auto; margin:0; padding:0; border:0; }

a { text-decoration:none; color:inherit; }
a.grey { color:var(--color-secondary); }
a:hover { color:var(--color-accent); }
.button { display:inline-block; margin-right:3px; padding:28px; padding-top:14px; padding-bottom:14px; border:0; outline:none; cursor:pointer; font-size:0.75em; line-height:1em; font-weight:bold; color:var(--color-light); background-color:var(--color-accent); -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
.button:hover { background-color:var(--color-secondary); color:var(--color-light); }
.button.light { background-color:var(--color-secondary); color:var(--color-light); }
.button.light:hover { background-color:var(--color-accent); color:var(--color-light) }

.button.grey { background-color:var(--color-beige); color:var(--color-primary); }
.button.grey:hover { background-color:var(--color-secondary); color:var(--color-light); }

hr { margin:0; margin-top:100px; margin-bottom:100px; padding:0; border:0; border-top:1px solid var(--color-primary); }

h1,
h2,
h3 { color:var(--color-primary); font-size:2.25em; line-height:1.07em; margin-top:0; }
h1.maxmargin,
h2.maxmargin,
h3.maxmargin { margin-bottom:1.5em; }
h1.nomargin,
h2.nomargin,
h3.nomargin { margin-bottom:0; }
h3 { font-size:1em; }
body.light div.wrapper > div.left h1,
body.dark div.wrapper > div:not(.light) h1,
body.dark div.wrapper > div:not(.light) h2,
body.dark div.wrapper > div:not(.light) h3 { color:var(--color-accent); }

h1 a,
h2 a,
h3 a { color:inherit; text-decoration:inherit; }

.warning { display:block; padding:10px; background-color:var(--color-accent); color:var(--color-white); }
.warning a:hover { color:var(--color-white); }
.warning a:hover u { text-decoration:none; }

.small { font-size:0.75em; }
.large { font-size:1.25em; }

.box { display:block; overflow-wrap: break-word; font-size:1.25em; border:6px solid var(--color-accent); padding:10px; color:var(--color-accent); font-weight:bold; text-align:center; }

/* bordered callout for inline notices (e.g. the admin-only hint on a not-yet-available link) — reuses the house .box accent border but keeps body text left-aligned and normal weight */
/* flex column with zeroed child margins: spacing comes only from the container padding
   (uniform on every side, so top == bottom) and the gap between rows — no default p
   margins or inline-block descenders can skew it */
.notice { display:flex; flex-direction:column; gap:24px; border:6px solid var(--color-accent); padding:40px !important; margin-top:80px; text-align:left; }
@media screen and (max-width: 899px) { .notice { padding:20px!important; } }
.notice > * { margin:0; }
.notice .notice-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.notice .notice-actions .button { margin:0; }
.notice .notice-action { font-size:0.7em; }

div.navigation { position:absolute; top:0; right:20px; z-index:999; font-size:0.6em; }
div.navigation ul { position:relative; display:block; overflow:hidden; list-style:none; margin:0; padding:0; }
div.navigation ul li { position:relative; display:block; float:left; margin:0; padding:0; margin-right:40px; }
div.navigation ul li a { position:relative; display:block; border-top:6px solid transparent; padding-top:20px; font-weight:bold; }
div.navigation ul li a:hover,
div.navigation ul li a.selected { border-color:var(--color-accent); color:inherit; }

div.wrapper { position:relative; z-index:900; width:100%; max-width:1200px; margin:auto; }
div.wrapper.full,
div.wrapper.color,
div.wrapper.white,
div.wrapper.image { max-width:100%; }
div.wrapper.color { background-color:var(--color-primary); color:var(--color-light); }
div.wrapper.white { background-color:var(--color-white); }

div.wrapper + div.wrapper.arrow { margin-top:-70px; padding-top:150px; overflow:hidden; }
div.wrapper + div.wrapper.arrow:before { position:absolute; content:""; top:0; left:50%; margin-left:-1500px; border-top:150px solid var(--color-light); border-left:1500px solid transparent; border-right:1500px solid transparent; }
div.wrapper.white + div.wrapper.arrow:before { border-top-color:var(--color-white); }
div.wrapper.color + div.wrapper.arrow:before { border-top-color:var(--color-primary); }

div.wrapper div.left,
div.wrapper div.right { position:relative; z-index:2; width:50%; float:left; }
div.wrapper div.right { float:right; }
div.wrapper div.clear { display:block; clear:both; }

div.wrapper div.left.fixed,
div.wrapper div.right.fixed { position:fixed; float:none; max-width:600px; top:0; }
div.wrapper div.left.fixed { right:50%; }
div.wrapper div.right.fixed { left:50%; }
div.wrapper div.left.fixed-bottom,
div.wrapper div.right.fixed-bottom { top:auto; bottom:0; }

div.wrapper > div.light { background-color:var(--color-white); color:var(--color-primary); }
div.wrapper > div.light + div.background { z-index:1; content:""; position:fixed; top:0; bottom:0; left:50%; right:0; background-color:var(--color-white); }
body.dark div.wrapper > div.light { background-color:var(--color-light); }
body.dark div.wrapper > div.light + div.background { background-color:var(--color-light); }

div.wrapper div.content { position:relative; z-index:2; margin:0; padding:0; padding-left:130px; padding-right:130px; padding-top:150px; padding-bottom:100px; }
div.wrapper div.content.narrow { padding-left:250px; padding-right:250px; }
div.wrapper div.left div.content { padding-left:130px; padding-right:30px; }
div.wrapper div.right div.content { padding-left:100px; padding-right:60px; }

div.wrapper div.content > :last-child:not(.button) { margin-bottom:0; padding-bottom:0; }

/* Marketing rhythm ------------------------------------------
   Scoped to body.marketing (home + the marketing sub-pages) so app/dashboard/
   checkin/show/legal pages keep the default 150/100 section padding.

   Goal: a tighter, CONSISTENT vertical gap (~155px) between every marketing
   section — roughly half the default — without ever clipping content.

   The reduction comes from the LOWER section's top padding and a shallower
   .arrow band, while each section keeps a SAFE bottom padding (80px). The
   .arrow that follows a section pulls up by 70px (margin-top:-70px) and paints
   a colour-filled triangle over that overlap; if the section above it ended
   closer than 70px from its edge the triangle would cover the last line of
   copy. 80px bottom padding (> the 70px pull-up) guarantees ~10px clearance,
   so nothing is overlapped — this is what the removed .tight-bottom broke. */
body.marketing div.wrapper div.content { padding-top:75px; padding-bottom:80px; }
/* arrow section: outer padding-top/triangle reduced to ~half; inner content
   top trimmed so the arrow gap matches the plain section gap (~155px). */
body.marketing div.navigation + div.wrapper div.content { padding-top:150px; }
body.marketing div.wrapper.arrow div.content { padding-top:55px; }
body.marketing div.wrapper + div.wrapper.arrow { padding-top:120px; }
body.marketing div.wrapper + div.wrapper.arrow:before { border-top-width:90px; }

div.wrapper div.content > div.main { position:relative; padding-right:250px; }

div.wrapper div.content > div.main > div.service,
div.wrapper div.content.narrow > div.service { position:absolute; right:0; width:200px; margin-bottom:50px; }
div.wrapper div.content > div.main > div.service .button,
div.wrapper div.content.narrow > div.service .button { display:block; margin:0; margin-bottom:10px; background-color:var(--color-primary); color:var(--color-light); text-align:center; }
div.wrapper div.content > div.main > div.service .button:hover,
div.wrapper div.content.narrow > div.service .button:hover { background-color:var(--color-secondary); }

div.wrapper div.content > div.main > div.service .button.primary { background-color:var(--color-accent); }
div.wrapper div.content > div.main > div.service .button.primary:hover { background-color:var(--color-secondary); }

div.wrapper div.content > div.main > div.service .button.secondary { background-color:var(--color-secondary); }
div.wrapper div.content > div.main > div.service .button.secondary:hover { background-color:var(--color-primary); }

div.wrapper div.content > div.main > div.service .button.tertiary,
div.wrapper div.content.narrow > div.service .button.tertiary { background-color:var(--color-muted); }
div.wrapper div.content > div.main > div.service .button.tertiary:hover,
div.wrapper div.content.narrow > div.service .button.tertiary:hover { background-color:var(--color-primary); }

.input { position:relative; display:block; color:var(--color-muted); font-weight:bold; margin-bottom:90px; }
.input.nomargin { margin-bottom:0; }
.design-image-row .input { margin-bottom:0; }
.input.lessmargin { margin-top:-70px; }
.input.focus,
.input.focus .input { color:var(--color-primary); }

.input > .sub { position:absolute; top:100%; left:0; right:0; margin-top:10px; font-weight:normal; font-size:0.8em; }

body.dark div.wrapper > div:not(.light) .input { color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) .input.focus { color:var(--color-light); }

.input.line { border-top:1px solid var(--color-primary); margin-top:40px; padding-top:20px; }

.input a { text-decoration:underline; }
.input a:hover { color:inherit; }

.input > small { font-size:0.7em; line-height:1.42em; font-weight:normal; }

.input > span:not([class]),
.input > span[class=""],
.input > span[class="shown"] { position:absolute; left:-50px; }
.input > span.break { display:block; clear:both; }

.input input[type=text],
.input input[type=email],
.input input[type=date],
.input input[type=datetime-local],
.input select,
.input textarea { width:100%; outline:none; border:0; margin:0; padding:0; padding-top:1em; padding-bottom:1em; background-color:inherit; font-family:inherit; font-size:inherit; font-weight:normal; color:inherit; border-bottom:2px solid var(--color-muted); -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
.input textarea { overflow:hidden; resize: none; }

.input.double input[type=text],
.input.double input[type=email],
.input.double input[type=date],
.input.double input[type=datetime-local],
.input.double select,
.input.double textarea { width:47%; margin-right:6%; float:left; }
.input.double input[type=text] + *,
.input.double input[type=email] + *,
.input.double input[type=date] + *,
.input.double input[type=datetime-local] + *,
.input.double select + *,
.input.double textarea + * { margin-right:0; }

.input.tripple input[type=text],
.input.tripple input[type=email],
.input.tripple input[type=date],
.input.tripple input[type=datetime-local],
.input.tripple select,
.input.tripple textarea { width:31%; margin-right:3%; float:left; }
.input.tripple input[type=text] + * + *,
.input.tripple input[type=email] + * + *,
.input.tripple input[type=date] + * + *,
.input.tripple input[type=datetime-local] + * + *,
.input.tripple select + * + *,
.input.tripple textarea + * + * { width:32%; margin-right:0; }

.input.focus input[type=text],
.input.focus input[type=email],
.input.focus input[type=date],
.input.focus input[type=datetime-local],
.input.focus select,
.input.focus textarea { border-color:var(--color-primary); }

.input select { z-index:4; position:relative; background-color:transparent; }
.input select + span.select { z-index:3; position:absolute; bottom:1.67em; right:0; font-weight:bold; font-size:0.6em; line-height:1.67em; }

.input.focus[data-help]:before { content:attr(data-help); position:absolute; z-index:1; left:100%; top:-5px; margin-left:30px; width:200px; padding:20px; font-size:0.6em; font-weight:normal; background-color:var(--color-primary); color:var(--color-light); }
.input.focus[data-help]:after { content:""; position:absolute; z-index:1; top:0; left:100%; border-top:30px solid var(--color-primary); border-left:15px solid transparent; margin-top:0.5em; margin-left:15px; }

.input fieldset { margin:0; padding:0; border:0; display:block; overflow:hidden; }
.input fieldset > legend { display:none; }

.input input[type=checkbox],
.input input[type=radio] { position:absolute;width:0;height:0;visibility:hidden; }

.input input[type=checkbox] + label,
.input input[type=radio] + label { position:relative; display:block; cursor:pointer; margin-top:20px; border:2px solid var(--color-muted); border-radius:1.5em; line-height:1.1em; text-align:center; font-weight:normal; padding:0.7em 2.5em }

.input.double input[type=checkbox] + label,
.input.double input[type=radio] + label { box-sizing:border-box; width:47%; margin-right:6%; float:left; }
.input.double legend + input[type] + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { margin-right:0; }

.input.tripple input[type=checkbox] + label,
.input.tripple input[type=radio] + label { box-sizing:border-box; width:31%; margin-right:3%; float:left; }
.input.tripple legend + input[type] + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { width:32%; margin-right:0; }

@media screen and (max-width: 840px) {
    .input.tripple input[type=checkbox] + label,
    .input.tripple input[type=radio] + label,
    .input.tripple legend + input[type] + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { width:47%; margin-right:6%; }

    .input.tripple legend + input[type] + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { margin-right:0; }
}

.input input[type=checkbox] + label:before,
.input input[type=radio] + label:before { display:none; content:""; font-family:Arial; line-height:1.5em; position:absolute; top:0.5em; left:0.5em; width:1.5em; height:1.5em; border-radius:50%; }
.input input[type=checkbox] + label:hover:before,
.input input[type=radio] + label:hover:before { display:block; background-color:var(--color-muted); }
.input input[type=checkbox]:checked + label:before,
.input input[type=radio]:checked + label:before { display:block; content:"✓"; color:var(--color-light); background-color:var(--color-accent); opacity:0.5; }

.input.block input[type=checkbox] + label,
.input.block input[type=radio] + label { padding:0.7em; }
.input.block input[type=checkbox] + label:before,
.input.block input[type=radio] + label:before { display:none; content:""; font-family:Arial; line-height:1.5em; position:absolute; top:0.5em; left:0.5em; width:1.5em; height:1.5em; border-radius:50%; }
.input.block input[type=checkbox] + label:hover,
.input.block input[type=radio] + label:hover { background-color:var(--color-muted); }
.input.block input[type=checkbox]:checked + label,
.input.block input[type=radio]:checked + label { background-color:var(--color-accent); border-color:var(--color-accent); color:var(--color-light); }

.input.focus input[type=checkbox] + label,
.input.focus input[type=radio] + label { border-color:var(--color-primary); }
.input.focus input[type=checkbox]:checked + label:before,
.input.focus input[type=radio]:checked + label:before { opacity:1; }

body.dark div.wrapper > div:not(.light) .input input[type=text],
body.dark div.wrapper > div:not(.light) .input input[type=email],
body.dark div.wrapper > div:not(.light) .input input[type=date],
body.dark div.wrapper > div:not(.light) .input input[type=datetime-local],
body.dark div.wrapper > div:not(.light) .input select,
body.dark div.wrapper > div:not(.light) .input textarea { border-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) .input.focus input[type=text],
body.dark div.wrapper > div:not(.light) .input.focus input[type=email],
body.dark div.wrapper > div:not(.light) .input.focus input[type=date],
body.dark div.wrapper > div:not(.light) .input.focus input[type=datetime-local],
body.dark div.wrapper > div:not(.light) .input.focus select,
body.dark div.wrapper > div:not(.light) .input.focus textarea { border-color:var(--color-light); }

body.dark div.wrapper > div:not(.light) .input input[type=checkbox] + label,
body.dark div.wrapper > div:not(.light) .input input[type=radio] + label { border-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) .input input[type=checkbox] + label:hover:before,
body.dark div.wrapper > div:not(.light) .input input[type=radio] + label:hover:before { background-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) .input input[type=checkbox]:checked + label:hover:before,
body.dark div.wrapper > div:not(.light) .input input[type=radio]:checked + label:hover:before { background-color:var(--color-accent); }
body.dark div.wrapper > div:not(.light) .input.focus input[type=checkbox] + label,
body.dark div.wrapper > div:not(.light) .input.focus input[type=radio] + label { border-color:var(--color-light); }

.input ::placeholder { color:var(--color-muted); opacity:0.5; }
.input ::-webkit-input-placeholder { color:var(--color-muted); opacity:0.5; }
.input :-ms-input-placeholder { color:var(--color-muted); opacity:0.5; }
.input.focus ::placeholder { opacity:1; }
.input.focus ::-webkit-input-placeholder { opacity:1; }
.input.focus :-ms-input-placeholder { opacity:1; }

body.dark div.wrapper > div:not(.light) .input ::placeholder { color:var(--color-secondary); opacity:0.5; }
body.dark div.wrapper > div:not(.light) .input ::-webkit-input-placeholder { color:var(--color-secondary); opacity:0.5; }
body.dark div.wrapper > div:not(.light) .input :-ms-input-placeholder { color:var(--color-secondary); opacity:0.5; }
body.dark div.wrapper > div:not(.light) .input.focus ::placeholder { opacity:1; }
body.dark div.wrapper > div:not(.light) .input.focus ::-webkit-input-placeholder { opacity:1; }
body.dark div.wrapper > div:not(.light) .input.focus :-ms-input-placeholder { opacity:1; }

.input.code-input .input-row { display:flex; align-items:baseline; width:100%; border-bottom:2px solid var(--color-muted); }
.input.code-input .input-row > input { flex:1; min-width:0; border-bottom:0; }
.input.code-input .input-prefix { color:var(--color-grey-dark); font-weight:normal; white-space:nowrap; margin-right:0.25em; }
.input.code-input.focus .input-row { border-bottom-color:var(--color-primary); }
body.dark div.wrapper > div:not(.light) .input.code-input .input-row { border-bottom-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) .input.code-input.focus .input-row { border-bottom-color:var(--color-light); }
body.dark div.wrapper > div:not(.light) .input.code-input .input-prefix { color:var(--color-muted); }

.input.main { color:var(--color-accent); }
.input.main input[type=text],
.input.main input[type=email],
.input.main input[type=date],
.input.main input[type=datetime-local],
.input.main select,
.input.main textarea { border-color:var(--color-accent); font-weight:bold; }

.subtitle,
div.wrapper div.content > div.main .input.main { width:80%; }

.subtitle { color:var(--color-accent); font-weight:bold; padding-top:1em; padding-bottom:1em; border-bottom:2px solid var(--color-accent); margin-bottom:90px; }

.data { position:relative; display:block; font-size:0.75em; }
.data > .row { position:relative; overflow:hidden; padding-top:0.75em; margin-top:0.75em; border-top:1px solid var(--color-beige); }
.data > .row:first-child { border-top:0; margin-top:0; padding-top:0; }
.data > .row.title { font-weight:bold; }
.data > .row > .col { position:relative; float:left; }
.data > .row > .col.col-10 { width:10%; }
.data > .row > .col.col-15 { width:15%; }
.data > .row > .col.col-20 { width:20%; }
.data > .row > .col.col-25 { width:25%; }
.data > .row > .col.col-30 { width:30%; }
.data > .row > .col.col-35 { width:35%; }
.data > .row > .col.col-40 { width:40%; }
.data > .row > .col.col-45 { width:45%; }
.data > .row > .col.col-50 { width:50%; }
.data > .row > .col.col-55 { width:55%; }
.data > .row > .col.col-60 { width:60%; }
.data > .row > .col.col-65 { width:65%; }
.data > .row > .col.col-70 { width:70%; }
.data > .row > .col.col-75 { width:75%; }
.data > .row > .col.col-80 { width:80%; }
.data > .row > .col.col-85 { width:85%; }
.data > .row > .col.col-90 { width:90%; }
.data > .row > .col.col-100 { width:100%; }

/* Check-in progress bar rendered above the records table in check-in mode.
   visual width caps at 100%; the absolute label always shows the true counts.
   .is-overflow swaps to a darker red so >100% (unlisted check-ins / extra
   entourage) is visually distinguishable. */
.checkin-progress { position:relative; height:28px; background:var(--color-beige); overflow:hidden; margin:0 0 40px; }
.checkin-progress-fill { position:absolute; left:0; top:0; bottom:0; background:var(--color-accent); transition:width 0.25s ease; }
.checkin-progress.is-overflow .checkin-progress-fill { background:var(--color-alert); }
.checkin-progress-label { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.9em; color:var(--color-primary); }

/* the search input and the progress bar both render BEFORE the title row
   (in that order, with the bar only in check-in mode), so the title row is
   no longer .data > .row:first-child and would regain its top border.
   suppress it explicitly for either preceding sibling. */
.data > .checkin-progress + .row,
.data > .dashboard-list-search + .row,
.data > .dashboard-list-search + .checkin-progress + .row { border-top:0; margin-top:0; padding-top:0; }

/* search input above each records list. matches the simple bottom-border
   style used by .input controls but stands alone (no .input wrapper) so it
   can sit above the table without disturbing form layout. width mirrors
   .input.main on .content > .main so the search input lines up as a vertical
   pair with the event-selection dropdown above it. */
.dashboard-list-search { display:block; width:80%; box-sizing:border-box; margin:0 0 40px; padding:0.75em 0; outline:none; border:0; border-bottom:2px solid var(--color-muted); background-color:inherit; font-family:inherit; font-size:inherit; font-weight:normal; color:inherit; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
/* tighten the gap when a bar chart immediately follows the search input
   (the common summary view); keep the default 40px when no bar follows
   (e.g. ?pending or ?overwritten sub-views, where the table is next). */
.dashboard-list-search:has(+ .checkin-progress) { margin-bottom:20px; }
.dashboard-list-search:focus { border-bottom-color:var(--color-primary); }

.tick { display:inline-block; position:relative; font-family:Arial; width:1.2em; height:1.2em; border:2px solid var(--color-primary); border-radius:50%; box-sizing:border-box; }
.tick:before { display:block; font-size:0.75em; color:var(--color-light); position:absolute; transform:translateY(-50%); top:50%; left:0; right:0; text-align:center; }

.tick[data-status=pending] { background-color:var(--color-primary); border-color:transparent; cursor:pointer; }
.tick[data-status=pending]:before { content:"?"; }

.tick[data-status=checked] { background-color:var(--color-accent); border-color:transparent; cursor:pointer; }
.tick[data-status=checked]:before { content:"✓"; }

.tick[data-status=unchecked] { background-color:var(--color-muted); border-color:transparent; cursor:pointer; }
.tick[data-status=unchecked]:before { content:"×"; }

.tick[data-status=checked-pending] { background-color:transparent; border-color:var(--color-muted); cursor:pointer; }
.tick[data-status=checked-pending]:before { content:"✓"; color:var(--color-muted); }

.tick[data-status=unchecked-pending] { background-color:transparent; border-color:var(--color-muted); cursor:pointer; }
.tick[data-status=unchecked-pending]:before { content:"×"; color:var(--color-muted); }

/* Check-in mode: all status icons turn grey; checked-in rows get the red checkmark instead. */
body.checkin-mode .tick { background-color:var(--color-muted) !important; border-color:transparent !important; }
body.checkin-mode .tick:before { content:""; }
body.checkin-mode .tick[data-status=pending]:before { content:"?"; color:var(--color-light); }
body.checkin-mode .tick[data-status=checked]:before { content:"✓"; color:var(--color-light); }
body.checkin-mode .tick[data-status=unchecked]:before { content:"×"; color:var(--color-light); }
body.checkin-mode .tick[data-status=checked-pending]:before { content:"✓"; color:var(--color-light); }
body.checkin-mode .tick[data-status=unchecked-pending]:before { content:"×"; color:var(--color-light); }
body.checkin-mode .tick.tick--checkin { background-color:var(--color-accent) !important; border-color:transparent !important; }
body.checkin-mode .tick.tick--checkin:before { content:"✓" !important; color:var(--color-light) !important; }
.summary-export-note { display:block; margin:16px 0 16px; font-size:0.75em; color:var(--color-grey); }
.summary-export-note:before { content:"\24D8"; margin-right:0.3em; }

/* Entourage badge "(+N)" rendered next to a guest's name in the summary list.
   Smaller and grey so it reads as a quiet annotation rather than part of the name.
   line-height:1 + vertical-align:baseline prevent the badge's larger line-box
   strut from shifting the name vertically when the badge appears (mirrors the
   fix applied to .checkin-entourage-badge in checkin.css). */
.entourage-extra { font-size:0.78em; font-weight:normal; color:var(--color-grey); margin-left:0.3em; line-height:1; vertical-align:baseline; }

/* Organisation / company sub-line shown under a guest's name in the summary list
   whenever attendee_data.organisation is present. Renders on its own line so the
   name's first-line baseline stays in the same vertical position regardless of
   whether the org is shown or hidden. */
.summary-org { display:block; font-size:0.85em; font-weight:normal; color:var(--color-grey); margin-top:3px; }

/* Unnamed-entourage rows in the dashboard summary: shown immediately below the
   main guest when the main guest is NOT checked in. Mirrors the check-in tool's
   .checkin-row--unnamed-entourage look — "↳ Begleitperson" rendered in grey to
   signal a placeholder companion (no individual name in the signup data). The
   tick column inherits the standard width/clickability so the row is toggleable
   in check-in mode like any other row. */
.row.record--unnamed-entourage .col.name { color:var(--color-grey); }

/* check-in summary visibility: rows hidden by the live search or by the
   check-in-mode "hide unconfirmed/declined unless searched or checked in"
   default. Toggled as a class (SSR + JS) so it composes with the grid layout. */
.row.record.is-hidden { display:none; }

div.wrapper div.block { position:relative; overflow:hidden; margin-bottom:1em; }
div.wrapper div.block.left,
div.wrapper div.block.right { width:auto; float:none; }
div.wrapper div.block img { display:block; margin-bottom:1em; }
div.wrapper div.block.left img { float:left; width:40%; margin-right:10%; }
div.wrapper div.block.right img { float:right; width:40%; margin-left:10%; }
div.wrapper div.block.left img + *,
div.wrapper div.block.right img + * { float:left; width:50%; }

div.block:last-child div.block:last-child,
div.block:last-child div.block:last-child > div.left,
div.block:last-child div.block:last-child > div.right { margin-bottom:0; }

div.block div.block div.left,
div.block div.block div.right { width:45%; margin-bottom:20px; }
div.block div.block div.left { margin-right:5%; }
div.block div.block div.right { margin-left:5%; }
div.block div.block div.left > *,
div.block div.block div.right > * { margin:1em; }

div.block.color div.left,
div.block.color div.right { background-color:var(--color-white); }

.white div.block.color div.left,
.white div.block.color div.right { background-color:var(--color-light); }

div.block.color.highlight div.left,
div.block.color.highlight div.right { background-color:var(--color-accent); color:var(--color-light); }

p > img { display:block; width:90%; max-width:300px; margin:auto; margin-top:3em; margin-bottom:2em; }

[data-more-show] { display:none !important; }
[data-more-show].shown { display:block !important; }

nav.tab-bar { display:flex; flex-wrap:wrap; margin:0; margin-top:-1.5em; margin-bottom:60px; padding:0; border-bottom:2px solid var(--color-muted); }
nav.tab-bar > .tab { position:relative; display:inline-block; flex:1 1 0; margin:0; margin-bottom:-2px; padding:8px 18px 12px; border:0; outline:none; background:transparent; cursor:pointer; font-family:inherit; font-size:0.7em; line-height:1.1em; font-weight:bold; color:var(--color-grey-dark); text-align:center; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; border-bottom:4px solid transparent; }
nav.tab-bar > .tab:hover { color:var(--color-primary); }
nav.tab-bar > .tab.active { color:var(--color-primary); border-bottom-color:var(--color-accent); }
nav.tab-bar > .tab > .tab-marker { display:none; position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--color-accent); }
nav.tab-bar > .tab.incomplete > .tab-marker { display:inline-block; }

body.dark div.wrapper > div:not(.light) nav.tab-bar { border-bottom-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) nav.tab-bar > .tab { color:var(--color-muted); }
body.dark div.wrapper > div:not(.light) nav.tab-bar > .tab:hover,
body.dark div.wrapper > div:not(.light) nav.tab-bar > .tab.active { color:var(--color-light); }

.tab-panel { display:none; }
.tab-panel.active { display:block; }
.tab-panel > .tab-intro { font-size:0.7em; line-height:1.4em; color:var(--color-secondary); font-weight:normal; margin:0; margin-bottom:60px; }

label.input.tab-dropdown { display:none; margin-top:-1.5em; margin-bottom:60px; }

@media screen and (max-width: 1099px) {
    nav.tab-bar > .tab { padding:8px 10px 12px; font-size:0.65em; }
}

@media screen and (max-width: 899px) {
    nav.tab-bar { display:none; }
    label.input.tab-dropdown { display:block; }
}

@media screen and (max-width: 480px) {
    nav.tab-bar > .tab { flex:1 1 auto; padding:8px 10px 10px; text-align:center; }
}

[data-sort] > [data-multi] { position:relative; overflow:hidden; padding-right:30px; }
[data-sort] > [data-multi]:before { cursor:pointer; color:var(--color-muted); opacity:0.5; content:'☰'; position:absolute; bottom:1em; right:0; margin-bottom:1px; }

.legal h2 { font-size:1.5em; margin-top:2em; }

ul.images { padding:0; list-style:none; overflow:hidden; }
ul.images > li { float:left; margin-right:10px; margin-bottom:10px; }
ul.images > li img { height:60px; width:auto; }

table.graph td { margin:0; padding:0; padding-right:3px; }
table.graph tr + tr td { padding-top:3px; }
table.graph .bar { position:relative; height:150px; min-width:1px; width:100%; border-bottom:2px solid var(--color-muted); }
table.graph .bar .value { position:absolute; z-index:10; bottom:-2px; left:0; right:0; background-color:var(--color-accent); }
table.graph .bar .value.base { z-index:1; background-color:var(--color-beige); }
table.graph td:hover .bar .value:not(.base) { background-color:var(--color-primary); }

table.graph .bar .value span { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:0.8em; font-weight:bold; }
table.graph td:hover .bar .value:not(.base) span { background-color:var(--color-white); padding:1px 3px; bottom:9px; }

table.graph td.past + td:not(.past) .bar:before { position:absolute; display:block; content:""; left:-3px; width:1px; top:2px; bottom:-2px; border-left:1px dotted var(--color-primary); }

table.graph td.current .bar .value:not(.base) { background-color:var(--color-primary); }

table.graph.compact td { padding-right:1px; }

div.cohort-scroll { overflow-x:auto; max-width:100%; }
table.cohort { border-collapse:separate; border-spacing:1px; table-layout:auto; width:100%; }
table.cohort th { background:transparent; font-weight:normal; color:var(--color-primary); padding:1px 2px; text-align:center; min-width:28px; }
table.cohort th.head { text-align:left; white-space:nowrap; padding:1px 14px 1px 4px; width:1%; }
table.cohort th.head em { font-style:normal; color:var(--color-grey); }
table.cohort tr:first-child th { color:var(--color-primary); }
table.cohort td.cell { text-align:center; padding:3px 1px; color:var(--color-grey-darker); min-width:28px; line-height:1.1; }
table.cohort td.cell.current { box-shadow:inset 0 0 0 2px var(--color-primary); font-weight:bold; }
table.cohort td.empty { background:transparent; color:var(--color-muted); text-align:center; padding:3px 1px; min-width:28px; }
table.cohort td.empty.current { box-shadow:inset 0 0 0 2px var(--color-primary); }

@media screen and (max-width: 1299px) {
    .input.focus[data-help]:before { width:160px; }
}
@media screen and (max-width: 1199px), screen and (max-height: 900px) {
    body { font-size:22px; }
}
@media screen and (max-width: 1023px) {
    body { font-size:20px; }
    
    div.logo { width:80px; height:80px; }

    div.wrapper div.content.narrow { padding-left:200px; padding-right:200px; }
    div.wrapper div.left div.content { padding-left:110px; padding-right:30px; }
    div.wrapper div.right div.content { padding-left:80px; padding-right:50px; }

    .input.focus[data-help]:before { padding:15px; width:120px; }

    div.wrapper div.content > div.main { padding-right:180px; }
    div.wrapper div.content > div.main > div.service,
    div.wrapper div.content.narrow > div.service { width:150px; }
}
@media screen and (max-width: 899px) {
    body { font-size:18px; }

    div.logo { width:60px; height:60px; }

    div.wrapper div.content.narrow { padding-left:150px; padding-right:150px; }
    div.wrapper div.left div.content { padding-left:80px; padding-right:30px; }
    div.wrapper div.right div.content { padding-left:60px; padding-right:40px; }

    .input.focus[data-help]:before { left:0; top:100%; margin:0; margin-top:15px; padding:15px; width:100%; box-sizing:border-box; }
    .input.focus[data-help]:after { left:0px; top:100%; margin-top:5px; border:0; border-bottom:10px solid var(--color-primary); border-right:30px solid transparent; }

    .input > span:not([class]),
    .input > span[class=""],
    .input > span[class="shown"] { left:-30px; }

    .data > .row > .col.name { width:50%; }
    .data > .row > .col.date { width:30%; }
    .data > .row > .col.signup { width:20%; }
}
@media screen and (max-width: 799px) {
    body { font-size:16px; }

    div.navigation { font-size:0.7em; }
    .input.focus[data-help]:before { padding:10px; font-size:0.7em; }
}
@media screen and (max-width: 699px) {
    body { font-size:15px; }

    div.logo { width:40px; height:40px; }

    div.navigation { top:0; right:0; }
    div.navigation:not(.shown) { cursor:pointer; }
    div.navigation:before { position:absolute; cursor:pointer; top:5px; right:5px; content:"☰"; display:block; font-size:20px; text-align:center; line-height:28px; width:30px; height:30px; border:0px solid var(--color-accent); color:var(--color-accent); }
    div.navigation:hover:before { border-color:var(--color-primary); color:var(--color-primary); }
    div.navigation:not(.shown) > * { display:none !important; }

    div.navigation.shown { position:fixed; z-index:999; top:0; left:0; right:0; bottom:0; background-color:var(--color-accent); color:var(--color-light); }
    div.navigation.shown:before { content:"×"; font-size:40px; color:inherit; }
    div.navigation.shown:hover:before { color:inherit; }
    div.navigation.shown ul { margin-top:60px; }
    div.navigation.shown ul li  { float:none; margin:15px; text-align:center; font-size:2em; }
    div.navigation.shown ul li a:hover { color:var(--color-primary); }

    div.wrapper div.left,
    div.wrapper div.right { position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; float:none!important; width:auto!important; max-width:100%!important; }

    div.wrapper div.content,
    div.wrapper div.content.narrow { padding-top:70px; padding-bottom:70px; padding-left:60px; padding-right:25px; }
    /* marketing rhythm on mobile: keep the bottom padding (75px) above the
       70px arrow pull-up so the triangle never overlaps the section above,
       while trimming the top padding for a consistent ~125px section gap. */
    body.marketing div.wrapper div.content { padding-top:50px; padding-bottom:75px; }
    body.marketing div.navigation + div.wrapper div.content { padding-top:70px; }
    body.marketing div.wrapper.arrow div.content { padding-top:30px; }
    div.wrapper div.left:not(.light) + div.right:not(.light) div.content,
    div.wrapper div.left.light + div.right.light div.content { padding-top:0; }
    /* keep the CTA→Kontakt footer gap tight on mobile too */
    div.wrapper.color:has(+ div.wrapper.color) div.content { padding-bottom:15px; }
    div.wrapper.color + div.wrapper.color div.content { padding-top:20px; }
    div.wrapper div.left div.content,
    div.wrapper div.right div.content { padding-left:60px; padding-right:25px; }

    div.block div.block div.left,
    div.block div.block div.right { margin:0; width:auto; overflow:hidden; margin-top:1em; }
    div.block div.block { margin:0; }

    div.wrapper > div.light + div.background { display:none; }
    div.wrapper > div.left.columnonly + div.right.light + div.background { display:block; left:0; width:100%; }

    .input > span:not([class]),
    .input > span[class=""],
    .input > span[class="shown"] { position:inherit; left:auto; padding-right:10px; }
    .input > span[class="shown"] { display:inline !important; }

    .button { font-size:0.9em; padding:24px; padding-top:12px; padding-bottom:12px; }

    .columnonly { display:none!important; }
}

@media screen and (max-width: 599px) {
    div.wrapper div.content > div.main { padding-right:160px; }
    div.wrapper div.content > div.main > div.service,
    div.wrapper div.content.narrow > div.service { width:140px; }
}

@media screen and (max-width: 499px) {
    h1 { font-size:2em; }

    div.wrapper div.content > div.main .input.main { width:auto; }

    div.wrapper div.content > div.main { padding-right:0; }
    div.wrapper div.content > div.main > div.service,
    div.wrapper div.content.narrow > div.service { position:relative; width:auto; margin-top:60px; }

    div.wrapper div.block.left img,
    div.wrapper div.block.right img  { float:none; width:90%; margin:auto; margin-top:3em; margin-bottom:2em; }
    div.wrapper div.block.left img + *,
    div.wrapper div.block.right img + * { float:none; width:auto; }

    .subtitle,
    div.wrapper div.content > div.main .input.main,
    div.wrapper div.content > div.main .dashboard-list-search { width:100%; }
}
@media screen and (max-width: 399px) {
    h1 { font-size:1.7em; }

    .data > .row > .col.name { width:70%; }
    .data > .row > .col.date { display:none; }
    .data > .row > .col.signup { width:30%; }
}

@media screen and (min-width: 500px) {
    .mobileonly { display:none!important; }
}
@media screen and (max-width: 499px) {
    .desktoponly { display:none!important; }
}

.color-input { width:180px; height:40px; padding:6px; border:1px solid var(--color-muted); background-color:var(--color-white); box-sizing:border-box; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
.color-input::-webkit-color-swatch-wrapper { padding:0; }
.color-input::-webkit-color-swatch { border:0; border-radius:0; }
.color-input::-moz-color-swatch { border:0; border-radius:0; }

.color-swatch { display:inline-flex; width:40px; height:40px; padding:6px; border:1px solid var(--color-muted); border-radius:50%; box-sizing:border-box; }
.color-swatch > span { display:block; width:100%; height:100%; border-radius:50%; }

.cropper-overlay { position:fixed; inset:0; background:rgba(255,255,255,0.85); display:none; align-items:center; justify-content:center; z-index:9999; }
.cropper-overlay.open { display:flex; }
.cropper-overlay > .cropper-panel { background:var(--color-white); padding:20px; max-width:95vw; max-height:95vh; overflow:auto; }

.pdf-export-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:9999; }
.pdf-export-overlay.open { display:flex; }
.pdf-export-overlay > .pdf-export-panel { position:relative; background:var(--color-white); padding:24px; width:100%; max-width:520px; max-height:95vh; overflow:auto; box-shadow:0 4px 24px rgba(0,0,0,0.2); box-sizing:border-box; }
.pdf-export-overlay .pdf-export-close { position:absolute; top:8px; right:8px; width:32px; height:32px; background:transparent; border:none; font-size:24px; line-height:1; color:var(--color-grey-dark); cursor:pointer; padding:0; }
.pdf-export-overlay .pdf-export-close:hover { color:var(--color-black); }
.pdf-export-overlay .pdf-export-title { margin:0 0 16px 0; font-size:18px; padding-right:32px; }
.pdf-export-overlay .pdf-export-description { color:var(--color-grey-dark); font-size:0.9em; line-height:1.4; margin:4px 0 16px; }
.pdf-export-overlay .pdf-export-search { margin-bottom:12px; }
.pdf-export-overlay .pdf-export-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pdf-export-overlay .pdf-export-suggestions[hidden] { display:none; }
.pdf-export-overlay .pdf-export-suggestion { flex:1 1 auto; min-width:0; padding:8px 12px; background:var(--color-white); border:1px solid var(--color-muted); color:var(--color-grey-darker); font-size:13px; cursor:pointer; text-align:left; word-break:break-word; }
.pdf-export-overlay .pdf-export-suggestion:hover { border-color:var(--color-grey-dark); }
.pdf-export-overlay .pdf-export-suggestion.selected { background:var(--color-secondary); border-color:var(--color-secondary); color:var(--color-light); }
.pdf-export-overlay .pdf-export-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pdf-export-overlay .pdf-export-qr-input { margin:0; flex:0 0 auto; font-size:0.75em; }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox] + label { margin-top:0; border:0; border-radius:0; padding:0 0 0 1.6em; line-height:1.2em; text-align:left; min-height:1.2em; }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox] + label:before { display:block; content:""; font-family:Arial; font-size:0.8em; line-height:1.5em; text-align:center; position:absolute; top:0; left:0; width:1.5em; height:1.5em; border-radius:50%; background-color:var(--color-muted); opacity:1; }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox] + label:hover:before { background-color:var(--color-muted); }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox]:checked + label:before { content:"✓"; color:var(--color-light); background-color:var(--color-accent); opacity:1; }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox]:disabled + label { color:var(--color-grey); opacity:0.5; cursor:not-allowed; }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox]:disabled + label:before { background-color:var(--color-muted); }
body.dark div.wrapper > div:not(.light) .pdf-export-overlay .pdf-export-qr-input input[type=checkbox] + label:hover:before { background-color:var(--color-muted); }
body.dark div.wrapper > div:not(.light) .pdf-export-overlay .pdf-export-qr-input input[type=checkbox]:checked + label:hover:before { background-color:var(--color-accent); }
.pdf-export-overlay .pdf-export-qr-input input[type=checkbox] + label { color:var(--color-primary); }
body.dark div.wrapper > div:not(.light) .pdf-export-overlay .pdf-export-qr-input input[type=checkbox] + label { color:var(--color-light); }
body.dark div.wrapper > div:not(.light) .pdf-export-overlay .pdf-export-qr-input input[type=checkbox]:disabled + label { color:var(--color-grey); }
body.dark div.wrapper > div:not(.light) .pdf-export-overlay .pdf-export-qr-input input[type=checkbox]:disabled + label:before { background-color:var(--color-grey-darker); }

div.left > div.content > h1 { white-space:normal; overflow-wrap:break-word; word-wrap:normal; hyphens:auto; }

/* invalid fields after a submit attempt */
/* default: brand red; customised sites get a dedicated, separately customisable error red */
body { --error-color:var(--color-accent); }
body.custom-colors { --error-color:var(--color-alert); }

form.submitted .input input[type=text][data-required-submit=true],
form.submitted .input input[type=email][data-required-submit=true],
form.submitted .input input[type=date][data-required-submit=true],
form.submitted .input input[type=datetime-local][data-required-submit=true],
form.submitted .input select[data-required-submit=true],
form.submitted .input textarea[data-required-submit=true],
form.submitted .input input[type=text][data-valid=false],
form.submitted .input input[type=email][data-valid=false] { border-color:var(--error-color); }
form.submitted .input input[type=radio][data-required-submit=true] + label,
form.submitted .input input[type=checkbox][data-required-submit=true] + label { border-color:var(--error-color); color:var(--error-color); }
form.submitted .input select[data-required-submit=true] { color:var(--error-color); }

body.dark div.wrapper > div:not(.light) form.submitted .input input[type=text][data-required-submit=true],
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=email][data-required-submit=true],
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=date][data-required-submit=true],
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=datetime-local][data-required-submit=true],
body.dark div.wrapper > div:not(.light) form.submitted .input select[data-required-submit=true],
body.dark div.wrapper > div:not(.light) form.submitted .input textarea[data-required-submit=true],
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=text][data-valid=false],
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=email][data-valid=false] { border-color:var(--error-color); }
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=radio][data-required-submit=true] + label,
body.dark div.wrapper > div:not(.light) form.submitted .input input[type=checkbox][data-required-submit=true] + label { border-color:var(--error-color); color:var(--error-color); }
body.dark div.wrapper > div:not(.light) form.submitted .input select[data-required-submit=true] { color:var(--error-color); }

form.submitted .input.error { color:var(--error-color); }
body.dark div.wrapper > div:not(.light) form.submitted .input.error { color:var(--error-color); }

form p.error { color:var(--error-color); margin:0 0 1.5em 0; }
body.dark div.wrapper > div:not(.light) form p.error { color:var(--error-color); }
form .cf-turnstile.is-visible { margin:1.5em 0; }
.turnstile-overlay { position:fixed; top:0; right:0; bottom:0; left:0; z-index:10000; background:transparent; cursor:progress; visibility:hidden; }
.turnstile-overlay.is-active { visibility:visible; }
.turnstile-overlay-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* while checking, every field looks unfocused (mirrors the non-.focus .input rules) and the submit button takes the idle field colour (muted / dark: secondary) at full opacity */
form.is-checking .input.focus,
form.is-checking .input.focus .input { color:var(--color-muted); }
form.is-checking .input.focus input[type=text],
form.is-checking .input.focus input[type=email],
form.is-checking .input.focus input[type=date],
form.is-checking .input.focus input[type=datetime-local],
form.is-checking .input.focus select,
form.is-checking .input.focus textarea { border-color:var(--color-muted); }
form.is-checking .input.focus input[type=checkbox] + label,
form.is-checking .input.focus input[type=radio] + label { border-color:var(--color-muted); }
form.is-checking .input.focus input[type=checkbox]:checked + label:before,
form.is-checking .input.focus input[type=radio]:checked + label:before { opacity:0.5; }
form.is-checking .input.focus ::placeholder { opacity:0.5; }
form.is-checking .input.focus ::-webkit-input-placeholder { opacity:0.5; }
form.is-checking .input.focus :-ms-input-placeholder { opacity:0.5; }
form.is-checking .input.focus[data-help]:before,
form.is-checking .input.focus[data-help]:after { display:none; }
form.is-checking input[type=submit],
form.is-checking button,
form.is-checking input[type=submit]:hover,
form.is-checking button:hover { background-color:var(--color-muted); border-color:var(--color-muted); color:var(--color-primary); opacity:1; }
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus { color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus input[type=text],
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus input[type=email],
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus input[type=date],
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus input[type=datetime-local],
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus select,
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus textarea { border-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus input[type=checkbox] + label,
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus input[type=radio] + label { border-color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus ::placeholder,
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus ::-webkit-input-placeholder,
body.dark div.wrapper > div:not(.light) form.is-checking .input.focus :-ms-input-placeholder { opacity:0.5; }
body.dark div.wrapper > div:not(.light) form.is-checking input[type=submit],
body.dark div.wrapper > div:not(.light) form.is-checking button,
body.dark div.wrapper > div:not(.light) form.is-checking input[type=submit]:hover,
body.dark div.wrapper > div:not(.light) form.is-checking button:hover { background-color:var(--color-secondary); border-color:var(--color-secondary); color:var(--color-light); }

/* ============================================================
   Marketing / landing components  (Wave 1 foundation)
   Reusable classes shared by the public landing (pages/home.php)
   and the Wave 2 deep-dive pages (pages/einlass.php,
   pages/auswertung.php). Wave 2 should CONSUME these as-is and
   must NOT edit this block to add page-specific styles.

   Class-name contract for Wave 2:
     .marketing-hero                  hero copy block (home)
     .deepdive-hero                   centered hero band for a deep-dive page
     .deepdive-section                generic deep-dive content section
     .callout                         highlighted call-to-action box (accent bg)
     .more-link                       inline "Mehr erfahren →" link
     .spotlight                       centered single-message band (on .wrapper.color)
     .feature-grid                    responsive grid of feature cards
     .feature-card                    one feature (strong title + span description)
     .faq / .faq-item                 question / answer list
   These layouts rely only on the existing .wrapper/.content shells,
   so the deep-dive pages can drop them straight into the same
   wrapper structure used here.
   ============================================================ */

/* hero ------------------------------------------------------ */
.marketing-hero p,
.deepdive-hero p { font-size:0.9em; line-height:1.4em; }
.deepdive-hero { text-align:center; }
.deepdive-hero p { max-width:800px; margin-left:auto; margin-right:auto; }
.deepdive-section { position:relative; }
.deepdive-illustration { display:block; width:62%; max-width:420px; height:auto; margin:0 auto 1.5em; }

.more-link { display:inline-block; margin-top:0.75em; font-weight:bold; color:var(--color-accent); text-decoration:none; }
.more-link:after { content:" \2192"; white-space:nowrap; }
.more-link:hover { color:var(--color-secondary); }
body.dark div.wrapper > div:not(.light) .more-link:hover { color:var(--color-light); }
/* use-case band: double the gap between the vignette grid and its "more" link */
.usecase-vignettes + .more-link { margin-top:1.5em; }
/* hero: keep submit button + secondary link on one row, vertically centered, link smaller */
.marketing-hero form input[type=submit].button { vertical-align:middle; }
.marketing-hero form .more-link { margin-top:0; margin-left:1em; vertical-align:middle; font-size:0.85em; }

/* spotlight ------------------------------------------------- */
.spotlight { max-width:900px; margin-left:auto; margin-right:auto; }
.spotlight h2 { color:var(--color-light); }
.spotlight p { font-size:0.9em; line-height:1.4em; }
body.dark .spotlight h2 { color:var(--color-accent); }

/* CTA spotlight → Kontakt footer ----------------------------
   The sub-pages end with a dark CTA band (.wrapper.color) that index.php
   immediately follows with the dark Kontakt footer (also .wrapper.color).
   Both .content blocks carry the default 150px/100px vertical padding, so
   ~250px of empty dark space stacked between them. Collapse that gap so the
   two bands read as one continuous footer. Scoped strictly to the
   color→color adjacency, so mid-page color bands (followed by a light band)
   and the home footer (preceded by the light FAQ band) keep normal spacing. */
div.wrapper.color:has(+ div.wrapper.color) div.content { padding-bottom:20px; }
div.wrapper.color + div.wrapper.color div.content { padding-top:30px; }

/* Centre the Kontakt footer content in the same 900px column as the CTA
   spotlight above it, so the merged block is centered identically. */
.content.kontakt { max-width:900px; margin-left:auto; margin-right:auto; }

/* feature grid ---------------------------------------------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
/* per-section column overrides (default stays 3-up) */
.feature-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.feature-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.feature-card { background-color:var(--color-white); padding:30px; box-sizing:border-box; }
.feature-card strong, .feature-card h3 { display:block; color:var(--color-accent); font-size:1em; line-height:1.2em; margin:0 0 0.4em; }
.feature-card span { display:block; font-size:0.8em; line-height:1.35em; }
body.dark .feature-card { background-color:var(--color-primary); }
body.dark .feature-card span { color:var(--color-light); }

/* callout (centered marketing highlight) -------------------- */
.callout { max-width:720px; margin-left:auto; margin-right:auto; padding:0; text-align:center; }
.callout:before { content:""; display:block; width:48px; height:3px; margin:0 auto 1.5em; background-color:var(--color-accent); }
.callout h2,
.callout h3 { color:var(--color-accent); font-size:2em; line-height:1.1em; margin-top:0; margin-bottom:0.5em; }
.callout p { max-width:600px; margin:0 auto; font-size:0.9em; line-height:1.5em; }
.callout .more-link { margin-top:1.5em; }
body.dark .callout p { color:var(--color-primary); }

/* faq ------------------------------------------------------- */
.faq { max-width:900px; margin-left:auto; margin-right:auto; text-align:left; }
.faq-item { padding:30px 0; border-top:1px solid var(--color-muted); }
.faq-item:first-child { border-top:0; padding-top:0; }
.faq-item:last-child { padding-bottom:0; }
.faq-item strong, .faq-item h3 { display:block; color:var(--color-accent); font-size:1em; line-height:1.2em; margin:0 0 0.4em; }
.faq-item p { margin:0; font-size:0.85em; line-height:1.4em; }

/* responsive ------------------------------------------------ */
@media screen and (max-width: 899px) {
    .feature-grid { grid-template-columns:repeat(2,1fr); }
    /* cols-4 steps down to 2-up (cols-2 stays 2-up at this width) */
    .feature-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width: 699px) {
    .feature-grid { grid-template-columns:1fr; }
    .feature-grid.cols-2,
    .feature-grid.cols-4 { grid-template-columns:1fr; }
    .feature-card { padding:24px; }
    .callout h2,
    .callout h3 { font-size:1.6em; }
}

/* ============================================================
   PRICING REDESIGN + USE-CASES BAND  (Wave 2)
   Appended below the Wave 1 contract block on purpose; uses
   its own .pricing-* / .usecase-* class names so the Wave 1
   block above stays untouched. Light is the default; dark
   mode mirrors the .feature-card approach (body.dark).
   ============================================================ */

/* free-trial banner ---------------------------------------- */
.pricing-trial { max-width:760px; margin:0 auto 60px; padding:40px; background-color:var(--color-primary); color:var(--color-light); text-align:center; }
.pricing-trial h3 { color:var(--color-light); }
.pricing-trial strong { display:block; color:var(--color-light); font-size:1.1em; line-height:1.1em; margin-bottom:0.4em; }
.pricing-trial p { margin:0 auto; max-width:620px; }
.pricing-trial-meta { margin-top:1.3em; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:0.7em; font-weight:bold; }
.pricing-trial-meta span { position:relative; padding-left:1.4em; }
.pricing-trial-meta span:before { content:"\2713"; position:absolute; left:0; color:var(--color-accent); }

/* pay-as-you-go lead --------------------------------------- */
.pricing-lead { max-width:760px; margin:0 auto 50px; font-size:0.9em; line-height:1.4em; }
.pricing-lead strong { color:var(--color-accent); }

/* package recommender -------------------------------------- */
.pricing-reco { max-width:900px; margin:0 auto 44px; padding:28px 30px; box-sizing:border-box; background-color:var(--color-white); border:none; text-align:center; }
body.dark .pricing-reco { background-color:var(--color-primary); }
.pricing-reco-title { margin:0 0 1em; font-weight:bold; font-size:0.95em; }
.pricing-reco-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:left; }
.pricing-reco-fields label { display:flex; flex-direction:column; justify-content:flex-end; gap:0.45em; font-size:0.62em; font-weight:bold; }
.pricing-reco-fields label > span { flex:1 0 auto; }
.pricing-reco-fields input, .pricing-reco-fields select { box-sizing:border-box; width:100%; padding:0.7em 0.8em; font-size:1.4em; background-color:var(--color-light); color:var(--color-primary); border:1px solid var(--color-muted); border-radius:0; }
body.dark .pricing-reco-fields input, body.dark .pricing-reco-fields select { background-color:var(--color-secondary); color:var(--color-light); border-color:var(--color-secondary); }
.pricing-reco-fields input:focus, .pricing-reco-fields select:focus { outline:2px solid var(--color-accent); outline-offset:1px; }
.pricing-reco-fields select { -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:2.2em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2318315a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.9em center; background-size:0.6em; }
body.dark .pricing-reco-fields select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23faf8f9' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); }
/* jumps to the recommended card – only useful when cards are stacked (shown via media query below) */
.reco-show-result { display:none; margin:1.4em 0 0; }

/* 3-tier plan cards ---------------------------------------- */
.tier-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; text-align:left; align-items:stretch; }
.tier-card { position:relative; display:flex; flex-direction:column; min-width:0; box-sizing:border-box; padding:34px 28px; background-color:var(--color-white); color:var(--color-primary); border:1px solid var(--color-muted); }
body.dark .tier-card { background-color:var(--color-primary); color:var(--color-light); border-color:var(--color-secondary); }
/* dynamic "recommended for you" highlight (driven by the recommender) */
.tier-reco-badge { display:none; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); padding:0.4em 1em; font-size:0.5em; font-weight:bold; line-height:1.1em; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; background-color:var(--color-primary); color:var(--color-light); }
body.dark .tier-reco-badge { background-color:var(--color-light); color:var(--color-primary); }
.tier-card.recommended { border-color:var(--color-accent); border-width:2px; padding:33px 27px; }
.tier-card.recommended .tier-reco-badge { display:block; }

.tier-name { display:block; font-size:1em; font-weight:bold; text-transform:uppercase; letter-spacing:0.05em; }
.tier-billing-pill { display:inline-block; margin-top:0.55em; padding:0.35em 0.8em; font-size:0.5em; font-weight:bold; line-height:1.1em; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; border-radius:999px; }
.tier-billing-once { background-color:var(--color-beige); color:var(--color-primary); }
.tier-billing-annual { background-color:var(--color-accent); color:var(--color-light); }
.tier-tagline { display:block; margin-top:0.4em; font-size:0.66em; line-height:1.4em; opacity:0.75; min-height:2.8em; }

/* dynamic headline (the selected package's TOTAL price) */
.tier-price-block { min-width:0; margin:1.2em 0 1.1em; }
/* one fixed size, chosen so the longest possible string ("9.999,99 Euro" / "Auf Anfrage")
   fits the narrowest side-by-side card – stays constant while sliding (no font jump). */
.tier-price { min-width:0; max-width:100%; font-size:1.5em; font-weight:bold; line-height:1.05em; color:var(--color-accent); white-space:nowrap; }
.tier-price-star { font-size:0.5em; vertical-align:super; color:var(--color-accent); }
.tier-price-note { display:block; margin-top:0.45em; font-size:0.58em; font-weight:bold; text-transform:uppercase; letter-spacing:0.04em; opacity:0.65; }

/* in-card selector — package slider */
.tier-selector { margin:0 0 1.3em; }
.tier-pkg { display:none; }
.tier-slider { -webkit-appearance:none; appearance:none; display:block; width:100%; height:6px; margin:0.2em 0 0.5em; background-color:var(--color-muted); border:none; border-radius:3px; outline:none; cursor:pointer; }
body.dark .tier-slider { background-color:var(--color-secondary); }
.tier-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background-color:var(--color-accent); border:2px solid var(--color-white); cursor:pointer; }
body.dark .tier-slider::-webkit-slider-thumb { border-color:var(--color-primary); }
.tier-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background-color:var(--color-accent); border:2px solid var(--color-white); cursor:pointer; }
body.dark .tier-slider::-moz-range-thumb { border-color:var(--color-primary); }
.tier-slider::-moz-range-track { height:6px; background-color:var(--color-muted); border-radius:3px; }
body.dark .tier-slider::-moz-range-track { background-color:var(--color-secondary); }
.tier-slider:focus-visible::-webkit-slider-thumb { outline:2px solid var(--color-accent); outline-offset:2px; }
.tier-slider:focus-visible::-moz-range-thumb { outline:2px solid var(--color-accent); outline-offset:2px; }
.tier-slider-scale { display:flex; justify-content:space-between; font-size:0.55em; font-weight:bold; opacity:0.6; }

.tier-cta { display:block; text-align:center; }
.tier-cta-note { display:block; margin-top:0.7em; text-align:center; font-size:0.55em; font-weight:bold; text-transform:uppercase; letter-spacing:0.04em; opacity:0.6; }

/* incremental feature list */
.tier-features { list-style:none; margin:1.7em 0 0; padding:0; font-size:0.62em; line-height:1.4em; }
.tier-features li { position:relative; padding:0.4em 0 0.4em 1.5em; }
.tier-features li:before { content:"\2713"; position:absolute; left:0; top:0.4em; color:var(--color-accent); font-weight:bold; }
.tier-features-intro { font-weight:bold; opacity:0.8; }
.tier-features-intro:before { content:none; }
.tier-feature-help { display:inline-flex; align-items:center; justify-content:center; width:1.3em; height:1.3em; margin-left:0.35em; font-size:0.85em; font-weight:bold; line-height:1; text-decoration:none; vertical-align:middle; color:var(--color-light); background-color:var(--color-accent); border-radius:50%; opacity:0.85; }
.tier-feature-help:hover, .tier-feature-help:focus { opacity:1; color:var(--color-white); background-color:var(--color-primary); }

.pricing-allfeatures { margin-top:2em; }

/* use-cases band ------------------------------------------- */
.usecase-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:900px; margin:0 auto; }
.usecase-chip { padding:0.55em 1.1em; font-size:0.6em; font-weight:bold; line-height:1.1em; border:2px solid var(--color-accent); color:var(--color-accent); border-radius:1.5em; }
.usecase-proof { max-width:760px; margin:2em auto 0; font-weight:bold; }
.usecase-vignettes { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:900px; margin:50px auto 0; text-align:left; }
.usecase-vignette { padding:30px; border:1px solid var(--color-muted); border-left:4px solid var(--color-accent); background-color:var(--color-white); }
body.dark .usecase-vignette { background-color:var(--color-primary); border-color:var(--color-secondary); border-left-color:var(--color-accent); }
.usecase-vignette > strong, .usecase-vignette > h3 { display:block; color:inherit; font-size:1em; line-height:1.2em; margin:0 0 0.4em; }
.usecase-vignette p { margin:0; font-size:0.8em; line-height:1.45em; font-style:italic; }
body.dark .usecase-vignette p { color:var(--color-light); }
.usage-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:60px; max-width:760px; margin:2em auto 0; }
.usage-stat { display:flex; flex-direction:column; align-items:center; }
.usage-stat-figure { font-size:2.75em; font-weight:bold; line-height:1em; color:var(--color-accent); }
.usage-stat-label { margin-top:0.25em; font-size:0.7em; font-weight:bold; color:var(--color-grey); text-transform:uppercase; letter-spacing:0.05em; }
body.dark .usage-stat-label { color:var(--color-muted); }

/* responsive ----------------------------------------------- */
@media screen and (max-width: 1199px) {
    /* stack the cards before they get cramped, and surface the jump-to-recommendation button */
    .tier-cards { grid-template-columns:1fr; max-width:480px; }
    .reco-show-result { display:inline-block; }
}
@media screen and (max-width: 699px) {
    .pricing-reco-fields { grid-template-columns:1fr; }
}
@media screen and (max-width: 899px) {
    .usecase-vignettes { grid-template-columns:1fr; }
}
@media screen and (max-width: 479px) {
    .usage-stats { flex-direction:column; gap:30px; }
}
@media screen and (max-width: 699px) {
    .pricing-trial { padding:30px; }
    .deepdive-illustration { width:80%; }
}

/* ============================================================
   CONTENT SLIDER  (shared component)
   jQuery-driven carousel reused across marketing pages: the
   analytics "Was Sie wirklich über Ihr Publikum erfahren" section
   and the use-cases "So könnte Ihr Event aussehen" scenarios.
   One item per slide: placeholder image + title + text, prev/next
   arrows + dots. Uses the existing --color-* tokens; mirrors the
   .feature-card light/dark treatment. The JS (includes/js/functions.js)
   iterates every .content-slider, toggles .is-active on slides and
   dots and sets the track transform.
   ============================================================ */

/* accessible-only helper (no sr-only util existed in this file) */
.analytics-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.content-slider { max-width:1000px; margin:0 auto; text-align:left; }
.content-slider-viewport { overflow:hidden; }
/* the track lays all slides in one row; JS shifts it by -index*100% */
.content-slider-track { display:flex; transition:transform 0.45s ease; will-change:transform; }
/* slide is a flex parent so its card stretches to the row's equalised height */
.content-slide { flex:0 0 100%; min-width:0; display:flex; box-sizing:border-box; }

/* one slide = a white card, image beside the copy (stacks on mobile).
   flex:1 makes the card fill the slide, which the track stretches to the
   tallest slide — so every card renders at the same height (no jump). */
.content-slide-card { display:grid; grid-template-columns:42% 1fr; gap:40px; align-items:center; box-sizing:border-box; flex:1; min-width:0; min-height:340px; padding:40px; background-color:var(--color-white); color:var(--color-primary); }
body.dark .content-slide-card { background-color:var(--color-primary); color:var(--color-light); }

/* image box: fixed 4:3 frame so every illustration sits in an equally-sized
   box regardless of its native aspect; object-fit:contain letterboxes them */
.content-slide-figure { position:relative; margin:0; display:flex; align-items:center; justify-content:center; aspect-ratio:4 / 3; padding:24px; box-sizing:border-box; background-color:var(--color-light); border:1px solid var(--color-muted); }
body.dark .content-slide-figure { background-color:var(--color-secondary); border-color:var(--color-secondary); }
.content-slide-figure img { display:block; width:100%; height:100%; max-width:420px; object-fit:contain; }

.content-slide-body strong, .content-slide-body h3 { display:block; color:var(--color-accent); font-size:1.15em; line-height:1.1em; margin:0 0 0.5em; }
.content-slide-body span { display:block; font-size:0.8em; line-height:1.4em; }
body.dark .content-slide-body span { color:var(--color-light); }

/* controls row: prev | dots | next */
.content-slider-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:30px; }
.content-slider-arrow { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; padding:0; font-size:1.4em; line-height:1; cursor:pointer; color:var(--color-light); background-color:var(--color-primary); border:0; border-radius:50%; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:background-color 0.2s ease; }
.content-slider-arrow span { display:block; margin-top:-0.12em; }
.content-slider-arrow:hover { background-color:var(--color-accent); }
.content-slider-arrow:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
body.dark .content-slider-arrow { background-color:var(--color-light); color:var(--color-primary); }
body.dark .content-slider-arrow:hover { background-color:var(--color-accent); color:var(--color-light); }

.content-slider-dots { display:flex; align-items:center; gap:14px; }
/* active dot differs by SIZE + ring as well as colour (not colour alone) */
.content-slider-dot { width:14px; height:14px; padding:0; cursor:pointer; background-color:var(--color-muted); border:0; border-radius:50%; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:background-color 0.2s ease, transform 0.2s ease; }
.content-slider-dot:hover { background-color:var(--color-secondary); }
.content-slider-dot:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.content-slider-dot.is-active { background-color:var(--color-accent); transform:scale(1.35); }

/* responsive: stack image over copy, shrink controls slightly */
@media screen and (max-width: 799px) {
    .content-slide-card { grid-template-columns:1fr; gap:24px; min-height:0; padding:30px; }
    .content-slide-figure img { max-width:320px; }
}
@media screen and (max-width: 499px) {
    .content-slide-card { padding:24px; }
    .content-slider-controls { gap:16px; }
    .content-slider-arrow { width:48px; height:48px; }
}

/* reduced motion: no sliding animation, no transforms-as-motion */
@media (prefers-reduced-motion: reduce) {
    .content-slider-track { transition:none; }
    .content-slider-arrow,
    .content-slider-dot { transition:none; }
}