/* tilbygninger.css — the Tilbygninger section: case cards on the overview, the calculator
   on each case page, and the shared "med i Den intelligente" + CTA bands. The stage and the
   illustrations are the shared ones (stage.css); this file only styles what sits below. */
.tb { --tb-ops: var(--ug-brand-70); --tb-drift: var(--ug-accent-60); }
.tb--case .fs__title { font-size: clamp(2.6rem, 5.4vw, 5.25rem); max-width: 17ch; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.dot--ops { background: var(--tb-ops); } .dot--drift { background: var(--tb-drift); }

/* ── Overview: four case cards ──────────────────────────────────────── */
.tb-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tb-case { display: grid; grid-template-rows: auto 1fr; border-radius: var(--ug-radius-l); overflow: hidden; background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); text-decoration: none; color: inherit; transition: transform .2s var(--ug-ease), box-shadow .2s, border-color .2s; }
.tb-case:hover { transform: translateY(-4px); box-shadow: var(--ug-shadow-pop); border-color: var(--ug-brand-line); color: inherit; }
.tb-case__still { display: block; aspect-ratio: 8 / 4.6; padding: .75rem 1rem 0; background: radial-gradient(120% 90% at 70% 120%, var(--ug-brand-40), transparent 60%), var(--ug-brand); }
.tb-case__still .ill { width: 100%; height: 100%; }
.tb-case__body { display: grid; gap: .55rem; padding: 1.25rem 1.4rem 1.4rem; align-content: start; }
.tb-case__top { display: flex; align-items: center; justify-content: space-between; }
.tb-case__ico { width: 2.5rem; height: 2.5rem; border-radius: var(--ug-radius); background: var(--ug-accent-quiet); color: var(--ug-accent-40); display: grid; place-items: center; }
html[data-theme="dark"] .tb-case__ico { color: var(--ug-accent-70); }
.tb-case__ico svg { width: 1.35rem; height: 1.35rem; }
.tb-case__nr { font-family: var(--ug-mono); font-size: var(--ug-text-s); color: var(--ug-text-faint); letter-spacing: var(--ug-tracking-label); }
.tb-case h3 { font-size: var(--ug-text-2xl); font-weight: var(--ug-weight-bold); letter-spacing: -.01em; line-height: 1.15; }
.tb-case p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); margin: 0; }
.tb-case__tal { display: flex; align-items: baseline; gap: .6rem; margin-top: .5rem; }
.tb-case__tal b { font-size: var(--ug-display-m); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-tight); color: var(--ug-brand-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.tb-case__tal span { color: var(--ug-text-quiet); font-size: var(--ug-text-m); }
.tb-case__split { display: block; height: .55rem; border-radius: var(--ug-radius-pill); background: var(--tb-drift); overflow: hidden; }
.tb-case__split i { display: block; height: 100%; width: var(--w); background: var(--tb-ops); border-radius: inherit; }
.tb-case__legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: var(--ug-text-s); color: var(--ug-text-faint); }
.tb-case__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.tb-case__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-weight: var(--ug-weight-semibold); color: var(--ug-brand-strong); }
.tb-case__go svg { transition: transform .2s var(--ug-ease); }
.tb-case:hover .tb-case__go svg { transform: translateX(4px); }
.tb-sum-line { margin-top: 1.5rem; font-size: var(--ug-text-l); color: var(--ug-text-quiet); max-width: 60ch; }
.tb-sum-line b { color: var(--ug-brand-strong); }
@media (max-width: 860px) { .tb-cases { grid-template-columns: 1fr; } }

/* ── What a tilbygning is ───────────────────────────────────────────── */
.tb-hvad { background: var(--ug-surface); border-block: 1px solid var(--ug-border-quiet); }
.tb-hvad__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: start; }
.tb-hvad h2 { margin-bottom: 1.25rem; max-width: 18ch; }
.tb-trin { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: trin; }
.tb-trin li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--ug-radius-l); background: var(--ug-bg); border: 1px solid var(--ug-border-quiet); }
.tb-trin__nr { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ug-brand); color: #fff; display: grid; place-items: center; font-family: var(--ug-mono); font-weight: 600; font-size: var(--ug-text-m); }
.tb-trin li:last-child .tb-trin__nr { background: var(--ug-accent-60); color: var(--ug-on-accent); }
.tb-trin h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; margin-bottom: .2rem; }
.tb-trin p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); }
.tb-hvad .stills { margin-top: 2.5rem; }
@media (max-width: 860px) { .tb-hvad__grid { grid-template-columns: 1fr; } }

