.xcmsCanvas .xelement {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

/* Pointer assigned to all elements with onclick */
.click-pointer {
    cursor: pointer;
}

.xcmsCanvas .xbutton {
    margin-top: 20px;
    cursor: pointer;
}

/* The Magnibiz button look (#109), chosen per button in the creator: a pill in the tenant's Continue colour (variables
   from the theme css), Magnibiz blue without one. Beats the tenant's Button style (.xcmsCanvas button). */
.xcmsCanvas .xbutton.xbutton--mb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--xcms-mb-btn-bg, #153741);
    color: var(--xcms-mb-btn-text, #fff);
    font: 500 1rem/1 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.xcmsCanvas .xbutton.xbutton--mb:hover {
    filter: none;
    opacity: 0.9;
}

/* Images */
.ximage>img {
    width: 100%;
}

/* Videos: the player keeps its own proportions (vjs-fluid); a border radius set on the block rounds the player */
.xcmsCanvas .xvideo > .xecontent {
    border-radius: inherit;
    overflow: hidden;
}

/* Audio */
audio {
    width: 70%;
}

/* Text default styles */
.xtext {
    margin-left: 10px;
    margin-right: 10px;
}

.xtext p {
    margin-bottom: 0;
}

.xtext blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

/* Citat (#113 stage 2b): a large quote with an accent line in the chosen colour (--xquote-accent on the block, Magnibiz
   gold without one), the name under it and an optional small round photo beside the name */
.xcmsCanvas .xquote .xquote-inner {
    margin: 0;
    padding-left: 1.25rem;
    border-left: 4px solid var(--xquote-accent, #CFAE78);
}

.xcmsCanvas .xquote .xquote-text {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.4;
}

.xcmsCanvas .xquote .xquote-by {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.xcmsCanvas .xquote .xquote-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.xcmsCanvas .xquote .xquote-name::before {
    content: "— ";
}

/* Text alignment */
.xtext .ql-align-right {
    text-align: right;
}

.xtext .ql-align-center {
    text-align: center;
}

.xtext .ql-align-justify {
    text-align: justify;
}

/* Signup forms (server components, e.g. contact_signup_form, user_signup_form): the gap below that new blocks get
   from the editor (#113), which can't write a style on a form (it is stored as a bare template tag). Like other
   blocks the form has no room above it (its templates): the block before gives the gap. */
.xcmsCanvas .xscomponent {
    margin-bottom: 1rem;
}

/* The same 1rem above a form that follows another block, for pages made before #113: their forms lost their own top
   margin (mt-3), so old text with no margin of its own sat right on the label. Where the block before already has a
   1rem bottom margin the two collapse (still 1rem); the first block in a section gets nothing. */
.xcmsCanvas * + .xscomponent {
    margin-top: 1rem;
}

/* The 2b/2c components' hints in the editor ("Vælg en kalender") and notes */
.xcmsCanvas .xblock-note {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* XCONTAINER */
.xcontainer {
    padding: 0px;
    position: relative;
}

/* Border for empty containers and make them bigger so they are visible, only in the creator: students and
   visitors see nothing where a tenant left a section empty (#111) */
.canvasBackground .xcontainer:empty {
    border: dashed 1px;
    border-color: #e0e0e0;
    padding-bottom: 50px;
}


/* Element positions */
.xpos-fluid {
    display: grid;
}

.xpos-left {
    display: flex;
    justify-content: left;
}

.xpos-center {
    display: flex;
    justify-content: center;
}

.xpos-right {
    display: flex;
    justify-content: right;
}

/* File thumbnails */
.xelement .thumbnail-none {}

.xelement .thumbnail-icon {}

.xelement .thumbnail-small {
    width: 80px !important;
    /* height: 100px; */
}

.xelement .thumbnail-medium {
    width: 200px !important;
    /* height: 100px; */
}

.thumbnail-large {
    width: 400px !important;
    /* height: 100px; */
}

/* =====================================================================
   LESSON BLOCKS (.lb-*) — the Forbind cards (#113 stage 2c, docs/design/creator/lektionsblokke.html). Only Magnibiz
   tokens, so each tenant's colours and heading font apply; scoped to .xcmsCanvas to beat the tenant's content styles.
   ===================================================================== */
.xcmsCanvas .lb{background:var(--mb-surface);border-radius:var(--mb-r-lg);padding:20px;display:grid;gap:14px;min-width:0;color:var(--mb-text)}
.xcmsCanvas .lb-eyebrow{display:flex;align-items:center;gap:8px;font:600 12px var(--mb-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mb-accent-ink)}
.xcmsCanvas .lb-eyebrow i{font-size:16px;width:16px;text-align:center;flex:none}
.xcmsCanvas .lb-title{font:var(--mb-head-weight) 19px/1.3 var(--mb-font-head);margin:0;color:var(--mb-text);text-wrap:balance}
.xcmsCanvas .lb-meta{font-size:14px;color:var(--mb-muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.xcmsCanvas .lb-meta span{display:inline-flex;align-items:center;gap:6px}
.xcmsCanvas .lb-meta i{font-size:15px;width:15px;text-align:center;flex:none}
.xcmsCanvas .lb-row{display:flex;gap:14px;align-items:flex-start;min-width:0}
.xcmsCanvas .lb-row>.lb-body{flex:1;min-width:0;display:grid;gap:4px}
.xcmsCanvas .lb-actions{display:flex;flex-wrap:wrap;gap:8px}
.xcmsCanvas .lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--mb-r-pill);border:0;background:var(--mb-ink);color:var(--mb-on-ink);font:600 15px var(--mb-font-body);text-decoration:none;cursor:pointer}
.xcmsCanvas .lb-btn:hover{background:var(--mb-ink-hover);color:var(--mb-on-ink)}
.xcmsCanvas .lb-btn i{font-size:16px}
.xcmsCanvas .lb-btn--accent{background:var(--mb-accent);color:var(--mb-on-accent)}
.xcmsCanvas .lb-btn--accent:hover{background:var(--mb-accent);color:var(--mb-on-accent);filter:brightness(.96)}
.xcmsCanvas .lb-btn--quiet{background:transparent;color:var(--mb-ink);border:1px solid var(--mb-line)}
.xcmsCanvas .lb-btn--quiet:hover{background:var(--mb-sand);color:var(--mb-ink)}
.xcmsCanvas .lb-btn[aria-disabled="true"]{opacity:.6;cursor:default}
.xcmsCanvas .lb-btn:focus-visible,.xcmsCanvas .lb a:focus-visible{outline:2px solid var(--mb-accent);outline-offset:2px}
.xcmsCanvas .lb-link{font:600 14px var(--mb-font-body);color:var(--mb-ink);text-decoration:underline;text-underline-offset:3px}
.xcmsCanvas .lb-muted{font-size:14px;color:var(--mb-muted);margin:0}
.xcmsCanvas .lb .xblock-note{margin:0}
.xcmsCanvas .lb-date{width:60px;flex:none;border-radius:var(--mb-r-md);background:var(--mb-sand);text-align:center;padding:8px 0 7px;font-variant-numeric:tabular-nums}
.xcmsCanvas .lb-date b{display:block;font:700 24px/1 var(--mb-font-head);color:var(--mb-ink)}
.xcmsCanvas .lb-date span{display:block;font:600 11px var(--mb-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mb-accent-ink);margin-top:3px}
.xcmsCanvas .lb--now{background:var(--mb-ink);color:var(--mb-on-ink)}
.xcmsCanvas .lb--now .lb-title{color:var(--mb-on-ink)}
.xcmsCanvas .lb--now .lb-meta{color:color-mix(in srgb,var(--mb-on-ink) 78%,transparent)}
.xcmsCanvas .lb--now .lb-eyebrow{color:var(--mb-accent)}
.xcmsCanvas .lb--now .lb-date{background:color-mix(in srgb,var(--mb-on-ink) 14%,transparent)}
.xcmsCanvas .lb--now .lb-date b,.xcmsCanvas .lb--now .lb-date span{color:var(--mb-on-ink)}
.xcmsCanvas .lb-pulse{width:8px;height:8px;border-radius:50%;background:var(--mb-accent);box-shadow:0 0 0 0 var(--mb-accent);animation:lbpulse 1.8s infinite}
@keyframes lbpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mb-accent) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.xcmsCanvas .lb-pulse{animation:none}}
.xcmsCanvas .lb-list{display:grid;border-top:1px solid var(--mb-line)}
.xcmsCanvas .lb-list>*{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--mb-line);font-size:14px;color:var(--mb-text);text-decoration:none}
.xcmsCanvas .lb-list>*:last-child{border-bottom:0}
.xcmsCanvas .lb-list>* span:last-child{color:var(--mb-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* the list under a starting-soon card (De næste 3): on the ink background it needs light text and lines */
.xcmsCanvas .lb--now .lb-list{border-top-color:color-mix(in srgb,var(--mb-on-ink) 22%,transparent)}
.xcmsCanvas .lb--now .lb-list>*{color:var(--mb-on-ink);border-bottom-color:color-mix(in srgb,var(--mb-on-ink) 22%,transparent)}
.xcmsCanvas .lb--now .lb-list>* span:last-child{color:color-mix(in srgb,var(--mb-on-ink) 78%,transparent)}
.xcmsCanvas .lb-dots{display:flex;gap:6px}
.xcmsCanvas .lb-dots i{width:22px;height:8px;border-radius:999px;background:var(--mb-ink)}
.xcmsCanvas .lb-dots i.used{background:var(--mb-track)}
.xcmsCanvas .lb-booked{display:flex;gap:10px;align-items:center;background:var(--mb-sand);border-radius:var(--mb-r-md);padding:10px 12px;font-size:14px}
.xcmsCanvas .lb-booked>i{font-size:16px;color:var(--mb-accent-ink);flex:none}
.xcmsCanvas .lb-av{width:44px;height:44px;border-radius:50%;background:var(--mb-sand);color:var(--mb-accent-ink);display:grid;place-items:center;font:700 14px var(--mb-font-body);flex:none;overflow:hidden}
.xcmsCanvas .lb-av img{width:100%;height:100%;object-fit:cover}
.xcmsCanvas .lb-prompt{border-left:3px solid var(--mb-accent);padding:2px 0 2px 14px;font:var(--mb-head-weight) 18px/1.35 var(--mb-font-head);color:var(--mb-text);margin:0}
.xcmsCanvas .lb-faces{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mb-muted)}
.xcmsCanvas .lb-faces .stack{display:flex}
.xcmsCanvas .lb-faces .stack span{width:28px;height:28px;border-radius:50%;border:2px solid var(--mb-surface);background:var(--mb-sand);color:var(--mb-accent-ink);display:grid;place-items:center;font:700 10px var(--mb-font-body);margin-left:-8px}
.xcmsCanvas .lb-faces .stack span:first-child{margin-left:0}
.xcmsCanvas .lb-done{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--mb-font-body);color:var(--mb-accent-ink);background:var(--mb-sand);border-radius:999px;padding:4px 10px}
.xcmsCanvas .lb-done i{font-size:14px}
.xcmsCanvas .lb-mine{background:var(--mb-bg);border-radius:var(--mb-r-md);padding:12px 14px;font-size:14px}
.xcmsCanvas .lb-mine b{display:block;font-size:13px;margin-bottom:2px}
@media (max-width:480px){.xcmsCanvas .lb{padding:16px}.xcmsCanvas .lb-actions .lb-btn{flex:1 1 100%}}
/* ===================================================================== end blocks */

/* Topbanner (#113, docs/design/creator/hero-blok.html): the tenant's tokens when the page has them (lessons, the
   editor's canvas, the theme set on the block itself), Magnibiz's otherwise. Fonts: the tenant's heading 1 and
   paragraph styles (--cs-h1-*, --cs-p-font from main.student_theme, set on the section) as on the student pages.
   Title, text and note are ".xtb .xtb-…" and reset what the content styles (".xcmsCanvas h1", ".xcmsCanvas p") set */
.xcmsCanvas .xscomponent.xtopbanner { margin: 0; }
/* The wrapper is the size container, so the narrow rules can also match the section itself */
/* clear: the size container is laid out on its own and would narrow beside a float (the managers' edit pen) */
.xscomponent.xtopbanner {
  container-type: inline-size; clear: both;
  --tb-page-font-head: var(--mb-font-head, "Montserrat", system-ui, sans-serif);
  --tb-page-font-body: var(--mb-font-body, "Figtree", system-ui, sans-serif);
}
/* --cs-*-font is '"Font", var(--mb-font-…)': web pages have no tokens, and an undefined --mb-font-… would void the
   tenant's font, so they get the page's own or Magnibiz's (a different name above: a property can't fall back to
   its own inherited value) */
.xscomponent.xtopbanner > .xecontent { --mb-font-head: var(--tb-page-font-head); --mb-font-body: var(--tb-page-font-body); }
.xtb {
  --tb-ink: var(--mb-ink, #34526b); --tb-ink-hover: var(--mb-ink-hover, #2a4458); --tb-on-ink: var(--mb-on-ink, #fff);
  /* the site's own colours only: the accent is the tenant's Continue colour (#101), as the student pages' main
     buttons, else its ink; the button on photos and the brand background is white with ink text without one */
  --tb-accent: var(--mb-continue-bg, var(--tb-ink));
  --tb-btn-accent: var(--mb-continue-bg, #fff); --tb-on-accent: var(--mb-continue-text, var(--tb-ink));
  --tb-accent-ink: color-mix(in srgb, var(--tb-accent) 72%, #000); --tb-sand: color-mix(in srgb, var(--tb-accent) 14%, #fff);
  --tb-bg: var(--mb-page-bg, var(--mb-bg, #e6e5df)); --tb-surface: var(--mb-surface, #fff);
  --tb-line: var(--mb-line, #d0cfc6); --tb-text: var(--mb-text, #0e1010); --tb-muted: var(--mb-muted, #4d575c);
  --tb-font-head: var(--cs-h1-font, var(--mb-font-head, "Montserrat", system-ui, sans-serif));
  --tb-head-weight: var(--cs-h1-weight, var(--mb-head-weight, 800)); --tb-head-tracking: var(--mb-head-tracking, -0.01em);
  --tb-font-body: var(--cs-p-font, var(--mb-font-body, "Figtree", system-ui, sans-serif));
  --tb-r-md: var(--mb-r-md, 14px); --tb-r-lg: var(--mb-r-lg, 20px); --tb-r-pill: var(--mb-r-pill, 999px);
  position: relative; background: var(--tb-bg); color: var(--tb-text); font-family: var(--tb-font-body);
  padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px); overflow: hidden;
  padding: clamp(40px, 7cqi, 88px) clamp(20px, 5cqi, 64px);
}
/* The reference's vw sizes are also given in cqi (the topbanner's own width), so the editor's Computer and Mobil views
   and narrow lesson columns size it as a page that wide would; vw stays for browsers without container units */
/* the Rul ned anchor at the bottom edge, out of the layout: as a grid item it would add a row and lift the text */
.xtb-end { position: absolute; bottom: 0; left: 0; width: 0; height: 0; }
.xtb:not(.xtb--wide) { max-width: 1320px; margin-inline: auto; border-radius: var(--tb-r-lg); }
.xtb-inner{max-width:1120px;margin-inline:auto;display:grid;gap:clamp(28px,5vw,64px);gap:clamp(28px,5cqi,64px);align-items:center}
/* Bredt indhold, as a section's container-fluid in the old creator: the content goes all the way out too, and the split
   layout's picture fills its half to the edge of the screen, top to bottom */
.xtb--wide .xtb-inner{max-width:none}
.xtb--wide.xtb--split{padding-block:0;padding-inline-end:0}
.xtb--wide.xtb--split.xtb--media-left{padding-inline-start:0;padding-inline-end:clamp(20px,5vw,64px);padding-inline-end:clamp(20px,5cqi,64px)}
.xtb--wide.xtb--split .xtb-inner{align-items:stretch}
.xtb--wide.xtb--split .xtb-copy{align-self:center;padding-block:clamp(40px,7vw,88px);padding-block:clamp(40px,7cqi,88px)}
.xtb--wide.xtb--split .xtb-media{border-radius:0;aspect-ratio:auto;min-height:min(640px,86vh)}
.xtb-copy{display:grid;gap:18px;min-width:0;max-width:600px}
.xtb-eyebrow{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:600 12px var(--tb-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--tb-accent-ink);background:var(--tb-sand);border-radius:var(--tb-r-pill);padding:6px 12px}
.xtb .xtb-title{font:var(--tb-head-weight) clamp(32px,5.2vw,58px)/1.06 var(--tb-font-head);font-size:clamp(32px,5.2cqi,58px);letter-spacing:var(--tb-head-tracking);margin:0;color:var(--tb-text);text-wrap:balance}
.xtb-title em{font-style:normal;color:var(--tb-ink);background:linear-gradient(transparent 68%,color-mix(in srgb,var(--tb-accent) 28%,transparent) 68%)}
.xtb .xtb-text{font-size:clamp(16px,1.6vw,19px);font-size:clamp(16px,1.6cqi,19px);line-height:1.6;color:var(--tb-muted);margin:0;max-width:52ch}
.xtb .xtb-note{font-size:14px;line-height:1.5;color:var(--tb-muted);margin:0}
.xtb .xtb-title,.xtb .xtb-text,.xtb .xtb-note{background:none;padding:0;border:0;border-radius:0}
.xtb .xtb-text,.xtb .xtb-note{font-family:var(--tb-font-body);font-weight:400}
.xtb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.xtb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:var(--tb-r-pill);border:0;background:var(--tb-ink);color:var(--tb-on-ink);font:600 16px var(--tb-font-body);text-decoration:none;cursor:pointer}
.xtb-btn:hover{background:var(--tb-ink-hover)}
.xtb-btn:not(.xtb-btn--quiet)::after,.xtb-fact::before{content:"";flex:none;background:currentColor;-webkit-mask:var(--tb-icon) center/contain no-repeat;mask:var(--tb-icon) center/contain no-repeat}
.xtb-btn:not(.xtb-btn--quiet)::after{width:18px;height:18px;--tb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.xtb-btn--accent{background:var(--tb-btn-accent);color:var(--tb-on-accent)}
.xtb-btn--accent:hover{background:var(--tb-btn-accent);filter:brightness(.96)}
.xtb-btn--quiet{background:transparent;color:var(--tb-ink);border:1.5px solid color-mix(in srgb,var(--tb-ink) 30%,transparent)}
.xtb-btn--quiet:hover{background:color-mix(in srgb,var(--tb-ink) 6%,transparent)}
.xtb-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:14px;color:var(--tb-muted)}
.xtb-faces{display:flex}
.xtb-faces span{width:32px;height:32px;border-radius:50%;border:2px solid var(--tb-bg);background:var(--tb-sand);color:var(--tb-accent-ink);display:grid;place-items:center;font:700 11px var(--tb-font-body);margin-left:-9px}
.xtb-faces span:first-child{margin-left:0}
.xtb-stars{color:var(--tb-accent);letter-spacing:2px}
.xtb-facts{display:flex;flex-wrap:wrap;gap:8px}
.xtb-fact{display:inline-flex;align-items:center;gap:6px;font-size:14px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-pill);padding:6px 12px;color:var(--tb-text)}
.xtb-fact b{font-weight:600}
.xtb-fact::before{width:15px;height:15px;background:var(--tb-accent-ink)}
.xtb-fact--price::before{--tb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5V4.5h8l9 9-8 8z'/%3E%3Ccircle cx='8' cy='9' r='1.4'/%3E%3C/svg%3E")}
.xtb-fact--date::before{--tb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
/* media */
.xtb-media{position:relative;min-width:0;border-radius:var(--tb-r-lg);overflow:hidden;aspect-ratio:4/5;max-width:100%;background:var(--tb-sand)}
.xtb-media img{width:100%;height:100%;object-fit:cover;display:block}
/* no picture yet: the reference's placeholder colours */
.xtb-media:not(:has(img)){background:radial-gradient(120% 90% at 70% 20%,color-mix(in srgb,var(--tb-accent) 70%,#fff) 0,transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--tb-ink) 75%,#000),var(--tb-ink))}
.xtb-badge{position:absolute;left:16px;bottom:16px;right:16px;background:var(--tb-surface);border-radius:var(--tb-r-md);padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.xtb-day{width:46px;flex:none;text-align:center;border-radius:10px;background:var(--tb-sand);padding:5px 0;font-variant-numeric:tabular-nums}
.xtb-day b{display:block;font:700 18px/1 var(--tb-font-head);color:var(--tb-ink)}
.xtb-day span{font:600 10px var(--tb-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--tb-accent-ink)}
.xtb-badge div{font-size:14px;line-height:1.35}
.xtb-badge small{display:block;color:var(--tb-muted)}
/* variant: split (default) */
.xtb--split .xtb-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
/* the picture on the left */
.xtb--media-left .xtb-media{order:-1}
.xtb--split.xtb--media-left .xtb-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.xtb--video.xtb--media-left .xtb-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
/* variant: center */
.xtb--center .xtb-inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.xtb--center .xtb-copy{justify-items:center;max-width:760px}
.xtb--center .xtb-eyebrow{justify-self:center}
.xtb--center .xtb-actions,.xtb--center .xtb-trust,.xtb--center .xtb-facts{justify-content:center}
.xtb--center .xtb-text{max-width:58ch}
/* variant: full background image */
.xtb--cover{color:#fff;min-height:min(640px,86vh);display:grid;align-items:end}
.xtb--cover .xtb-bg{position:absolute;inset:0;background:radial-gradient(90% 80% at 80% 10%,color-mix(in srgb,var(--tb-accent) 55%,transparent) 0,transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--tb-ink) 70%,#000),color-mix(in srgb,var(--tb-ink) 92%,#000))}
.xtb--cover .xtb-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,calc(var(--tb-overlay,.55) * .6)) 0%,rgba(0,0,0,var(--tb-overlay,.55)) 100%)}
.xtb--cover .xtb-title,.xtb--cover .xtb-text{text-shadow:0 2px 24px rgba(0,0,0,.3)}
.xtb--cover .xtb-inner{position:relative;width:100%}
.xtb--cover .xtb-title,.xtb--cover .xtb-title em{color:#fff}
.xtb--cover .xtb-title em{background:linear-gradient(transparent 86%,var(--tb-btn-accent) 86%)}
.xtb--cover .xtb-text,.xtb--cover .xtb-trust,.xtb--cover .xtb-note{color:rgba(255,255,255,.86)}
.xtb--cover .xtb-eyebrow{background:rgba(255,255,255,.14);color:#fff}
.xtb--cover .xtb-btn--quiet{color:#fff;border-color:rgba(255,255,255,.5)}
.xtb--cover .xtb-btn--quiet:hover{background:rgba(255,255,255,.1)}
.xtb--cover .xtb-faces span{border-color:color-mix(in srgb,var(--tb-ink) 85%,#000)}
.xtb--cover .xtb-fact,.xtb--image .xtb-fact{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.xtb--cover .xtb-fact::before,.xtb--image .xtb-fact::before{background:var(--tb-btn-accent)}
.xtb--cover .xtb-stars,.xtb--image .xtb-stars,.xtb--bg-brand .xtb-stars{color:#fff}
.xtb--cover .xtb-facts{order:1}
.xtb--cover .xtb-note,.xtb--cover .xtb-trust{order:2}
/* variant: image with text over it (centered or left), button under the text */
.xtb--image{min-height:min(620px,82vh);display:grid;align-items:center;color:#fff;text-align:center}
.xtb--image .xtb-bg{position:absolute;inset:0;background-color:var(--tb-ink);background-size:cover;background-position:center}
.xtb--image .xtb-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--tb-overlay,.45))}
.xtb--image .xtb-inner{position:relative;width:100%;justify-items:center}
.xtb--image .xtb-copy{justify-items:center;max-width:780px}
.xtb--image .xtb-eyebrow{justify-self:center;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
.xtb--image .xtb-title,.xtb--image .xtb-title em{color:#fff}
.xtb--image .xtb-title{font-size:clamp(34px,6vw,66px);font-size:clamp(34px,6cqi,66px);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.xtb--image .xtb-title em{background:linear-gradient(transparent 86%,var(--tb-btn-accent) 86%)}
.xtb--image .xtb-text{color:rgba(255,255,255,.9);max-width:56ch}
.xtb--image .xtb-actions{justify-content:center;margin-top:10px}
.xtb--image .xtb-btn{background:var(--tb-btn-accent);color:var(--tb-on-accent);min-height:56px;padding:0 32px;font-size:17px}
.xtb--image .xtb-btn:hover{background:var(--tb-btn-accent);filter:brightness(1.05)}
.xtb--image .xtb-note{font-size:14px;color:rgba(255,255,255,.8);margin:0}
.xtb--image.xtb--left{text-align:left}
.xtb--image.xtb--left .xtb-inner,.xtb--image.xtb--left .xtb-copy{justify-items:start}
.xtb--image.xtb--left .xtb-eyebrow{justify-self:start}
.xtb--image.xtb--left .xtb-actions{justify-content:flex-start}
.xtb--image.xtb--left .xtb-bg::after{background:linear-gradient(90deg,rgba(0,0,0,calc(var(--tb-overlay,.45) + .2)) 0,rgba(0,0,0,.1) 75%)}
/* vertical placement: bottom */
.xtb--image.xtb--bottom{align-items:end;padding-bottom:clamp(36px,6vw,72px);padding-bottom:clamp(36px,6cqi,72px)}
.xtb--image.xtb--bottom .xtb-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,calc(var(--tb-overlay,.45) + .25)) 100%)}
.xtb--image.xtb--left.xtb--bottom .xtb-bg::after{background:radial-gradient(120% 90% at 0% 100%,rgba(0,0,0,calc(var(--tb-overlay,.45) + .3)) 0,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 80%)}
.xtb--image.xtb--bottom .xtb-copy{gap:14px}
.xtb--image.xtb--left.xtb--bottom .xtb-copy{max-width:620px}
/* right side */
.xtb--image.xtb--right{text-align:right}
.xtb--image.xtb--right .xtb-inner,.xtb--image.xtb--right .xtb-copy{justify-items:end}
.xtb--image.xtb--right .xtb-eyebrow{justify-self:end}
.xtb--image.xtb--right .xtb-actions{justify-content:flex-end}
.xtb--image.xtb--right .xtb-copy{max-width:620px}
.xtb--image.xtb--right .xtb-bg::after{background:linear-gradient(270deg,rgba(0,0,0,calc(var(--tb-overlay,.45) + .2)) 0,rgba(0,0,0,.1) 75%)}
.xtb--image.xtb--right.xtb--bottom .xtb-bg::after{background:radial-gradient(120% 90% at 100% 100%,rgba(0,0,0,calc(var(--tb-overlay,.45) + .3)) 0,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 80%)}
/* heights: tall (default) / medium / short */
.xtb--image.xtb--h-medium{min-height:460px}
.xtb--image.xtb--h-short{min-height:320px;padding-top:32px;padding-bottom:32px}
.xtb--image.xtb--h-short .xtb-title{font-size:clamp(26px,3.6vw,40px);font-size:clamp(26px,3.6cqi,40px)}
.xtb--image.xtb--h-short .xtb-text{font-size:16px;max-width:48ch}
.xtb--image.xtb--h-short .xtb-copy{gap:10px}
.xtb--image.xtb--h-short .xtb-eyebrow{display:none}
.xtb--image.xtb--h-short .xtb-btn{min-height:48px;padding:0 24px;font-size:16px}
/* focal point keeps the motif in frame when the block is shorter than the photo */
.xtb--image .xtb-bg,.xtb--cover .xtb-bg{background-size:cover;background-position:var(--tb-focus,50% 40%)}
/* variant: video */
.xtb--video .xtb-inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.xtb--video .xtb-media{aspect-ratio:16/9}
.xtb-media--video>.xecontent{width:100%;height:100%;display:grid;align-content:center}
.xtb-media.xtb-media--video:has(>.xecontent){background:#000}
/* light / brand background options */
.xtb--bg-white{background:var(--tb-surface)}
.xtb--bg-brand{background:var(--tb-ink);color:var(--tb-on-ink)}
.xtb--bg-brand .xtb-title,.xtb--bg-brand .xtb-title em{color:var(--tb-on-ink)}
.xtb--bg-brand .xtb-text,.xtb--bg-brand .xtb-trust,.xtb--bg-brand .xtb-note{color:color-mix(in srgb,var(--tb-on-ink) 80%,transparent)}
.xtb--bg-brand .xtb-eyebrow{background:color-mix(in srgb,var(--tb-on-ink) 14%,transparent);color:var(--tb-on-ink)}
.xtb--bg-brand .xtb-btn:not(.xtb-btn--quiet){background:var(--tb-btn-accent);color:var(--tb-on-accent)}
.xtb--bg-brand .xtb-btn--quiet{color:var(--tb-on-ink);border-color:color-mix(in srgb,var(--tb-on-ink) 50%,transparent)}
.xtb--bg-brand .xtb-btn--quiet:hover{background:color-mix(in srgb,var(--tb-on-ink) 10%,transparent)}
.xtb--bg-brand .xtb-title em{background:linear-gradient(transparent 86%,var(--tb-btn-accent) 86%)}
/* narrow: stack (container query so it also works inside the editor canvas) */
@container (max-width:760px){
  .xtb--split .xtb-inner,.xtb--video .xtb-inner,.xtb--split.xtb--media-left .xtb-inner,
  .xtb--video.xtb--media-left .xtb-inner{grid-template-columns:minmax(0,1fr)}
  .xtb--split .xtb-media{aspect-ratio:4/3;order:-1}
  .xtb--wide.xtb--split,.xtb--wide.xtb--split.xtb--media-left{padding:0 0 40px}
  .xtb--wide.xtb--split .xtb-copy{padding:0 20px}
  .xtb--wide.xtb--split .xtb-media{aspect-ratio:4/3;min-height:0}
  .xtb--video .xtb-media{order:-1}
  .xtb-actions .xtb-btn{flex:1 1 100%}
  .xtb--cover{min-height:560px}
  .xtb--image{min-height:520px}
  .xtb--image .xtb-actions .xtb-btn{flex:1 1 100%}
}
/* ===================================================================== end topbanner */

/* Nedtælling (#113 stage 3): digits in the site's heading font and colour; Kompakt in cells; Bjælke sticks to the top */
.xcd { --xcd-ink: var(--cs-h2-color, var(--mb-ink)); --xcd-font: var(--cs-h2-font, var(--mb-font-head));
  text-align: center; color: var(--xcd-ink); }
.xcd--accent { --xcd-ink: var(--mb-continue-bg, var(--mb-ink)); }
.xcd--light { --xcd-ink: var(--mb-on-ink, #fff); background: var(--mb-ink); padding: 1.25rem; border-radius: 12px; }
.xcd-title { margin: 0 0 0.75rem; font-weight: 600; }
.xcd-digits { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.xcd-n { font-family: var(--xcd-font); font-variant-numeric: tabular-nums; line-height: 1; }
.xcd-u { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; opacity: 0.7; }
.xcd--big .xcd-cell { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.xcd--big .xcd-n { font-weight: 300; font-size: clamp(40px, 11vw, 64px); }
.xcd--big .xcd-sep { font: 300 clamp(32px, 8vw, 48px) / 1 var(--xcd-font); align-self: flex-start; padding-top: 4px; opacity: 0.6; }
.xcd--compact .xcd-digits { gap: 6px; }
.xcd--compact .xcd-cell { background: var(--mb-surface, #fff); border-radius: 8px; padding: 8px 0; width: 54px; }
.xcd--compact .xcd-n { font-size: 22px; display: block; }
.xcd--compact .xcd-u { font-size: 11px; margin-top: 4px; letter-spacing: 0; text-transform: none; }
/* Lys på mørk: the cells are a translucent white on the dark ink, so the white digits stay readable */
.xcd--light.xcd--compact .xcd-cell { background: rgba(255, 255, 255, 0.14); }
.xcd--bar { --xcd-ink: var(--mb-on-ink, #fff); }
.xcd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--mb-ink); }
/* On the page the bar stays at the top of the viewport; the block keeps its place (countdown.js sets its height to
   the bar's, the min-height covers the moment before) so content isn't covered. The editor canvas keeps it in flow. */
.xcd--fixed { min-height: 44px; }
.xcd--fixed .xcd-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding-top: max(10px, env(safe-area-inset-top)); }
.xcd--bar .xcd-title { margin: 0; }
.xcd--bar .xcd-digits { gap: 4px; }
.xcd--bar .xcd-cell { display: inline-flex; align-items: baseline; gap: 2px; }
.xcd--bar .xcd-n { font: 600 15px var(--mb-font-body); }
.xcd--bar .xcd-u { display: inline; font-size: 13px; letter-spacing: 0; text-transform: none; margin: 0 6px 0 0; }
.xcd-msg { margin: 0; font-weight: 600; }
.xcd-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; margin-top: 0.75rem;
  border-radius: 999px; background: var(--mb-continue-bg, var(--mb-ink)); color: var(--mb-continue-text, var(--mb-on-ink, #fff)); text-decoration: none; font-weight: 600; }
@media (max-width: 420px) { .xcd--big .xcd-cell { min-width: 52px; } .xcd--compact .xcd-cell { width: 48px; } }