/*
 * Tematisering. Laddas SIST, efter Bulma och efter sajtens övriga stilmallar,
 * så att den vinner i kaskaden.
 *
 * Bulma 0.9.3 har inget dark mode-stöd och hårdkodar ljusa färger på body,
 * formulärfält, navigation och hjälpklasser. Allt som bär färg och används i
 * vyerna måste därför läggas om mot tokens i tokens.css.
 *
 * Dark mode kom i Bulma 1.0. Uppgradering är ett major-steg som rör alla vyer
 * och hör till fas 4 — fram till dess är överstyrning här det billigare valet.
 */

/* ── Sidans grund ───────────────────────────────────────────────────────── */

html {
    background-color: var(--bg-page);
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* Bulma sätter färg på rubriker och brödtext separat */
h1, h2, h3, h4, h5, h6,
p, li, label, address, strong, em, blockquote, dt, dd, figcaption {
    color: inherit;
}

.my-title,
.my-h3 {
    color: var(--text-primary);
}

a {
    color: var(--theme-text);
}

/*
 * Profilen: "Länkar i brödtext — temafärgens text-variant, understrykning."
 * Understrykningen gäller alltså brödtexten, inte navigation, knappar,
 * kundkort eller sidfotens länklistor, som alla har egna regler.
 *
 * Att den sitter här och inte på `a` är också ett tillgänglighetskrav: färg får
 * inte vara ensam informationsbärare, så en länk mitt i en text behöver
 * understrykningen för att gå att skilja från omgivande ord.
 */
.text-block a,
.content a,
.text-page a,
.spec-list a {
    text-decoration: underline;
}

a:hover {
    color: var(--theme-text-hover);
}

/* Länkar som utgör hela kort skall inte färgas som text */
.index-card-link,
.customer-card-link {
    color: inherit;
}

/* Fokusring enligt profilen: 2px i temafärgens textvariant, offset 2px */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme-text);
    outline-offset: 2px;
}

/* ── Färgade hjälpklasser ───────────────────────────────────────────────── */

/*
 * Blocket hade tidigare åtta !important och styrde också navigationen. Båda
 * behövdes bara för att vinna över Bulma, och är borta nu: navigationen äger
 * sina egna färger i navbar.css, och den här regeln har inget att kämpa mot.
 *
 * Sex av de sju hjälpklasser som stod här — has-text-grey, -grey-dark,
 * -grey-light, -dark, -black och -white — används inte i någon vy. De ärvdes
 * från Bulma-tiden och är borttagna. Kvar är den enda som faktiskt förekommer.
 */
.has-background-grey-lighter {
    background-color: var(--bg-surface);
}

.content,
.content p,
.content li {
    color: inherit;
}

@media screen and (max-width: 1024px) {
    .navbar-menu {
        background: var(--bg-surface);
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow-overlay);
    }
}

.navbar-burger span {
    background-color: var(--text-primary);
}

.language-switcher {
    background-color: transparent;
}

/* ── Bulma: formulär ────────────────────────────────────────────────────── */

.label {
    color: var(--text-primary);
}

.input,
.textarea,
.select select {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
    border-radius: var(--r-sm);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-secondary);
}

.input:hover,
.textarea:hover {
    border-color: var(--theme-text);
}

.input:focus,
.textarea:focus {
    border-color: var(--theme-text);
    box-shadow: none;
    outline: 2px solid var(--theme-text);
    outline-offset: 2px;
}

.radio,
.checkbox {
    color: inherit;
}

.radio:hover,
.checkbox:hover {
    color: var(--theme-text);
}

/* Kryss- och radioknappar ritas av operativsystemet; accent-color låter dem
   följa temafärgen i stället för att bli ljusblå systemstandard. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--theme-fill);
}

/* ── Sajtens egna komponenter ───────────────────────────────────────────── */

.nov-button {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-input);
    border-radius: var(--r-sm);
    transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}

.nov-button:hover {
    background-color: var(--theme-fill);
    border-color: var(--theme-fill);
    color: var(--text-on-fill);
}