/* ── Med i Den intelligente ─────────────────────────────────────────── */
.tb-intel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2rem 2.25rem; border-radius: var(--ug-radius-l); color: var(--ug-on-brand); background: radial-gradient(120% 120% at 100% 100%, var(--ug-brand-40), transparent 60%), var(--ug-brand); box-shadow: var(--ug-shadow-pop); }
.tb-intel .eyebrow { color: var(--ug-on-brand-soft); }
.tb-intel h2 { color: #fff; font-size: var(--ug-display-m); max-width: 20ch; }
.tb-intel h2 .em { color: var(--ug-accent-70); }
.tb-intel__txt a { color: var(--ug-accent-80); }
.tb-intel__txt > p { color: var(--ug-on-brand-quiet); margin: 1rem 0 1.25rem; max-width: 54ch; }
.tb-intel__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.tb-intel__btns .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.tb-intel__pk { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tb-intel__pk li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: var(--ug-radius); background: rgba(4,21,18,.3); border: 1px solid rgba(255,255,255,.14); color: var(--ug-on-brand-faint); }
.tb-intel__pk li a { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: var(--ug-weight-bold); text-decoration: none; }
.tb-intel__pk li b { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--ug-text-m); }
.tb-intel__pk li b svg { width: 1.05rem; height: 1.05rem; }
.tb-intel__pk li.is-on { background: rgba(255,255,255,.12); border-color: var(--ug-accent-60); color: #fff; box-shadow: 0 0 0 4px rgba(234,114,70,.18); }
.tb-intel__pk li.is-on b { color: var(--ug-accent-70); }
.tb-intel__dot { width: .8rem; height: .8rem; border-radius: 50%; background: #fff; }
.tb-intel__dot--store { background: var(--ug-slate-60); } .tb-intel__dot--komplette { background: var(--ug-brand-70); } .tb-intel__dot--intelligente { background: var(--ug-accent-60); }
@media (max-width: 860px) { .tb-intel { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; } }

/* ── CTA ────────────────────────────────────────────────────────────── */
.tb-cta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; padding: 2rem 2.25rem; border-radius: var(--ug-radius-l); background: var(--ug-accent-quiet); border: 1px solid var(--ug-accent-line); }
.tb-cta h2 { max-width: 22ch; }
.tb-cta .lede { margin-top: .75rem; font-size: var(--ug-text-l); }
.tb-cta__btns { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── Case page: other tilbygninger ──────────────────────────────────── */
.tb-andre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tb-andre a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border-radius: var(--ug-radius-l); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); text-decoration: none; color: inherit; transition: transform .15s var(--ug-ease), box-shadow .15s, border-color .15s; }
.tb-andre a:hover { transform: translateY(-3px); box-shadow: var(--ug-shadow-pop); border-color: var(--ug-brand-line); color: inherit; }
.tb-andre__ico { width: 2.5rem; height: 2.5rem; border-radius: var(--ug-radius); background: var(--ug-brand); color: #fff; display: grid; place-items: center; }
.tb-andre__ico svg { width: 1.3rem; height: 1.3rem; }
.tb-andre b { display: block; font-size: var(--ug-text-m); line-height: 1.25; }
.tb-andre small { color: var(--ug-text-faint); font-size: var(--ug-text-s); }
.tb-andre a > svg { width: 1.1rem; height: 1.1rem; color: var(--ug-brand-strong); }
@media (max-width: 860px) { .tb-andre { grid-template-columns: 1fr; } }

/* arrangør is the primary perspective on these pages */
.tb .persp-grid { grid-template-columns: 1.35fr 1fr 1fr; }
.tb #persp-arrangoer { order: -1; }
@media (max-width: 860px) { .tb .persp-grid { grid-template-columns: 1fr; } }

/* ── The calculator ─────────────────────────────────────────────────── */
.tb-calc { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tb-calc__felter { display: grid; gap: 1.5rem; padding: 1.5rem 1.6rem; }
.tb-del { border: 0; margin: 0; padding: 0; display: grid; gap: 1.25rem; min-width: 0; }
.tb-del + .tb-del { padding-top: 1.5rem; border-top: 1px dashed var(--ug-border); }
.tb-del__navn { font-size: var(--ug-text-2xl); font-weight: var(--ug-weight-bold); color: var(--ug-brand-strong); padding: 0; margin-bottom: .25rem; }
.tb-fase { display: grid; gap: .85rem; }
.tb-fase__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; font-size: var(--ug-text-l); font-weight: var(--ug-weight-bold); letter-spacing: 0; color: var(--ug-text); }
.tb-fase__h small { font-size: var(--ug-text-s); font-weight: var(--ug-weight-regular); color: var(--ug-text-faint); }
.tb-fase__dot { align-self: center; width: .7rem; height: .7rem; border-radius: 50%; background: var(--tb-ops); }
.tb-fase--drift .tb-fase__dot { background: var(--tb-drift); }
.tb-felt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab num" "rng num"; column-gap: 1.25rem; row-gap: .3rem; align-items: center; padding: .55rem .8rem .65rem; border-radius: var(--ug-radius); background: var(--ug-surface-2); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.tb-felt.is-changed { border-color: var(--ug-accent-line); background: var(--ug-accent-quiet); }
.tb-felt label { grid-area: lab; font-size: var(--ug-text-ms); font-weight: var(--ug-weight-semibold); color: var(--ug-text-quiet); }
.tb-felt__range { grid-area: rng; width: 100%; margin: 0; height: 1.25rem; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 50%; }
.tb-felt__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ug-brand-60) var(--p), var(--ug-border) var(--p)); }
.tb-felt__range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ug-brand-60) var(--p), var(--ug-border) var(--p)); }
.tb-felt__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--ug-surface); border: 2px solid var(--ug-brand); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .15s var(--ug-ease); }
.tb-felt__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ug-surface); border: 2px solid var(--ug-brand); }
.tb-felt__range:active::-webkit-slider-thumb { transform: scale(1.2); }
.tb-felt.is-changed .tb-felt__range::-webkit-slider-thumb { border-color: var(--ug-accent-60); }
.tb-felt__num { grid-area: num; display: inline-flex; align-items: baseline; gap: .35rem; }
.tb-felt__num input { font: inherit; font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); color: var(--ug-brand-strong); width: 5.6rem; text-align: right; border: 1px solid var(--ug-border); border-radius: var(--ug-radius); padding: .3rem .5rem; background: var(--ug-surface); font-variant-numeric: tabular-nums; }
.tb-felt__num input:focus { outline: 2px solid var(--ug-brand-60); outline-offset: 0; border-color: var(--ug-brand-60); }
.tb-felt__enhed { min-width: 2.6rem; font-size: var(--ug-text-s); color: var(--ug-text-faint); }
.tb-ligning { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; margin: .1rem 0 0; padding: .65rem .85rem; border-radius: var(--ug-radius); border: 1px dashed var(--ug-border); font-size: var(--ug-text-m); }
.tb-ligning code { font-family: var(--ug-mono); font-size: var(--ug-text-ms); color: var(--ug-text-quiet); }
.tb-ligning__eq { color: var(--ug-text-faint); }
.tb-ligning b { font-variant-numeric: tabular-nums; color: var(--ug-brand-strong); font-size: var(--ug-text-l); }
.tb-calc__fod { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

.tb-calc__sum { position: sticky; top: calc(var(--ug-topbar-h) + 1rem); display: grid; gap: .9rem; padding: 1.6rem 1.6rem 1.5rem; border-radius: var(--ug-radius-l); color: var(--ug-on-brand); background: radial-gradient(130% 90% at 100% 0%, var(--ug-brand-40), transparent 60%), var(--ug-brand); box-shadow: var(--ug-shadow-pop); }
.tb-sum__eyebrow { font-family: var(--ug-mono); font-size: var(--ug-text-s); letter-spacing: var(--ug-tracking-wide); text-transform: uppercase; color: var(--ug-on-brand-soft); margin: 0; }
.tb-sum__total { display: flex; align-items: baseline; gap: .6rem; }
.tb-sum__total .tal { font-size: clamp(3.4rem, 5.6vw, 4.75rem); font-weight: var(--ug-weight-light); letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; color: #fff; }
.tb-sum__total .enh { font-size: var(--ug-text-2xl); color: var(--ug-on-brand-soft); }
.tb-sum__dage { margin: -.3rem 0 .2rem; color: var(--ug-on-brand-soft); font-size: var(--ug-text-m); }
.tb-sum__dage b { color: #fff; font-variant-numeric: tabular-nums; }
.tb-bar { height: .7rem; border-radius: var(--ug-radius-pill); background: var(--tb-drift); overflow: hidden; }
.tb-bar__ops { display: block; height: 100%; background: var(--tb-ops); border-radius: inherit; transition: width .7s var(--ug-ease); }
.tb-sum__split { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tb-sum__split > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .45rem; font-size: var(--ug-text-s); color: var(--ug-on-brand-soft); }
.tb-sum__split b { grid-column: 1 / -1; font-size: var(--ug-text-2xl); color: #fff; font-variant-numeric: tabular-nums; font-weight: var(--ug-weight-bold); }
.tb-sum__dele { display: grid; gap: .35rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.14); }
.tb-sum__dele > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--ug-text-m); color: var(--ug-on-brand-quiet); }
.tb-sum__dele b { color: #fff; font-variant-numeric: tabular-nums; }
.tb-sum__ekstra { list-style: none; margin: 0; padding: .8rem 0 0; display: grid; gap: .45rem; border-top: 1px solid rgba(255,255,255,.14); }
.tb-sum__ekstra li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; font-size: var(--ug-text-m); color: var(--ug-on-brand-quiet); }
.tb-sum__ekstra svg { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--ug-accent-70); }
.tb-sum__ekstra b { color: #fff; font-variant-numeric: tabular-nums; }
.tb-sum__cta { display: grid; gap: .7rem; justify-items: start; padding-top: .3rem; }
.tb-sum__pris { color: var(--ug-on-brand-quiet); font-weight: var(--ug-weight-semibold); font-size: var(--ug-text-m); }
.tb-sum__pris:hover { color: #fff; }
@media (max-width: 960px) {
  .tb-calc { grid-template-columns: 1fr; }
  .tb-calc__sum { position: relative; top: auto; }
}
@media (max-width: 520px) {
  .tb-calc__felter { padding: 1.1rem 1rem; }
  .tb-felt { grid-template-areas: "lab lab" "rng num"; }
  .tb-felt__num input { width: 4.8rem; font-size: var(--ug-text-l); }
}

/* the Pro butler: a tilbygning that imports the exhibitors' own data (links to /samtalebutler/) */
.tb-probutler { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.25rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--ug-radius-l); border: 1.5px dashed var(--ug-accent-line); background: var(--ug-accent-quiet); color: var(--ug-text); text-decoration: none; transition: transform .2s var(--ug-ease), box-shadow .2s; }
.tb-probutler:hover { transform: translateY(-2px); box-shadow: var(--ug-shadow-pop); color: var(--ug-text); }
.tb-probutler__ico { width: 2.75rem; height: 2.75rem; border-radius: var(--ug-radius); background: var(--ug-accent-60); color: var(--ug-on-accent); display: grid; place-items: center; }
.tb-probutler__ico svg { width: 1.5rem; height: 1.5rem; }
.tb-probutler b { display: block; font-size: var(--ug-text-xl); margin-bottom: .15rem; }
.tb-probutler > span:nth-child(2) { font-size: var(--ug-text-m); color: var(--ug-text-quiet); }
.tb-probutler__go { display: inline-flex; align-items: center; gap: .4rem; font-weight: var(--ug-weight-semibold); color: var(--ug-brand-strong); white-space: nowrap; }
@media (max-width: 640px) { .tb-probutler { grid-template-columns: auto 1fr; } .tb-probutler__go { grid-column: 2; } }