-tags direkte i markuppet (i modsætning til forside/app-genvej, der bruger klassede overskrifts-elementer som .hero-title/.section-title og derfor ikke er afhængige af bare tag-selektorer). style.css's fælles ".mt-page h1..h4" sætter kun font-style:normal — IKKE font-family/vægt/afstand — så uden reglen herunder arvede overskrifterne body-fonten (DM Sans) i stedet for Montagu Slab. Samme historie for
: style.css's fælles reset
nulstiller kun margin, den sætter ikke linjehøjde/farve. Rettet ved at
genindføre disse to regler her (identisk med den godkendte HTML-dummy). */
/* Font/vægt/farve/linjehøjde holdes på BARE tag-selektorer (lav
specificity) med vilje, så mere specifikke lokale regler længere nede
i denne fil (fx ".cta-final-orange h2{color:var(--cream)}" og
".report-card h3{color:var(--cream)}" — overskrifter på mørk baggrund)
fortsat kan overskrive farven, præcis som i den godkendte HTML-dummy. */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 800;
font-style: normal !important;
color: var(--text);
line-height: 1.15;
}
p { line-height: 1.6; color: var(--text-muted); }
/* Margin skal derimod have høj specificity: style.css's fælles reset
(".mt-page h1, .mt-page h2, ... .mt-page p ...{margin:0;padding:0;}")
har selv specificity (0,1,1) og nulstiller ellers margin igen uanset
load-rækkefølge. ".mt-page.page-virksomhed X" (0,2,1) vinder over det,
uden at røre farve/font — så de lokale farve-undtagelser ovenfor
forbliver upåvirkede. */
.mt-page.page-virksomhed h1,
.mt-page.page-virksomhed h2,
.mt-page.page-virksomhed h3,
.mt-page.page-virksomhed h4 {
margin: 0 0 .5em 0;
}
.mt-page.page-virksomhed p { margin: 0 0 1em 0; }
/* ===== KNAPPER ===== */
.btn-primary{
display:inline-flex; align-items:center; gap:8px;
background:var(--orange); color:var(--cream);
font-family:var(--font-body); font-weight:700; font-size:16px;
border:none; border-radius:var(--btn-radius);
padding:14px 28px; cursor:pointer; text-decoration:none;
transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{ background:var(--orange-light); transform:translateY(-1px); }
.btn-logud{
display:inline-flex; align-items:center; gap:8px;
background:var(--cream-dark); color:var(--orange);
font-family:var(--font-body); font-weight:700; font-size:16px;
border:none; border-radius:var(--btn-radius);
padding:14px 28px; cursor:pointer; text-decoration:none;
transition:transform .15s ease, background .15s ease;
}
.btn-logud:hover{ background:var(--cream-mid); transform:translateY(-1px); }
/* ===== TOPBAR (identisk med forsiden — se page-forside.css) ===== */
.topbar {
background: rgba(255,248,236,0.92); backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(70,22,4,0.08);
position: sticky; top: 0; z-index: 100;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: 1180px; margin: 0 auto; gap: 16px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.brand img { width: 95px; height: 95px; object-fit: contain; }
.brand-name { font-family: var(--font-body); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; }
.brand-name .b-black { color: var(--brown-deep); }
.brand-name .b-orange { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: 8px 32px; flex-wrap: wrap; order: 3; flex-basis: 100%; justify-content: center; }
.nav-links a { color: var(--text-muted); font-weight: 600; font-size: 16px; white-space: nowrap; transition: color 0.15s; }
.nav-links a:hover { color: var(--orange); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.btn-dark {
background: var(--brown-deep); color: var(--cream); border: none; border-radius: var(--btn-radius);
padding: 12px 24px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: var(--font-body);
transition: background 0.15s, transform 0.15s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-dark:hover { background: var(--brown-mid); transform: translateY(-1px); }
/* ===== HERO ===== */
.hero{
position:relative; overflow:hidden;
padding:50px 0 96px;
}
.hero-pattern{
position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
}
.hero-inner{
position:relative; z-index:1;
display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
@media (max-width:920px){ .hero-inner{ grid-template-columns:1fr; } }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
background:var(--cream-mid); color:var(--orange-dark);
font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
padding:6px 14px; border-radius:22px; margin-bottom:18px;
}
.hero h1{ font-size:44px; max-width:560px; }
.hero h1 .accent{ color:var(--orange); }
.hero p.lead{ font-size:18px; max-width:520px; }
.hero-ctas{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-visual{
position:relative; background:var(--white); border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.35); padding:20px;
}
.hero-visual-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hero-visual-brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--brown-deep); }
.hero-visual-brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.hero-visual-tag{
font-size:11px; font-weight:700; color:var(--orange-dark); background:var(--cream-mid);
padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.02em;
}
.hero-visual img{ border-radius:12px; aspect-ratio:16/9; object-fit:cover; width:100%; }
.hero-visual img.hero-photo-img{ border-radius:12px; aspect-ratio:4/3; object-fit:cover; width:100%; }
/* ===== SECTION HEADERS ===== */
.section{ padding:80px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:32px; }
.section-head p{ font-size:17px; }
.section-alt{ background:var(--cream-dark); }
/* ===== DATA / RAPPORT SEKTION ===== */
.data-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:920px){ .data-split{ grid-template-columns:1fr; } }
.report-card{
background:var(--brown-deep); color:var(--cream); border-radius:20px; padding:32px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.report-eyebrow{
display:inline-flex; color:var(--orange-light); font-weight:700; font-size:12.5px;
text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px;
}
.report-card h3{ color:var(--cream); font-size:18px; }
.report-card p{ color:rgba(255,248,236,.75); font-size:14.5px; }
.report-stat-row{ display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; }
.report-stat{ background:rgba(255,255,255,.06); border-radius:var(--radius); padding:16px 18px; flex:1; min-width:130px; }
.report-stat .num{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--orange-light); }
.report-stat .label{ font-size:12.5px; color:rgba(255,248,236,.65); margin-top:2px; }
.anon-badge{
display:inline-flex; align-items:center; gap:6px; margin-top:22px;
background:rgba(255,255,255,.08); color:var(--cream); font-size:12.5px; font-weight:600;
padding:6px 14px; border-radius:22px;
}
/* ===== SOCIAL PROOF ===== */
.proof-stat-num{ color:var(--orange); font-family:var(--font-display); font-weight:800; }
.proof-logos-row{
display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:20px;
}
.proof-logo-placeholder{
flex:1 1 180px; max-width:220px; min-width:150px; height:76px;
display:flex; align-items:center; justify-content:center; text-align:center;
font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:.02em;
color:var(--text-muted); background:var(--white); border:1px solid var(--cream-mid);
border-radius:var(--radius);
}
@media (max-width:600px){ .proof-logo-placeholder{ flex:1 1 45%; } }
/* ===== FAQ-ACCORDION (åbne/luk FAQ-blokke, bruges to steder) =====
Bruger native — kræver ingen JavaScript, virker med
mus, touch og tastatur (Tab + Enter/Space) på både desktop og mobil. */
.faq-accordion{ max-width:760px; margin:40px auto 0; }
.faq-accordion details{
background:var(--white); border-radius:var(--radius); padding:4px 22px;
margin-bottom:12px;
}
.faq-accordion summary{
cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:700;
font-size:15.5px; color:var(--text); padding:16px 30px 16px 0; position:relative;
}
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion summary::after{
content:"\2b"; position:absolute; right:0; top:16px; color:var(--orange);
font-size:18px; font-weight:700; transition:transform .15s ease;
}
.faq-accordion details[open] summary::after{ content:"\2212"; }
.faq-accordion summary:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }
.faq-accordion p{ font-size:14.5px; margin:0 0 18px; }
/* ==========================================================================
REDESIGN v1.16.0 — nye sektioner og komponenter
========================================================================== */
/* ===== FÆLLES FACT-CHIPS (hero + proceslinjer) ===== */
.fact-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--white); color:var(--brown-deep); font-weight:700; font-size:13px; padding:8px 16px; border-radius:22px; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.fact-chip i{ color:var(--orange); font-size:15px; }
.hero-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.fact-pills{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:44px; }
/* ===== HVAD ER MORGENTRÆNING? (orange/lys sektion med bølgede dividere) ===== */
.section-orange{ position:relative; background:linear-gradient(180deg, var(--cream-dark) 0%, var(--cream-mid) 100%); overflow:hidden; }
.section-orange .about-divider{ position:absolute; left:0; width:100%; height:70px; opacity:.55; pointer-events:none; z-index:0; }
.section-orange .about-divider-top{ top:0; }
.section-orange .about-divider-bottom{ bottom:0; transform:scaleY(-1); }
.section-orange .wrap{ position:relative; z-index:1; }
.about-split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
@media (max-width:920px){ .about-split{ grid-template-columns:1fr; } }
.fact-line{ font-family:var(--font-display); font-weight:800; color:var(--orange-dark); font-size:17px; margin-bottom:14px; letter-spacing:.01em; }
.mini-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
@media (max-width:560px){ .mini-facts{ grid-template-columns:1fr; } }
.mini-fact{ background:var(--white); border-radius:var(--radius); padding:18px 20px; }
.mini-fact h4{ font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--text); margin:0 0 6px; }
.mini-fact p{ font-size:14px; margin-bottom:0; }
.fun-line{ display:flex; align-items:flex-start; gap:10px; background:var(--brown-deep); color:var(--cream); border-radius:var(--radius); padding:16px 20px; font-weight:700; font-size:15px; margin-top:8px; }
.fun-line i{ color:var(--orange-light); font-size:18px; flex:none; margin-top:2px; }
/* ===== ABOUT-VISUAL (video-preview af en forudoptaget træning) ===== */
.about-visual{ background:var(--white); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:20px; }
.video-frame{ position:relative; border-radius:14px; overflow:hidden; background:var(--brown-deep); }
.video-frame img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; opacity:.92; }
.video-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(70,22,4,0) 55%, rgba(70,22,4,.45) 100%); pointer-events:none; }
.video-badge{ position:absolute; top:14px; left:14px; z-index:2; font-size:11px; font-weight:700; color:var(--cream); background:rgba(70,22,4,.55); padding:5px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.02em; }
.video-duration{ position:absolute; bottom:14px; right:14px; z-index:2; font-size:12px; font-weight:700; color:var(--cream); background:rgba(70,22,4,.6); padding:4px 10px; border-radius:8px; }
.play-button{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:72px; height:72px; border-radius:50%; background:rgba(255,248,236,.95); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:26px; box-shadow:0 10px 26px rgba(0,0,0,.35); border:none; cursor:pointer; transition:transform .15s ease, background .15s ease; }
.play-button i{ margin-left:4px; }
.play-button:hover{ transform:translate(-50%,-50%) scale(1.07); background:var(--white); }
.video-caption{ display:flex; align-items:center; gap:8px; margin-top:16px; padding:0 4px; font-weight:700; font-size:14.5px; color:var(--brown-deep); }
.video-caption i{ color:var(--orange); font-size:17px; flex:none; }
/* ===== PROCES-LINJE (bruges to steder: virksomhedsaftale + opstart) ===== */
.process-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-flow.count-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .process-flow, .process-flow.count-3{ grid-template-columns:1fr; row-gap:36px; } }
.process-step{ position:relative; padding:0 18px; text-align:center; }
.process-flow .process-step:not(:first-child)::after{ content:""; position:absolute; top:26px; left:calc(-50% + 26px); width:calc(100% - 52px); height:2px; background-image:repeating-linear-gradient(to right, var(--cream-mid) 0 8px, transparent 8px 14px); z-index:0; }
@media (max-width:860px){ .process-flow .process-step::after{ display:none; } }
.process-num{ position:relative; z-index:1; width:52px; height:52px; margin:0 auto 18px; border-radius:50%; background:var(--orange); color:var(--cream); font-family:var(--font-display); font-weight:900; font-size:19px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(255,103,0,.35); }
.process-step h3{ font-size:16px; margin-bottom:8px; }
.process-step p{ font-size:14px; margin-bottom:0; }
.process-note{ position:relative; display:flex; gap:20px; align-items:flex-start; background:var(--white); border-radius:20px; padding:28px 30px 28px 34px; margin:44px auto 0; box-shadow:0 12px 28px rgba(161,57,11,.12); max-width:680px; text-align:left; overflow:hidden; border:1px solid var(--cream-mid); }
.process-note::before{ content:""; position:absolute; top:0; left:0; width:8px; height:100%; background:linear-gradient(180deg, var(--orange), var(--orange-mid)); }
.process-note-icon{ flex:none; width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, var(--orange), var(--orange-light)); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:23px; box-shadow:0 8px 18px rgba(255,103,0,.35); }
.process-note p{ margin:0; font-size:15px; }
.process-note strong{ display:block; font-family:var(--font-display); font-weight:900; color:var(--orange-dark); font-size:21px; margin-bottom:8px; }
.inline-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--cream-dark); border-radius:20px; padding:28px 32px; margin-top:44px; }
.inline-cta h3{ font-size:19px; margin-bottom:0; }
@media (max-width:600px){ .inline-cta{ flex-direction:column; align-items:flex-start; } }
/* ===== FORDELE-PAR: MEDARBEJDERE (lyst) + VIRKSOMHED (mørkt) — samme 2x2 struktur ===== */
.pair-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .pair-grid{ grid-template-columns:1fr; } }
.pair-item{ display:flex; gap:18px; align-items:flex-start; border-radius:var(--radius); padding:24px; }
.pair-icon{ flex:none; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; }
.pair-item h3{ font-size:16.5px; margin-bottom:6px; }
.pair-item p{ font-size:14.5px; margin-bottom:0; }
/* Lyst og varmt tema (medarbejdere) */
.pair-item--light{ background:var(--white); border:1px solid var(--cream-mid); }
.pair-item--light .pair-icon{ background:var(--cream-mid); color:var(--orange-dark); }
.pair-item--light h3{ color:var(--text); }
.pair-item--light p{ color:var(--text-muted); }
/* Mørkt og markant tema (virksomhed) */
.section-dark{ background:var(--brown-deep); }
.section-dark .section-head h2{ color:var(--cream); }
.section-dark .section-head p{ color:rgba(255,248,236,.75); }
.pair-item--dark{ background:var(--brown-mid); border:1px solid rgba(255,255,255,.08); }
.pair-item--dark .pair-icon{ background:var(--orange); color:var(--cream); }
.pair-item--dark h3{ color:var(--cream); }
.pair-item--dark p{ color:rgba(255,248,236,.72); }
/* ===== JERES MORGENTRÆNING (større visuelt fokus) ===== */
.brand-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
@media (max-width:920px){ .brand-split{ grid-template-columns:1fr; } }
.brand-visual{ position:relative; background:var(--white); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.35); padding:20px; }
.brand-visual img{ border-radius:12px; width:100%; display:block; }
/* ===== PRIS-SEKTION: TYDELIG OVERGANG TIL VIRKSOMHEDSAFTALEN ===== */
.section-price{ position:relative; overflow:hidden; }
.section-price .price-divider{ position:absolute; left:0; bottom:0; width:100%; height:70px; opacity:.55; pointer-events:none; z-index:0; }
.section-price .wrap{ position:relative; z-index:1; }
/* ===== PRISOVERSIGT (redaktionel prisliste med gradueret rabat-fremhævning) ===== */
.price-list-wrap{ background:linear-gradient(180deg, var(--white) 0%, var(--cream) 100%); border-radius:28px; padding:36px; box-shadow:0 16px 40px rgba(70,22,4,.12); border:1px solid var(--cream-dark); }
.price-list-head{ display:grid; grid-template-columns:1fr 1.15fr 1.3fr 1.1fr; gap:16px; padding:0 24px 16px; }
.price-list-head span{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--brown); }
.price-row{ display:grid; grid-template-columns:1fr 1.15fr 1.3fr 1.1fr; gap:16px; align-items:center; background:var(--white); border-radius:18px; padding:20px 24px; margin-bottom:10px; box-shadow:0 4px 14px rgba(70,22,4,.06); transition:transform .15s ease, box-shadow .15s ease; }
.price-row:last-child{ margin-bottom:0; }
.price-row:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(70,22,4,.12); }
.price-cell{ display:flex; flex-direction:column; gap:2px; }
.price-cell-label{ display:none; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.price-cell-value{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text); }
.price-cell-range .price-cell-value{ font-size:18px; }
.price-amount{ font-size:22px; font-weight:900; color:var(--orange-dark); }
.price-employee-value{ color:var(--brown); font-weight:700; }
.discount-pill{ display:inline-flex; align-items:center; justify-content:center; padding:7px 16px; border-radius:22px; font-weight:800; font-size:14.5px; width:fit-content; }
.discount-1{ background:var(--cream-mid); color:var(--orange-dark); }
.discount-2{ background:var(--orange-light); color:var(--white); }
.discount-3{ background:var(--orange); color:var(--white); }
.discount-4{ background:var(--orange-mid); color:var(--cream); }
.discount-5{ background:var(--orange-dark); color:var(--cream); box-shadow:0 4px 12px rgba(161,57,11,.35); }
.price-row-enterprise{ background:linear-gradient(135deg, var(--brown-deep), var(--brown-mid)); }
.price-row-enterprise .price-cell-value,
.price-row-enterprise .price-amount,
.price-row-enterprise .price-employee-value{ color:var(--cream); }
.price-row-enterprise .price-cell-label{ color:rgba(255,248,236,.65); }
.price-row-enterprise .price-cell-value.price-dash{ color:rgba(255,248,236,.5); }
.price-list-notes{ margin-top:22px; padding:0 24px; }
.price-list-notes p{ font-size:13px; color:var(--text-muted); margin:0 0 4px; }
.price-list-notes p:last-child{ margin-bottom:0; }
@media (max-width:700px){
.price-list-wrap{ padding:20px 14px; }
.price-list-head{ display:none; }
.price-cell-label{ display:block; }
.price-row{ grid-template-columns:1fr 1fr; row-gap:16px; padding:20px; }
.price-list-notes{ padding:0 10px; }
}
/* ===== AFSLUTTENDE CTA (orange, stor flade) ===== */
.cta-final-orange{ background:linear-gradient(135deg, var(--orange), var(--orange-mid)); border-radius:28px; padding:56px 48px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; box-shadow:0 20px 50px rgba(161,57,11,.35); }
@media (max-width:860px){ .cta-final-orange{ grid-template-columns:1fr; padding:40px 28px; } }
.cta-final-orange h2{ color:var(--cream); font-size:30px; max-width:460px; }
.cta-final-orange p{ color:rgba(255,248,236,.9); font-size:16px; max-width:440px; }
.btn-on-orange{ display:inline-flex; align-items:center; gap:8px; background:var(--cream); color:var(--orange-dark); font-family:var(--font-body); font-weight:700; font-size:16px; border:none; border-radius:var(--btn-radius); padding:14px 28px; cursor:pointer; text-decoration:none; transition:transform .15s ease; }
.btn-on-orange:hover{ transform:translateY(-1px); }
.btn-outline-cream{ display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--cream); border:2px solid rgba(255,248,236,.6); font-family:var(--font-body); font-weight:700; font-size:16px; border-radius:var(--btn-radius); padding:12px 26px; cursor:pointer; text-decoration:none; transition:transform .15s ease, border-color .15s ease; }
.btn-outline-cream:hover{ border-color:var(--cream); transform:translateY(-1px); }
.cta-final-actions-orange{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.cta-photo-placeholder{ background:rgba(255,255,255,.14); border:2px dashed rgba(255,248,236,.55); border-radius:20px; padding:40px 26px; text-align:center; }
.cta-photo-placeholder i{ font-size:34px; color:var(--cream); opacity:.9; }
.cta-photo-placeholder .placeholder-label{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:rgba(255,248,236,.9); margin:12px 0 10px; }
.cta-photo-placeholder p{ color:rgba(255,248,236,.85); font-size:14px; margin:0; line-height:1.5; }