.large-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-subtle);
}

/* Nästlade kort behöver en nivå till, annars försvinner de mot sin förälder */
.large-card .large-card {
    background-color: var(--bg-raised);
}

.index-card {
    background-color: var(--bg-surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-subtle);
}

.index-card:hover {
    box-shadow: var(--shadow-overlay);
}

.text-overlay {
    background-color: var(--overlay-soft);
    color: var(--text-on-fill);
}

/* Logotypplattor. Helvita i båda teman — flera kundlogotyper är gjorda för
   vit bakgrund och tappar konturer mot allt annat. */
.customer-card,
.slide {
    background-color: var(--logo-plate);
    border: 1px solid var(--logo-plate-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-subtle);
}

/* Kunder vars logotyp bara finns som vit urstansning. Samma färg i båda
   teman, av samma skäl som den vita plattan. */
.customer-card.is-logo-dark {
    background-color: var(--logo-plate-dark);
    border-color: var(--logo-plate-dark-border);
}

/* I mörkt läge behöver den vita plattan lyftas från sidan, eftersom
   --shadow-subtle då är none. */
@media (prefers-color-scheme: dark) {
    .customer-card,
    .slide {
        border-color: rgba(255, 255, 255, 0.14);
    }
}

.additional-info {
    background: var(--overlay-medium);
    color: var(--text-on-fill);
}

.thumbnailImg {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-subtle);
}

.thumbnailImg:hover {
    box-shadow: var(--shadow-overlay);
}

.modal {
    background-color: var(--overlay-strong);
}

.close-btn {
    color: var(--text-on-fill);
}

.close-btn:hover,
.close-btn:focus {
    color: var(--text-secondary);
}

.show-more-btn {
    color: var(--theme-text);
}

.show-more-btn:hover {
    color: var(--theme-text-hover);
}

.customer-quotes {
    color: var(--text-primary);
}


/* ── Övriga referenser ──────────────────────────────────────────────────── */

/*
 * Kunder utan logotypfil, listade som text under logotypväggen. Poängen är att
 * hela referensbasen syns utan att väggens karaktär går förlorad — 77 av 200
 * kunder saknar logotyp och var tidigare helt osynliga.
 */
.other-references {
    max-width: 1200px;
    margin: 64px auto 48px;
    padding: 32px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-subtle);
}

.other-references h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-h3);
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--text-primary);
}

.other-references-intro {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 68ch;
    margin: 0 0 28px;
}

/* Kolumner i stället för rutnät: namnen är olika långa, och en spaltad lista
   läses uppifrån och ner utan att lämna hål. */
.other-references-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 32px;
}

.other-references-list li {
    /* Håll namn och ort ihop vid spaltbrytning. */
    break-inside: avoid;
    margin-bottom: 14px;
    font-size: var(--text-nav);
    line-height: 1.4;
}

.other-references-list a {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--theme-text);
    text-decoration: none;
}

.other-references-list a:hover {
    color: var(--theme-text-hover);
    text-decoration: underline;
}

.other-references-place {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-label);
    color: var(--text-secondary);
}

@media (max-width: 1023px) {
    .other-references-list { columns: 2; }
}

@media (max-width: 767px) {
    .other-references { padding: 16px; }
}

@media (max-width: 640px) {
    .other-references { margin: 40px auto 32px; }
    .other-references-list { columns: 1; }
}

/* ── Formulärvalidering ─────────────────────────────────────────────────── */

.form-notice {
    color: var(--accent-text);
    background-color: var(--accent-tint);
    border: 1px solid var(--accent-fill);
    border-radius: var(--r-sm);
}

.field-error {
    color: var(--accent-text);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--accent-fill);
}

/* ── Personuppgiftsnotis ────────────────────────────────────────────────── */

.privacy-note {
    background-color: var(--theme-tint);
    border-left: 3px solid var(--theme-fill);
    border-radius: var(--r-sm);
    color: var(--text-primary);
}

.privacy-inline,
.office-note {
    color: var(--text-secondary);
}

/* ── Kartan ─────────────────────────────────────────────────────────────── */

.nov-map {
    background-color: var(--map-ocean);
    border: 1px solid var(--map-border);
    border-radius: var(--r-md);
}

.map-land path {
    fill: var(--map-land);
    stroke: var(--map-border);
}

.map-marker circle {
    fill: var(--theme-text);
    stroke: var(--bg-surface);
}

.map-marker.is-active circle,
.map-marker.is-static circle {
    fill: var(--accent-text);
}

.map-marker:focus-visible circle {
    stroke: var(--accent-text);
}

.map-cluster-count {
    fill: var(--bg-surface);
}

.map-cluster.is-hub circle {
    fill: var(--bg-surface);
    stroke: var(--theme-text);
}

.map-cluster.is-hub .map-cluster-count {
    fill: var(--theme-text);
}

.map-marker.is-hover circle {
    stroke: var(--accent-text);
}

.map-legs line {
    stroke: var(--theme-text);
}

.map-marker-label {
    fill: var(--text-primary);
}

.map-controls button {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.map-controls button:hover {
    background: var(--theme-tint);
}

.map-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay);
    color: var(--text-primary);
}

.map-panel.is-hover {
    border-color: var(--theme-text);
}

.map-panels-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.map-panels-bar button {
    color: var(--text-primary);
    border-color: var(--border);
}

.map-panels-bar button:hover {
    background: var(--theme-tint);
}

.map-panel-close {
    color: var(--text-primary);
}

.map-panel-close:hover {
    background: var(--theme-tint);
}

.map-status {
    color: var(--text-secondary);
}

.map-status.is-error {
    color: var(--accent-text);
}


/* ── Reducerad rörelse ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Hoppa-till-innehållet ──────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--bg-surface);
    color: var(--theme-text);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: 'Roboto', sans-serif;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

/* ── Toppnavigation ────────────────────────────────────────────────────── */

.navbar-language {
    display: flex;
    justify-content: flex-end;
    min-width: 88px;
}

/* Minbredden balanserar logotypen när länkarna ligger centrerade i raden.
   Med hamburgarmeny finns inget att balansera, och de 88px fick inte plats. */
@media (max-width: 1023px) {
    .navbar-language { min-width: 0; }
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    transition: transform var(--t-hover);
}

.language-switcher:hover { transform: scale(1.05); }

.navbar-burger {
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* ── Sidfot ─────────────────────────────────────────────────────────────── */

/*
 * Ersätter den gamla sidfoten, som var Bootstrap 3-markup (.row, .col-xs-12,
 * .visible-sm) utan att Bootstrap laddades — alltså helt ostylad — plus två
 * osynliga flaggdivar vars CSS inte fanns någonstans.
 */
.site-footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    color: var(--text-primary);
    padding: 56px 0 24px;
    margin-top: 96px;
    font-family: 'Roboto', sans-serif;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 40px;
}

.site-footer h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.site-footer-brand img { display: block; margin-bottom: 16px; }

.site-footer-brand p {
    font-size: var(--text-nav);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 40ch;
}

.site-footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer-links a,
.site-footer-contact a {
    font-size: var(--text-nav);
    color: var(--text-secondary);
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-contact a:hover {
    color: var(--theme-text);
    text-decoration: underline;
}

.site-footer-contact address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: var(--text-nav);
}

.footer-icon {
    flex: none;
    margin-top: 2px;
    color: var(--theme-text);
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.site-footer-bottom p {
    margin: 0;
    font-size: var(--text-label);
    color: var(--text-secondary);
}

.site-footer-bottom a { color: var(--text-secondary); }
.site-footer-bottom a:hover { color: var(--theme-text); }

@media (max-width: 768px) {
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .site-footer { margin-top: 56px; }
}

/* ── Enkla textsidor (404, fel, integritetspolicy) ─────────────────────── */

.text-page {
    max-width: 68ch;
    margin: 0 auto;
    padding: 64px 24px 32px;
}

.text-page h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-h1);
    font-weight: 500;
    margin: 0 0 24px;
}

.text-page h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-h3);
    font-weight: 500;
    margin: 32px 0 8px;
}

.text-page p,
.text-page li {
    font-size: var(--text-body);
    line-height: 1.6;
    margin-bottom: 12px;
}

.text-page ul { padding-left: 24px; }

/* Sidmarginalen på mobil är 16px, som i .container. */
@media (max-width: 767px) {
    .text-page { padding-inline: 16px; }
}

/* Nedskalningen av textsidornas rubriker låg här med egna värden, där h2 blev
   16px — samma storlek som brödtexten. Skalan kommer nu från typography.css,
   som skalar ned via tokens under 768px. */


/* ── Hero: spela upp-knapp ─────────────────────────────────────────────── */

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--t-hover), transform var(--t-hover);
}

.video-play:hover {
    background: var(--theme-fill);
    transform: translate(-50%, -50%) scale(1.06);
}

.video-play:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.video-play[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .video-play:hover { transform: translate(-50%, -50%); }
}

/* ── Referenssidans renderingskostnad ──────────────────────────────────── */

/*
 * Referenssidan har 127 logotypkort och 73 textposter i samma dokument. Det är
 * avsiktligt: alla 200 kundnamn skall ligga i HTML:en så att de går att indexera
 * och söka i. Paginering skulle sprida dem över flera tunna sidor och göra dem
 * sämre sökbara, inte bättre.
 *
 * Kostnaden är i stället renderingen — att layouta och måla 200 element vid
 * första visning. content-visibility löser precis det: webbläsaren hoppar över
 * layout och målning för det som ligger utanför skärmen, men innehållet finns
 * kvar i DOM:en och nås av sökmotorer, sidsökning och skärmläsare.
 *
 * contain-intrinsic-size anger den uppskattade storleken så att rullningslisten
 * blir rätt innan innehållet mätts. Utan den hoppar sidan när man skrollar.
 */
.customer-grid-item {
    content-visibility: auto;
    contain-intrinsic-size: 200px 180px;
}

.other-references-list li {
    content-visibility: auto;
    contain-intrinsic-size: auto 44px;
}

/* ── Epix-sidans funktionskort ──────────────────────────────────────────── */

/*
 * Ledtexterna "Teknisk kärna" och "Resultat" hade tidigare färgen #B8860B
 * inskriven i ett style-attribut på var och en av dem, sammanlagt 34 gånger i
 * de två språkvyerna. Guldtonen finns inte i den grafiska profilen, och
 * eftersom den satt i markupen ändrades den inte i mörkt läge.
 */
.spec-label {
    color: var(--theme-text);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/*
 * Listorna låg inuti <p> med list-style-type i ett style-attribut. Bulma
 * nollställer listmarkörer, så punkterna måste sättas tillbaka här.
 */
.spec-list {
    list-style: disc outside;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.spec-list li {
    margin-bottom: 0.4rem;
}

/*
 * Resultatstycket är kortets slutsats och får en egen yta så att den som
 * skummar sidan hittar den utan att läsa hela listan. Tonad bakgrund i stället
 * för avvikande textfärg, eftersom tinten inte har något kontrastkrav att
 * uppfylla medan en ljusare textfärg hade haft det.
 */
.card-result {
    background: var(--theme-tint);
    border-left: 3px solid var(--theme-fill);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

.card-result .spec-label {
    margin-bottom: 0;
}

/* ── Innehållsförteckning på långa sidor ────────────────────────────────── */

/*
 * Epix-sidan har tolv avsnitt. Utan en förteckning måste besökaren skrolla
 * genom alltihop för att se vad som finns, och de tre inkommande länkarna från
 * startsidan (#whAndLogistic, #tpl, #order) är de enda ingångarna.
 */
.page-toc {
    margin: 2rem auto 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

@media (max-width: 767px) {
    .page-toc { padding: 16px; }
}

.page-toc h2 {
    font-size: var(--text-nav);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.page-toc ul {
    list-style: none;
    display: grid;
    /* min() så att en spalt aldrig blir bredare än rutan. Med fasta 15rem
       svämmade rubrikerna ut ur rutan så snart den var smalare än 240px. */
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.35rem 1.5rem;
    margin: 0;
    padding: 0;
}

.page-toc a {
    color: var(--theme-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.page-toc a:hover,
.page-toc a:focus-visible {
    border-bottom-color: currentColor;
}

/*
 * Ankarhopp lägger målrubriken längst upp i vyn, där den fastnar under den
 * fasta menyn. scroll-margin-top flyttar ned stoppunkten.
 */
.large-card[id],
.epix-modes[id] {
    scroll-margin-top: 5rem;
}

/* ── Införandesidans fyra steg ──────────────────────────────────────────── */

/*
 * Stegen är en ordnad lista, eftersom ordningen är innehåll: kartläggning före
 * konfiguration, migrering före driftstart. En skärmläsare får då både att det
 * är fyra steg och vilket av dem som är vilket.
 *
 * Siffran i rubriken är dekorativ (aria-hidden) just därför — <ol> förmedlar
 * redan numreringen, och utan aria-hidden lästes den upp två gånger.
 */
.implementation-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

/*
 * Tidslinjen: en linje i mellanrummet mellan två steg, som ritas uppifrån när
 * nästa steg kommer in i vyn, medan stegets siffra fylls med temafärgen. Det
 * visar att stegen hänger ihop och i vilken ordning de kommer.
 *
 * Linjen följer stegets inscroll (reveal.js), inte skrollpositionen, så den
 * kan inte hacka eller spelas baklänges. Steg som syns redan när sidan laddas,
 * och alla steg utan JavaScript eller vid reducerad rörelse, visas färdiga.
 *
 * Mellanrummet är stegens mt-6, alltså 3rem; kortets egen bottenmarginal
 * (2rem) kollapsar in i det.
 */
.implementation-steps > li {
    position: relative;
}

.implementation-steps > li + li::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 3rem;
    margin-left: -1px;
    background-color: var(--theme-fill);
    opacity: 0.5;
    transform-origin: top;
}

.implementation-steps > li.is-pending::before {
    transform: scaleY(0);
}

.implementation-steps > li.is-revealing::before {
    transition: transform 300ms ease-out var(--reveal-delay, 0ms);
}

.implementation-steps > li.is-pending .step-number {
    background-color: transparent;
    color: var(--theme-text);
}

.implementation-steps > li.is-revealing .step-number {
    transition:
        background-color 250ms ease-out,
        color 250ms ease-out;
    transition-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    background: var(--theme-fill);
    /* Ringen syns bara när siffran är ofylld (tidslinjen ovan); mot den
       fyllda bakgrunden smälter den in. */
    box-shadow: inset 0 0 0 2px var(--theme-fill);
    color: var(--text-on-fill);
    font-size: var(--text-nav);
    font-weight: 700;
    vertical-align: middle;
}

/* ── Kundsidorna ────────────────────────────────────────────────────────── */

/*
 * Logotypen ligger på vit platta i båda teman, av samma skäl som
 * referensboxarna: flera av logotyperna är gjorda för vit botten och fungerar
 * inte mot något annat.
 */
.customer-page-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 120px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

/* Samma sak som i referensbrickorna: <picture> är flexobjektet, inte <img>. */
.customer-page-logo picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.customer-page-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.installation-list {
    list-style: none;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0;
}

.installation-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.installation-item:last-child {
    border-bottom: none;
}

.installation-item h2 {
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

/*
 * Juridisk enhet när den skiljer sig från sidans kundnamn — ABB-sidan visar
 * även ABB Motors och ABB Robotics.
 */
.installation-entity {
    color: var(--text-secondary);
    font-size: var(--text-nav);
    margin-bottom: 0.5rem;
}

/* Innehållsbredden ligger i layout.css. Blocket som stod här behövde tre
   överstyrande mediefrågor för att komma runt att Bulma kapade .container vid
   960px; med Bulma avvecklad räcker en regel. */