/*----------------------------------------------------------------------------*/
/* @import '_fonts.css';
/*----------------------------------------------------------------------------*/
@font-face {
    font-family: 'Open Sans';
    src: url('../Fonts/open-sans-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../Fonts/open-sans-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../Fonts/open-sans-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../Fonts/open-sans-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair';
    src: url('../Fonts/playfair-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*----------------------------------------------------------------------------*/
/* @import '_minireset.css';
/*----------------------------------------------------------------------------*/
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal
}

ul {
    list-style: none
}

button, input, select {
    margin: 0
}

html {
    box-sizing: border-box
}

*, *::before, *::after {
    box-sizing: inherit
}

img, video {
    height: auto;
    max-width: 100%
}

iframe {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

/*----------------------------------------------------------------------------*/
/* @import '_css-variables.css';
/* primary #c19652
/* primary hover #ffba00
/*----------------------------------------------------------------------------*/
:root {
    /* AMBER */
    --color-primary-0: oklch(98.7% 0.022 95.277);
    --color-primary-10: oklch(96.2% 0.059 95.617);
    --color-primary-20: oklch(92.4% 0.12 95.746);
    --color-primary-30: oklch(87.9% 0.169 91.605);
    --color-primary-40: oklch(82.8% 0.189 84.429);
    --color-primary-50: oklch(76.9% 0.188 70.08);
    --color-primary-60: oklch(66.6% 0.179 58.318);
    --color-primary-70: oklch(55.5% 0.163 48.998);
    --color-primary-80: oklch(47.3% 0.137 46.201);
    --color-primary-90: oklch(41.4% 0.112 45.904);
    --color-primary-100: oklch(27.9% 0.077 45.635);

    /* ZIAN */
    --color-neutral-0: oklch(98.5% 0 0);
    --color-neutral-10: oklch(96.7% 0.001 286.375);
    --color-neutral-20: oklch(92% 0.004 286.32);
    --color-neutral-30: oklch(87.1% 0.006 286.286);
    --color-neutral-40: oklch(70.5% 0.015 286.067);
    --color-neutral-50: oklch(55.2% 0.016 285.938);
    --color-neutral-60: oklch(44.2% 0.017 285.786);
    --color-neutral-70: oklch(37% 0.013 285.805);
    --color-neutral-80: oklch(27.4% 0.006 286.033);
    --color-neutral-90: oklch(21% 0.006 285.885);
    --color-neutral-100: oklch(14.1% 0.005 285.823);

    --color-info: #0E55FF;
    --color-info-soft: #CFDEFF;
    --color-success: #378200;
    --color-success-soft: #F7FFF1;
    --color-warning: #846C00;
    --color-warning-soft: #FFF8D8;
    --color-error: #D70000;
    --color-error-soft: #FFE9E9;

    /* Headlines */
    --headline-family: "Playfair";
    --headline-weight: 500;
    --headline-line-height: 1.1;
    --headline-letter-spacing: 0;

    --headline-large-family: var(--headline-family);
    --headline-large-size: 48px;
    --headline-large-style: ;
    --headline-large-weight: var(--headline-weight);
    --headline-large-line-height: var(--headline-line-height);
    --headline-large-letter-spacing: var(--headline-letter-spacing);

    --headline-medium-family: var(--headline-family);
    --headline-medium-size: 40px;
    --headline-medium-style: ;
    --headline-medium-weight: var(--headline-weight);
    --headline-medium-line-height: var(--headline-line-height);
    --headline-medium-letter-spacing: var(--headline-letter-spacing);

    --headline-small-family: var(--headline-family);
    --headline-small-size: 32px;
    --headline-small-style: ;
    --headline-small-weight: var(--headline-weight);
    --headline-small-line-height: var(--headline-line-height);
    --headline-small-letter-spacing: var(--headline-letter-spacing);


    /* Sublines */
    --subline-family: "Open Sans";
    --subline-weight: 400;
    --subline-line-height: 1.5;
    --subline-letter-spacing: 0;

    --subline-large-family: var(--subline-family);
    --subline-large-size: 24px;
    --subline-large-style: ;
    --subline-large-weight: var(--subline-weight);
    --subline-large-line-height: var(--subline-line-height);
    --subline-large-letter-spacing: var(--subline-letter-spacing);

    --subline-medium-family: var(--subline-family);
    --subline-medium-size: 20px;
    --subline-medium-style: ;
    --subline-medium-weight: var(--subline-weight);
    --subline-medium-line-height: var(--subline-line-height);
    --subline-medium-letter-spacing: var(--subline-letter-spacing);

    --subline-small-family: var(--subline-family);
    --subline-small-size: 20px;
    --subline-small-style: ;
    --subline-small-weight: var(--subline-weight);
    --subline-small-line-height: var(--subline-line-height);
    --subline-small-letter-spacing: var(--subline-letter-spacing);

    /* Titles */
    --title-family: "Open Sans";
    --title-weight: 700;
    --title-line-height: 1.1;
    --title-letter-spacing: 0;

    --title-large-family: var(--title-family);
    --title-large-size: 20px;
    --title-large-style: ;
    --title-large-weight: var(--title-weight);
    --title-large-line-height: var(--title-line-height);
    --title-large-letter-spacing: var(--title-letter-spacing);

    --title-medium-family: var(--title-family);
    --title-medium-size: 18px;
    --title-medium-style: ;
    --title-medium-weight: var(--title-weight);
    --title-medium-line-height: var(--title-line-height);
    --title-medium-letter-spacing: var(--title-letter-spacing);

    --title-small-family: var(--title-family);
    --title-small-size: 16px;
    --title-small-style: ;
    --title-small-weight: var(--title-weight);
    --title-small-line-height: var(--title-line-height);
    --title-small-letter-spacing: var(--title-letter-spacing);

    /* Labels */
    --label-family: "Open Sans";
    --label-weight: 500;
    --label-line-height: 1.1;

    --label-large-family: var(--label-family);
    --label-large-size: 18px;
    --label-large-style: ;
    --label-large-weight: var(--label-weight);
    --label-large-line-height: var(--label-line-height);
    --label-large-letter-spacing: 0.1;

    --label-medium-family: var(--label-family);
    --label-medium-size: 16px;
    --label-medium-style: ;
    --label-medium-weight: var(--label-weight);
    --label-medium-line-height: var(--label-line-height);
    --label-medium-letter-spacing: 0.2;

    --label-small-family: var(--label-family);
    --label-small-size: 12px;
    --label-small-style: ;
    --label-small-weight: var(--label-weight);
    --label-small-line-height: var(--label-line-height);
    --label-small-letter-spacing: 0.25;

    /* Body */
    --body-family: "Open Sans";
    --body-weight: 400;
    --body-line-height: 1.5;
    --body-letter-spacing: 0;

    --body-large-family: var(--body-family);
    --body-large-size: 20px;
    --body-large-style: ;
    --body-large-weight: var(--body-weight);
    --body-large-line-height: var(--body-line-height);
    --body-large-letter-spacing: var(--body-letter-spacing);

    --body-medium-family: var(--body-family);
    --body-medium-size: 18px;
    --body-medium-style: ;
    --body-medium-weight: var(--body-weight);
    --body-medium-line-height: var(--body-line-height);
    --body-medium-letter-spacing: var(--body-letter-spacing);

    --body-small-family: var(--body-family);
    --body-small-size: 16px;
    --body-small-style: ;
    --body-small-weight: var(--body-weight);
    --body-small-line-height: var(--body-line-height);
    --body-small-letter-spacing: 0.1;

    /* typography */
    --margin-top-paragraph: 1em;
    --margin-bottom-paragraph: 1em;
    --max-width-paragraph: 784px;

    /* corners */
    --corners-s: 8px;
    --corners-m: 16px;
    --corners-l: 24px;

    /* click-targets */
    --click-targets-default: 48px;

    /* spacings */
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 64px;

    --padding-vertical-l: 40px;

    --inline-card-padding: 16px;

    --hero-content-padding-vertical: 40px;

    --spacing-frame: 56px;

    /* content */
    --header-height: 48px;

    --component-margin-vertical: 48px;
    --component-inside-padding-vertical: 56px;

    /* we handle colored and white background separately when on a content page with a sidebar */
    --component-neutral-padding-horizontal: 16px;
    --component-colored-padding-horizontal: 16px;

    --content-max-width: 1244px;

    /* miscellaneous */
    --effect-image-scale: scale(1.1);
  --header-padding-vertical: 16px;
  --menu-display: none;
  --menu-close-icon-display: none;
  --menu-menu-icon-display: block;
}

html[data-theme="light"] {
    /* AMBER */
    --color-primary-0: oklch(98.7% 0.022 95.277);
    --color-primary-10: oklch(96.2% 0.059 95.617);
    --color-primary-20: oklch(92.4% 0.12 95.746);
    --color-primary-30: oklch(87.9% 0.169 91.605);
    --color-primary-40: oklch(82.8% 0.189 84.429);
    --color-primary-50: oklch(76.9% 0.188 70.08);
    --color-primary-60: oklch(66.6% 0.179 58.318);
    --color-primary-70: oklch(55.5% 0.163 48.998);
    --color-primary-80: oklch(47.3% 0.137 46.201);
    --color-primary-90: oklch(41.4% 0.112 45.904);
    --color-primary-100: oklch(27.9% 0.077 45.635);

    /* ZIAN */
    --color-neutral-0: oklch(98.5% 0 0);
    --color-neutral-10: oklch(96.7% 0.001 286.375);
    --color-neutral-20: oklch(92% 0.004 286.32);
    --color-neutral-30: oklch(87.1% 0.006 286.286);
    --color-neutral-40: oklch(70.5% 0.015 286.067);
    --color-neutral-50: oklch(55.2% 0.016 285.938);
    --color-neutral-60: oklch(44.2% 0.017 285.786);
    --color-neutral-70: oklch(37% 0.013 285.805);
    --color-neutral-80: oklch(27.4% 0.006 286.033);
    --color-neutral-90: oklch(21% 0.006 285.885);
    --color-neutral-100: oklch(14.1% 0.005 285.823);
}

html[data-theme="dark"] {
    /* AMBER */
    --color-primary-100: oklch(98.7% 0.022 95.277);
    --color-primary-90: oklch(96.2% 0.059 95.617);
    --color-primary-80: oklch(92.4% 0.12 95.746);
    --color-primary-70: oklch(87.9% 0.169 91.605);
    --color-primary-60: oklch(82.8% 0.189 84.429);
    --color-primary-50: oklch(76.9% 0.188 70.08);
    --color-primary-40: oklch(66.6% 0.179 58.318);
    --color-primary-30: oklch(55.5% 0.163 48.998);
    --color-primary-20: oklch(47.3% 0.137 46.201);
    --color-primary-10: oklch(41.4% 0.112 45.904);
    --color-primary-0: oklch(27.9% 0.077 45.635);

    /* ZIAN */
    --color-neutral-100: oklch(98.5% 0 0);
    --color-neutral-90: oklch(96.7% 0.001 286.375);
    --color-neutral-80: oklch(92% 0.004 286.32);
    --color-neutral-70: oklch(87.1% 0.006 286.286);
    --color-neutral-60: oklch(70.5% 0.015 286.067);
    --color-neutral-50: oklch(55.2% 0.016 285.938);
    --color-neutral-40: oklch(44.2% 0.017 285.786);
    --color-neutral-30: oklch(37% 0.013 285.805);
    --color-neutral-20: oklch(27.4% 0.006 286.033);
    --color-neutral-10: oklch(21% 0.006 285.885);
    --color-neutral-0: oklch(14.1% 0.005 285.823);
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    :root {
        --component-margin-vertical: 56px;
        --component-neutral-padding-horizontal: 32px;
        --component-colored-padding-horizontal: 32px;
        --hero-content-padding-vertical: 48px;
        --inline-card-padding: 24px;
    }
}

/* Medium */
@media (min-width: 1024px) {
    :root {
        --headline-small-size: 40px;
        --headline-large-size: 64px;
        --headline-medium-size: 48px;
        --subline-large-size: 32px;
        --subline-medium-size: 24px;
        --component-margin-vertical: 80px;
        --hero-content-padding-vertical: 52px;
    }
}

/* Large */
@media (min-width: 1280px) {
    :root {
        /* 8-col */
        --max-width-paragraph: 808px;
        --header-height: 50px;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_component.css';
/*----------------------------------------------------------------------------*/
body {
    --text-color: var(--color-neutral-90);
    --background-color: var(--color-neutral-10);
    --text-color-highlight: var(--color-neutral-80);
    --component-padding-horizontal: var(--component-neutral-padding-horizontal);
    --component-padding-vertical: 0;
    --component-gap-colored-backgrounds: 0;
}

[class*='--bg-10'] {
    --background-color: var(--color-neutral-10);
    --component-padding-vertical: var(--component-inside-padding-vertical);
    --component-padding-horizontal: var(--component-colored-padding-horizontal);
    --component-margin-bottom-last-child: 0;
}

[class*='--bg-80'] {
    --background-color: var(--color-neutral-20);
    --text-color: var(--color-neutral-100);
    --text-color-highlight: var(--color-neutral-90);
    --component-padding-vertical: var(--component-inside-padding-vertical);
    --component-padding-horizontal: var(--component-colored-padding-horizontal);
    --link-color: var(--color-neutral-0);
    --link-color-hover: var(--color-neutral-10);
    --component-margin-bottom-last-child: 0;
}

[class*='--bg-100'] {
    --background-color: var(--color-neutral-20);
    --text-color: var(--color-neutral-90);
    --text-color-highlight: var(--color-neutral-80);
    --component-padding-vertical: var(--component-inside-padding-vertical);
    --component-padding-horizontal: var(--component-colored-padding-horizontal);
    --link-color: var(--color-primary-50);
    --link-color-hover: var(--color-primary-40);
    --component-margin-bottom-last-child: 0;
}

/* remove margins in between multiple components with background-colors */
[class*='component--bg-'] {
    & + & {
        margin-top: var(--component-gap-colored-backgrounds);
    }

    &:has(+ &) {
        margin-bottom: var(--component-gap-colored-backgrounds);
    }
}

.component {
    background: var(--background-color);
    padding: var(--component-padding-vertical) var(--component-padding-horizontal);
    margin: var(--component-margin-vertical) 0;

    color: var(--text-color);

    * > &:first-child {
        margin-top: var(--component-margin-top-first-child, var(--component-margin-vertical));
    }

    * > &:last-child {
        margin-bottom: var(--component-margin-bottom-last-child, var(--component-margin-vertical));
    }
}

.component--page-area {
    margin-top: 0;
    margin-bottom: 0;
}

.component--page-footer {
    --component-padding-vertical: var(--spacing-m);
}

.component__content {
    --component-padding-horizontal: 0;

    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;

    > *:first-child {
        margin-top: 0;
    }

    > *:last-child {
        margin-bottom: 0;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_base.css';
/*----------------------------------------------------------------------------*/
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  box-sizing: content-box;
  --text-color: var(--color-neutral-90);
  --background-color: var(--color-neutral-10);
  --text-color-highlight: var(--color-neutral-70);
  background-color: var(--background-color);
  color: var(--text-color);
}
/*
html.html-default {
  --text-color: var(--color-neutral-90);
  --background-color: var(--color-neutral-10);
  --text-color-highlight: var(--color-neutral-70);
  background-color: var(--background-color);
  color: var(--text-color);
}
*/
body {
    /* set dynamic default colors. These colors are changed using .theme-<name> classes.*/
    --link-color: var(--color-primary-60);
    --link-color-hover: var(--color-primary-50);
    --figure-color: var(--color-primary-50);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--text-color);
    font-family: var(--body-medium-family);
    font-size: var(--body-medium-size);
    font-weight: var(--body-medium-weight);
    line-height: var(--body-medium-line-height);
    max-width: 100%;
    padding-top: calc(var(--header-height) + 32px);
}


h1, h2, h3, h4, h5, h6,
.headline, .subline {
    text-wrap: balance;
}

p,
ul,
ol {
    color: var(--text-color);
    margin: var(--margin-top-paragraph) 0 var(--margin-bottom-paragraph);
    font-size: var(--paragraph-font-size, var(--body-medium-size));
    letter-spacing: var(--paragraph-letter-spacing, var(--body-letter-spacing));
}

p,
ul,
ol {
    /*max-width: var(--max-width-paragraph, auto);*/

    &:first-child {
        --margin-top-paragraph: var(--margin-top-paragraph-first-child, 0);
    }

    &:last-child {
        --margin-bottom-paragraph: var(--margin-bottom-paragraph-last-child, 0);
    }
}

li {
    margin: var(--margin-top-list-item, var(--margin-top-paragraph)) 0 var(--margin-bottom-list-item, var(--margin-bottom-paragraph));
}

a, button {
    color: var(--link-color);
    text-decoration: none;
    font-family: var(--link-family, inherit);
    font-size: var(--link-size, inherit);
    letter-spacing: var(--link-letter-spacing, inherit);

    &:not(:disabled) {
        cursor: pointer;
    }

    &:hover:not(:disabled) {
        color: var(--link-color-hover);
    }

    &:focus-visible {
        border-radius: 2px;
        outline: 2px solid var(--color-primary-100);
        box-shadow: 0 0 0 2px white;
    }
}

/* hide content, but make it available for screen readers */
.sr-only {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*----------------------------------------------------------------------------*/
/* @import '_icon.css';
/*----------------------------------------------------------------------------*/
.icon {
    width: var(--icon-width, var(--icon-size));
    height: var(--icon-height, var(--icon-size));
    fill: var(--icon-fill);
    color: var(--icon-color);
    margin: var(--icon-margin);
    display: var(--icon-display);
    position: var(--icon-position, static);
    top: var(--icon-top);
    left: var(--icon-left);
    right: var(--icon-right);
    bottom: var(--icon-bottom);
    rotate: var(--icon-rotate);
    padding: var(--icon-padding);
}

/*----------------------------------------------------------------------------*/
/* @import '_button.css';
/*----------------------------------------------------------------------------*/
body {
    --button-primary-color: var(--color-primary-50);
    --button-primary-color-hover: var(--color-primary-40);
    --button-primary-color-focus: var(--color-primary-40);
    --button-primary-color-pressed: var(--color-primary-40);
    --button-primary-content-color: var(--color-neutral-90);
    --button-primary-content-color-hover: var(--color-neutral-80);
    --button-primary-content-color-pressed: var(--color-neutral-80);
    --button-primary-border-color: var(--button-primary-color);
    --button-primary-border-color-hover: var(--button-primary-color-hover);
    --button-primary-border-color-pressed: var(--button-primary-color-pressed);
    --button-primary-content-border-bottom-color: transparent;
    --button-primary-content-border-bottom-color-hover: transparent;

    --button-secondary-color: transparent;
    --button-secondary-color-hover: var(--color-primary-40);
    --button-secondary-color-focus: var(--color-primary-40);
    --button-secondary-color-pressed: var(--color-primary-40);
    --button-secondary-content-color: var(--color-primary-50);
    --button-secondary-content-color-hover: var(--color-primary-40);
    --button-secondary-content-color-pressed: var(--color-primary-40);
    --button-secondary-border-color: var(--color-primary-50);
    --button-secondary-border-color-hover: var(--color-primary-50);
    --button-secondary-border-color-pressed: var(--color-primary-50);
    --button-secondary-content-border-bottom-color: transparent;
    --button-secondary-content-border-bottom-color-hover: transparent;

    --button-soft-color: var(--color-primary-40);
    --button-soft-color-hover: var(--color-primary-30);
    --button-soft-color-focus: var(--color-primary-30);
    --button-soft-color-pressed: var(--color-primary-30);
    --button-soft-content-color: var(--color-neutral-90);
    --button-soft-content-color-hover: var(--color-neutral-90);
    --button-soft-content-color-pressed: var(--color-neutral-90);
    --button-soft-border-color: var(--color-primary-40);
    --button-soft-border-color-hover: var(--color-primary-30);
    --button-soft-border-color-pressed: var(--color-primary-30);
    --button-soft-content-border-bottom-color: transparent;
    --button-soft-content-border-bottom-color-hover: transparent;

    --button-text-color: transparent;
    --button-text-color-hover: transparent;
    --button-text-color-focus: transparent;
    --button-text-color-pressed: transparent;
    --button-text-content-color: var(--color-primary-50);
    --button-text-content-color-hover: var(--color-primary-40);
    --button-text-content-color-pressed: var(--color-primary-40);
    --button-text-border-color: transparent;
    --button-text-border-color-hover: transparent;
    --button-text-border-color-pressed: transparent;
    --button-text-content-border-bottom-color: var(--color-primary-50);
    --button-text-content-border-bottom-color-hover: var(--color-primary-40);
}

[class*='--bg-80'],
[class*='--bg-100'] {
    --button-primary-color: var(--color-neutral-90);
    --button-primary-color-hover: var(--color-neutral-80);
    --button-primary-color-focus: var(--color-neutral-80);
    --button-primary-color-pressed: var(--color-neutral-80);
    --button-primary-content-color: var(--color-primary-50);
    --button-primary-content-color-hover: var(--color-neutral-80);
    --button-primary-content-color-pressed: var(--color-neutral-80);
    --button-primary-border-color: var(--color-neutral-90);
    --button-primary-border-color-hover: var(--color-neutral-80);
    --button-primary-border-color-pressed: var(--color-neutral-80);

    --button-secondary-color-hover: var(--color-neutral-90);
    --button-secondary-color-focus: var(--color-neutral-90);
    --button-secondary-color-pressed: var(--color-neutral-90);
    --button-secondary-content-color: var(--color-neutral-90);
    --button-secondary-content-color-hover: var(--color-neutral-80);
    --button-secondary-content-color-pressed: var(--color-neutral-80);
    --button-secondary-border-color: var(--color-neutral-90);
    --button-secondary-border-color-hover: var(--color-neutral-90);
    --button-secondary-border-color-pressed: var(--color-neutral-90);

    --button-soft-color-hover: var(--color-neutral-100);
    --button-soft-color-focus: var(--color-neutral-100);
    --button-soft-color-pressed: var(--color-neutral-100);
    --button-soft-content-color-hover: var(--color-neutral-90);
    --button-soft-content-color-pressed: var(--color-neutral-90);
    --button-soft-border-color-hover: var(--color-neutral-90);
    --button-soft-border-color-pressed: var(--color-neutral-90);

    --button-text-content-color: var(--color-neutral-90);
    --button-text-content-color-hover: var(--color-neutral-80);
    --button-text-content-color-pressed: var(--color-neutral-80);

    --button-text-content-border-bottom-color: var(--color-neutral-100);
    --button-text-content-border-bottom-color-hover: var(--color-neutral-80);
}

.button {
    --button-color: var(--button-primary-color);
    --button-color-hover: var(--button-primary-color-hover);
    --button-color-focus: var(--button-primary-color-focus);
    --button-color-pressed: var(--button-primary-color-pressed);
    --button-content-color: var(--button-primary-content-color);
    --button-content-color-hover: var(--button-primary-content-color-hover);
    --button-content-color-pressed: var(--button-primary-content-color-pressed);
    --button-border-color: var(--button-primary-border-color);
    --button-border-color-hover: var(--button-primary-border-color-hover);
    --button-border-color-pressed: var(--button-primary-border-color-pressed);
    --button-icon-margin-to-text: var(--spacing-xs);
    --button-content-border-bottom: 2px solid var(--button-content-border-bottom-color);

    --icon-size: 24px;
    --icon-fill: var(--button-content-color);

    display: inline-flex;
    max-width: max-content;
    margin: var(--button-margin, 0);
    padding: var(--button-padding-vertical, var(--spacing-s)) var(--spacing-m);
    border: 2px solid var(--button-border-color);
    border-radius: var(--corners-l);
    background: var(--button-color);
    font-size: var(--button-font-size, var(--font-size-body));
    cursor: pointer;
    min-height: var(--click-targets-default);
    box-sizing: border-box;
    position: var(--button-position);
    bottom: var(--button-bottom);

    &:hover:not(:disabled),
    &:focus-visible:not(:disabled) {
        /* changes the color of text and icon */
        --button-content-color: var(--button-content-color-hover);
        --button-content-border-bottom-color: var(--button-content-border-bottom-color-hover);
        --button-color: var(--button-color-hover);
        --button-border-color: var(--button-border-color-hover);
    }

    &:active {
        /* changes the color of text and icon */
        --button-content-color: var(--button-content-color-pressed);
        --button-color: var(--button-color-pressed);
        --button-border-color: var(--button-border-color-pressed);
    }

    &:focus-visible {
        border-radius: var(--corners-l);
        border-color: var(--button-border-color);
        outline: 2px solid var(--button-secondary-color-focus);
        background: var(--button-color-focus);
    }
}

.button--secondary {
    --button-color: var(--button-secondary-color, var(--button-primary-color));
    --button-color-hover: var(--button-secondary-color-hover, var(--button-primary-color-hover));
    --button-color-focus: var(--button-secondary-color-focus, var(--button-primary-color-focus));
    --button-color-pressed: var(--button-secondary-color-pressed, var(--button-primary-color-pressed));
    --button-border-color: var(--button-secondary-border-color, var(--button-primary-border-color));
    --button-border-color-hover: var(--button-secondary-border-color-hover, var(--button-primary-border-color-hover));
    --button-border-color-pressed: var(--button-secondary-border-color-pressed, var(--button-primary-border-color-pressed));
    --button-content-color: var(--button-secondary-content-color, var(--button-primary-content-color));
    --button-content-color-hover: var(--button-secondary-content-color-hover, var(--button-primary-content-color-hover));
    --button-content-color-pressed: var(--button-secondary-content-color-pressed, var(--button-primary-content-color-pressed));
    --button-content-border-bottom-color: var(--button-secondary-content-border-bottom-color, var(--button-primary-content-border-bottom-color));
    --button-content-border-bottom-color-hover: var(--button-secondary-content-border-bottom-color-hover, var(--button-primary-content-border-bottom-color-hover));
}

.button--soft {
    --button-color: var(--button-soft-color, var(--button-primary-color));
    --button-color-hover: var(--button-soft-color-hover, var(--button-primary-color-hover));
    --button-color-focus: var(--button-soft-color-focus, var(--button-primary-color-focus));
    --button-color-pressed: var(--button-soft-color-pressed, var(--button-primary-color-pressed));
    --button-border-color: var(--button-soft-border-color, var(--button-primary-border-color));
    --button-border-color-hover: var(--button-soft-border-color-hover, var(--button-primary-border-color-hover));
    --button-border-color-pressed: var(--button-soft-border-color-pressed, var(--button-primary-border-color-pressed));
    --button-content-color: var(--button-soft-content-color, var(--button-primary-content-color));
    --button-content-color-hover: var(--button-soft-content-color-hover, var(--button-primary-content-color-hover));
    --button-content-color-pressed: var(--button-soft-content-color-pressed, var(--button-primary-content-color-pressed));
    --button-content-border-bottom-color: var(--button-soft-content-border-bottom-color, var(--button-primary-content-border-bottom-color));
    --button-content-border-bottom-color-hover: var(--button-soft-content-border-bottom-color-hover, var(--button-primary-content-border-bottom-color-hover));
}

.button--text {
    --button-color: var(--button-text-color, var(--button-primary-color));
    --button-color-hover: var(--button-text-color-hover, var(--button-primary-color-hover));
    --button-color-focus: var(--button-text-color-focus, var(--button-primary-color-focus));
    --button-color-pressed: var(--button-text-color-pressed, var(--button-primary-color-pressed));
    --button-border-color: var(--button-text-border-color, var(--button-primary-border-color));
    --button-border-color-hover: var(--button-text-border-color-hover, var(--button-primary-border-color-hover));
    --button-border-color-pressed: var(--button-text-border-color-pressed, var(--button-primary-border-color-pressed));
    --button-padding-vertical: var(--spacing-xs);
    --button-content-color: var(--button-text-content-color, var(--button-primary-content-color));
    --button-content-color-hover: var(--button-text-content-color-hover, var(--button-primary-content-color-hover));
    --button-content-color-pressed: var(--button-text-content-color-pressed, var(--button-primary-content-color-pressed));
    --button-content-border-bottom-color: var(--button-text-content-border-bottom-color, var(--button-primary-content-border-bottom-color));
    --button-content-border-bottom-color-hover: var(--button-text-content-border-bottom-color-hover, var(--button-primary-content-border-bottom-color-hover));
    --button-icon-margin-to-text: var(--spacing-s);

    border-radius: 2px;
    padding-left: 0;
    padding-right: 0;
}

.button--icon-only {
    padding: var(--spacing-s);
    min-width: var(--click-targets-default);
}

.button__content {
    color: var(--button-content-color);
    display: inline-flex;
    gap: var(--button-icon-margin-to-text);
    align-items: center;

    > .icon {
        display: inline-block;
    }
}

.button__text {
    color: var(--color-neutral-90);
    align-items: center;
    gap: var(--button-icon-margin-to-text);
    display: inline-flex;
    border-bottom: 2px solid var(--button-content-border-bottom-color);
}

/*----------------------------------------------------------------------------*/
/* @import '_button-wrapper.css';
/*----------------------------------------------------------------------------*/
.button-wrapper {
    display: inline-flex;
    gap: var(--spacing-m);
    flex-wrap: wrap;
}

.button-wrapper__p {
    --margin-top-paragraph: var(--spacing-l);
}

/*----------------------------------------------------------------------------*/
/* @import '_article.css';
/*----------------------------------------------------------------------------*/
.article {
    --component-gap-colored-backgrounds: var(--spacing-l);
    --article-aside-padding-top: var(--component-margin-vertical);
}

.article__content {
    --component-margin-top-first-child: 0;
    min-width: 0;
}

.article__aside {
    --component-margin-vertical: var(--spacing-l);

    display: block;
    border-top: 1px solid var(--color-neutral-20);
    padding-top: var(--article-aside-padding-top);
    container-name: aside;
    container-type: inline-size;

    .component:first-child {
        --component-margin-top-first-child: 0;
    }
}

/**
 * Viewports
 */

/* Large */
@media (min-width: 1280px) {
    .article {
        display: grid;
        grid-template-columns: 1fr 288px;
        gap: var(--spacing-l);
    }

    .article__aside {
        --article-aside-padding-top: 0;

        border: none;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_author.css';
/*----------------------------------------------------------------------------*/
.author {
    --person-text-align: center;
    --person-picture-justify-content: center;

    margin: var(--component-margin-vertical) 0;
    display: grid;
    gap: 35px;

    .article__aside .component:first-child & {
        margin-top: var(--component-margin-top-first-child);
    }
}

.author__image {
    align-self: center;
}

.author__content {
    --paragraph-font-size: var(--body-small-size);
    --paragraph-letter-spacing: var(--body-small-letter-spacing);
    --icon-size: 24px;
    --link-letter-spacing: 0.2px;
    --link-size: var(--label-medium-size);
    --background: var(--color-neutral-20);
    --before-content-height: 22px;
    --before-content-width: 32px;

    background: var(--background);
    padding: 16px;
    border-radius: var(--corners-s);
    position: relative;
    contain: inline-size;

    &:before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 32px;
        height: var(--before-content-height);
        transform: translateX(-50%);
        background:
            radial-gradient(farthest-side at top left , transparent 98%, var(--background) 100%) left,
            radial-gradient(farthest-side at top right, transparent 98%, var(--background) 100%) right;
        background-size: 50.2% 100%;
        background-repeat: no-repeat;
    }
}

.author__listitem,
.author__listitem_link {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    align-items: center;
    width: 100%;
}

.author__listlitem_icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.author__listlitem_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) and (max-width: 1280px) {
    .author {
        grid-template-columns: 200px 1fr;
    }

    .author__content {
        &:before {
            left: calc(var(--before-content-height) / 2 * -1);
            top: calc(50% - var(--before-content-width)/2);
            transform-origin: 100% 50%;
            transform: translate(-100%, -50%) rotate(-90deg);
        }
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_code.css';
/*----------------------------------------------------------------------------*/
pre {
	max-width: 100%;
	background: var(--color-neutral-20);
	border-left: 5px solid var(--color-primary-50);
	color: var(--color-neutral-90);
	padding: 1.33em;
	border-radius: var(--corners-s);
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
	font-family: "Courier New", monospace;
}

pre code {
  background: transparent;
	color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  white-space: pre;
}

pre::-webkit-scrollbar {
	height: 6px;
}
pre::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,0.2);
	border-radius: 3px;
}
	pre::-webkit-scrollbar-track {
	background: transparent;
}

/*----------------------------------------------------------------------------*/
/* @import '_figure.css';
/*----------------------------------------------------------------------------*/
.figure {
    margin: var(--figure-margin-top) 0 var(--figure-margin-bottom);
}

.figure__caption {
    margin-top: var(--spacing-s);
    font-size: var(--body-small-size);
    letter-spacing: var(--body-small-letter-spacing);
    color: var(--figure-color);
}

[class*='--bg-80'],
[class*='--bg-100'] {
    --figure-color: var(--color-neutral-0);
}

/*----------------------------------------------------------------------------*/
/* @import '_footer.css';
/*----------------------------------------------------------------------------*/
footer {
    grid-row: 3;
}
.footer {
    --component-padding-vertical: var(--spacing-m);
    --footer-columns: 1;
    --footer-grid-gap: var(--spacing-m);

    display: grid;
    grid-template-columns: repeat(var(--footer-columns), 1fr);
    grid-gap: var(--footer-grid-gap);
    padding: var(--spacing-m) 0;
}

.footer__logo {
    height: var(--header-height);
    line-height: var(--header-height);
    max-width: 270px;
    display: inline-flex;
    align-items: center;

    svg, img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

.footer__col--1 {
    grid-column: 1 / span var(--footer-columns);
}

.footer__meta {
    --max-width-paragraph: 100%;

    border-top: 1px solid var(--color-neutral-80);
    padding: var(--spacing-m) 0;
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .footer {
        --footer-columns: 2;
    }
}

/* Medium */
@media (min-width: 1024px) {
    .footer {
        --footer-columns: 3;
    }
}

/* Large */
@media (min-width: 1280px) {
    .footer {
        --footer-columns: 4;
        --footer-grid-gap: var(--spacing-l);
    }

    .footer__col--1 {
        grid-column: inherit;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_header.css';
/*----------------------------------------------------------------------------*/
/*
/* --- Body & Overlay --- */
.body--menu-open {
  --menu-display: block;
  --menu-menu-icon-display: none;
  --menu-close-icon-display: block;
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
  touch-action: none;
}

/* --- Header Bar (Logga och menyknapp) --- */
.header {
    background: var(--color-neutral-10);
    color: var(--color-neutral-90);
    height: var(--header-height);
    padding-top: var(--header-padding-vertical);
    padding-bottom: var(--header-padding-vertical);
    z-index: 1000;
}

.header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--header-height);
    width: 100%;
}

.header__content {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding-left: var(--component-padding-horizontal);
  padding-right: var(--component-padding-horizontal);
  gap: var(--spacing-s);
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1010;
  text-decoration: none;
}

.header__menu-button {
  flex: 1;
  text-align: right;
  position: relative;
  z-index: 1010;
}

.header__menu-button .icon--close { display: var(--menu-close-icon-display); }
.header__menu-button .icon--menu { display: var(--menu-menu-icon-display); }

.header_menu + * {
  margin-top: var(--header-height);
}

/* --- Meny-containern (Overlay) --- */
.header__menu {
  position: fixed;
  inset: 0;
  z-index: 900; /* Precis under .header */
  background: var(--color-neutral-10);
  color: var(--color-primary-50);
  display: var(--menu-display);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  /* Startar under headerns höjd */
  padding-top: calc(var(--header-height) + (var(--header-padding-vertical) * 2));
  transition: opacity 0.3s ease;
  overscroll-behavior: contain;
}

.header__menu--open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Navigationslista & Items --- */
.header__nav {
  width: 100%;
}

.header__nav-list {
  list-style: none;
  padding: var(--component-padding-horizontal);
  max-width: 600px;
  margin: 0 auto;
}

/* Animation för länkarna (triggat via JS) */
.header__nav-list-item {
  border-bottom: 1px solid var(--color-primary-20);
  opacity: 0;
  transform: translateY(10px);
}

/* Animation för länkarna (triggat via JS) */
.header__nav-list-item:hover {
  border-bottom: 1px solid var(--color-primary-40);
  opacity: 0;
  transform: translateY(10px);
}

.header__nav-item-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.header__nav-item {
  flex-grow: 1;
  padding: 16px 0;
  font-size: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.is-current > .header__nav-item-wrapper > .header__nav-item {
  font-weight: bold;
  color: var(--color-primary-50);
  border-bottom: 1px solid var(--color-primary-50);
}

/* --- Submenyer --- */
.header__subnav {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  display: none;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__subnav.is-open {
  display: block;
  max-height: none;
}

.submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: transform 0.3s ease;
}

.submenu-toggle.open {
  transform: rotate(180deg);
}

/* --- Desktop-justeringar --- */
@media (min-width: 768px) {
  .header__menu {
    display: flex;
    align-items: flex-start; /* Viktigt: starta uppifrån så padding fungerar */
    justify-content: center;
    background: var(--color-neutral-10);
    padding-top: 15vh; /* Flyttar ner menyn snyggt på stora skärmar */
  }

  .header__nav-list {
    text-align: center;
  }

  .header__nav-item {
    font-size: 2rem;
    padding: 20px 0;
  }

  .header__subnav {
    padding-left: 0;
  }

  .header__subnav .header__nav-item {
    font-size: 1.25rem;
    padding: 8px 0;
  }
}

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

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--bg-color-rgb, 0, 0, 0), 0.85);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.search-overlay-content {
    width: 100%;
    max-width: 800px;
    padding: 0 40px;
    transform: translateY(30px);
    transition: transform 0.5s ease;
}

.search-overlay.is-open .search-overlay-content {
    transform: translateY(0);
}

.search-overlay-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--primary-color);
    color: white;
    font-size: 3rem;
    font-weight: 700;
    outline: none;
    padding: 10px 0;
}

.search-overlay-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
}

.search-hint {
    margin-top: 20px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
}

.header__search-trigger {
    background: none;
    border: none;
    color: var(--text-color);
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100; /* Så den ligger ovanför Heron */
}

.header__search-trigger:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Om du har en vit header på mobilen men mörk på desktop, 
   se till att ikonen följer med i färgerna */
.header__search-trigger svg {
    stroke: currentColor;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 10px; /* Mellanrum mellan sök och meny */
}

/* Dölj sökboxen på sida 10 om vi kommer in med en sökning via URL 
body.is-searching #tx_indexedsearch {
    opacity: 0.5;
    pointer-events: none;
}
*/
/* LANGUAGE SWITCH */

.language-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 24px 20px; /* Lite mer luft i toppen (24px) */
    margin-top: auto; 
    
    /* En mjukare linje som tonar ut mot kanterna */
    /*border-top: 1px solid rgba(255, 255, 255, 0.1);*/
    
    /* Om du vill ha en ännu lyxigare känsla, använd ett gradient-streck: */
    border-top: none;
    background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
}

html[data-theme="dark"] .language-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0; /* Börja osynlig */
    will-change: transform, opacity; /* Hjälper webbläsaren att flyta på bättre */
}

/* Dark-mode anpassning */
html[data-theme="dark"] .lang-item {
    background: rgba(0, 0, 0, 0.2);
}

.lang-item .lang-code {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-color);
}

.lang-item .lang-name {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
}

/* Hover & Active State */
.lang-item:hover, .lang-item.is-active {
    background: var(--primary-color, oklch(60% 0.15 250)); /* Din accentfärg */
    border-color: transparent;
    transform: translateY(-5px);
}

.lang-item.is-active .lang-code, 
.lang-item.is-active .lang-name {
    color: #fff;
    opacity: 1;
}

/*----------------------------------------------------------------------------*/
/* @import '_headline.css';
/*----------------------------------------------------------------------------*/
.headline {
    font-family: var(--headline-medium-family);
    font-size: var(--headline-medium-size);
    font-weight: var(--headline-medium-weight);
    line-height: var(--headline-medium-line-height);
    letter-spacing: var(--headline-medium-letter-spacing);
    margin-bottom: var(--headline-margin-bottom, var(--spacing-l));
    max-width: var(--max-width-paragraph);
    color: var(--headline-color, var(--text-color));

    &:has(+ .subline) {
        margin-bottom: var(--spacing-s);
    }

    &:last-child {
        --headline-margin-bottom: var(--margin-bottom-paragraph-last-child, 0);
    }
}

.headline--small {
    font-family: var(--headline-small-family);
    font-size: var(--headline-small-size);
    font-weight: var(--headline-small-weight);
    line-height: var(--headline-small-line-height);
    letter-spacing: var(--headline-small-letter-spacing);
}

.headline--large {
    font-family: var(--headline-large-family);
    font-size: var(--headline-large-size);
    font-weight: var(--headline-large-weight);
    line-height: var(--headline-large-line-height);
    letter-spacing: var(--headline-large-letter-spacing);
}

/*----------------------------------------------------------------------------*/
/* @import '_hero.css';
/*----------------------------------------------------------------------------*/
.hero {
    --image-border-radius: 0;
    --component-padding-vertical: var(--padding-vertical-l);
    --picture-clip-path: polygon(0 0, 100% 0, 100% 84%, 0% 100%);
    --hero-content-padding: var(--hero-content-padding-vertical) var(--component-padding-horizontal);

    background: var(--color-neutral-20);
    display: grid;
}

.hero__content-wrapper {
    order: 2;
}

.hero__content {
    padding: var(--hero-content-padding);
}

.hero__image {
    order: 1;
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .hero {
        --hero-height: 640px;
        --hero-content-position: absolute;
        --hero-grid-template-columns: 1fr 1fr;
        --hero-content-max-width: calc((var(--content-max-width) / 2));
        --picture-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
        --picture-height: var(--hero-height);
        --image-height: var(--hero-height);
        --image-object-fit: cover;

        grid-template-columns: var(--hero-grid-template-columns);
        height: var(--hero-height);
        overflow: hidden;
        position: relative;
    }

    .hero--small {
        --hero-height: 480px;
    }

    .hero--text-only {
        --hero-height: auto;
        --hero-content-position: relative;
        --hero-grid-template-columns: 1fr;
        --hero-content-max-width: var(--max-width-paragraph);
    }

    .hero__content-wrapper {
        order: 1;
    }

    .hero__content {
        --max-width-paragraph: 50%;

        align-self: center;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: var(--hero-content-position);
        max-width: var(--content-max-width);
        margin-left: auto;
        margin-right: auto;
    }

    .hero__image {
        order: 2;
    }
}

/* Large */
@media (min-width: 1280px) {
    .hero__content {
        --max-width-paragraph: var(--hero-content-max-width);
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_image.css';
/*----------------------------------------------------------------------------*/
.image {
    width: var(--image-width, 100%);
    height: var(--image-height, auto);
    aspect-ratio: var(--image-aspect-ratio);
    border-radius: var(--image-border-radius, var(--corners-l));
    transform: var(--image-transform);
    transition: transform 0.3s;
    object-fit: var(--image-object-fit, unset);
}

.image__picture {
    display: var(--picture-display, flex);
    border-radius: var(--image-border-radius, var(--corners-l));
    overflow: var(--picture-overflow);
    height: var(--picture-height, auto);
    clip-path: var(--picture-clip-path, none);
    justify-content: var(--picture-justify-content);
}

/*----------------------------------------------------------------------------*/
/* @import '_linklist.css';
/*----------------------------------------------------------------------------*/
.linklist {
    --list-item-display: list-item;
    --click-targets-default: 32px;
    --margin-bottom-list-item: 0;
    --margin-top-list-item: 0;
    --button-text-content-border-bottom-color: transparent;
    --linklist-inline-gap: var(--spacing-m);
}

.linklist--inline {
    --list-item-display: inline;
    --max-width-paragraph: auto;

    display: flex;
    gap: var(--linklist-inline-gap);
    flex-wrap: wrap;
    justify-content: center;
}

.linklist__item {
    display: var(--list-item-display);
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .linklist {
        --linklist-inline-gap: var(--spacing-s) var(--padding-vertical-l);
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_list.css';
/*----------------------------------------------------------------------------*/
.list {
    li {
        --margin-bottom-list-item: 0;
        --margin-top-list-item: 0;

        margin-left: 20px;
    }
}

.list--unordered {
    list-style-type: unset;
}

/*----------------------------------------------------------------------------*/
/* @import '_page.css';
/*----------------------------------------------------------------------------*/
.site-wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: calc(100vh - (var(--header-height) + 32px));
}
.page__content {
    --text-color: var(--color-neutral-90);
    --background-color: var(--color-neutral-10);
    --text-color-highlight: var(--color-neutral-70);
    display: block;
    flex-grow: 1;
    grid-row: 2;
}

.page__content--fixed {
    padding-top: calc(var(--header-height) + calc(var(--header-padding-vertical) * 2));
}

/*----------------------------------------------------------------------------*/
/* @import '_person.css';
/*----------------------------------------------------------------------------*/
.person--with-image {
    --picture-justify-content: var(--person-picture-justify-content);
    --image-width: var(--person-image-size, 128px);
    --image-height: var(--person-image-size, 128px);
    --image-border-radius: var(--person-image-size, 128px);

    display: grid;
    grid-template-columns: var(--person-with-image-grid-template-columns);
    grid-gap: var(--spacing-m);
    text-align: var(--person-text-align, inherit);

    img {
        margin: 0 auto;
    }
}

.person__text {
    align-self: center;
}

.person__name {
    display: block;
    font-size: var(--title-large-size);
    font-weight: var(--title-large-weight);
    letter-spacing: var(--title-letter-spacing);
    line-height: var(--title-line-height);
}

.person__position {
    display: block;
    color: var(--text-color-highlight);
    font-size: var(--subline-small-size);
    font-weight: var(--subline-small-weight);
    letter-spacing: var(--subline-letter-spacing);
    line-height: var(--subline-line-height);
}

/*----------------------------------------------------------------------------*/
/* @import '_sidebar.css';
/*----------------------------------------------------------------------------*/
/* 1. Själva containern som sköter den mjuka animationen */
.sidebar__subnav-container {
  display: grid;
  grid-template-rows: 0fr; /* Stängd (tar ingen plats) */
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* 2. Öppet-läge (triggas av TYPO3s 'is-active' eller JS 'open') */
.is-active > .sidebar__subnav-container,
.sidebar__nav-list-item:has(.JS_sidebar-toggle.open) > .sidebar__subnav-container {
  grid-template-rows: 1fr; /* Expanderar till innehållets exakta höjd */
}

/* 3. Innehållet inuti griden (MÅSTE ha min-height: 0 för att det ska fungera) */
.sidebar__subnav {
  min-height: 0;
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
}

/* 4. Raden med länk och knapp */
.sidebar__nav-item-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--link-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 5. Toggle-knappen */
.sidebar__submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: inherit;
}

/* 6. Ikonen och dess rotation */
.sidebar__submenu-toggle .toggle-icon {
  transition: transform 0.3s ease;
}

.sidebar__submenu-toggle.open .toggle-icon,
.is-active > .sidebar__nav-item-wrapper .toggle-icon {
  transform: rotate(180deg);
}

/* 7. Justering för länkar (valfritt, för snyggare touch) */
.sidebar__nav-item {
  flex: 1;
  text-decoration: none;
  padding: 8px 0;
}

/*----------------------------------------------------------------------------*/
/* @import '_sociallinks.css';
/*----------------------------------------------------------------------------*/
.sociallinks {
    --list-item-display: inline;
    --icon-size: 32px;
    --icon-padding: var(--spacing-s);
    --margin-top-paragraph: var(--spacing-s);
    --margin-top-list-item: 0;
    --margin-bottom-list-item: 0;

    gap: var(--spacing-s);
    flex-wrap: wrap;
    display: flex;
}

.sociallinks__item {
    display: var(--list-item-display);
}

/*----------------------------------------------------------------------------*/
/* @import '_subline.css';
/*----------------------------------------------------------------------------*/
.subline {
    font-family: var(--subline-medium-family);
    font-size: var(--subline-medium-size);
    font-weight: var(--subline-medium-weight);
    line-height: var(--subline-medium-line-height);
    letter-spacing: var(--subline-medium-letter-spacing);
    margin-bottom: var(--margin-bottom-subline, var(--spacing-l));
    max-width: var(--max-width-paragraph);
    margin-top: var(--subline-margin-top, 0);

    &:last-child {
        --margin-bottom-subline: var(--margin-bottom-paragraph-last-child, 0);
    }
}

.subline--small {
    font-family: var(--subline-small-family);
    font-size: var(--subline-small-size);
    font-weight: var(--subline-small-weight);
    line-height: var(--subline-small-line-height);
    letter-spacing: var(--subline-small-letter-spacing);
}

.subline--large {
    font-family: var(--subline-large-family);
    font-size: var(--subline-large-size);
    font-weight: var(--subline-large-weight);
    line-height: var(--subline-large-line-height);
    letter-spacing: var(--subline-large-letter-spacing);
}

/*----------------------------------------------------------------------------*/
/* @import '_teaser-scroller.css';
/*----------------------------------------------------------------------------*/
.teaser-scroller {
    --teaser-gap: var(--spacing-m);

    /* hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    /* hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none;
    }

    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    width: calc(100vw - var(--horzontal-spacing));
    margin-left: calc(var(--horizontal-spacing) * -1);
}

.teaser-scroller__list {
    display: flex;
    flex-direction: row;
    gap: var(--teaser-gap);
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .teaser-scroller {
        margin-left: 0;
        width: 100%;
    }

    .teaser-scroller__list {
        margin-left: 0;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_testimonial.css';
/*----------------------------------------------------------------------------*/
[class*='--bg-80'] ,
[class*='--bg-100'] {
    --testimonal-quote-icon-color: var(--color-neutral-0);
}

.testimonial {
    --icon-color: var(--testimonal-quote-icon-color, var(--color-primary-100));
    --image-border-radius: 80px;
    --margin-top-paragraph: 0;
    --margin-bottom-paragraph: 24px;
    --person-image-size: 80px;
    --person-with-image-grid-template-columns: 80px 1fr;

    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: var(--spacing-m);
}

.testimonial__content {
    max-width: var(--max-width-paragraph);
}

.testimonial__text {
    font-family: var(--headline-small-family);
    font-size: var(--headline-small-size);
    font-weight: var(--headline-small-weight);
    line-height: var(--headline-small-line-height);
    letter-spacing: var(--headline-small-letter-spacing);
}

/*----------------------------------------------------------------------------*/
/* @import '_textmedia-teaser.css';
/*----------------------------------------------------------------------------*/
:root {
    --textmedia-teaser-collapsed-border-radius: var(--corners-l) 0 0 var(--corners-l);
    --textmedia-teaser-collapsed-display: grid;
    --textmedia-teaser-collapsed-image-width: 344px;
}

body {
    --textmedia-teaser-background: var(--color-neutral-20);
}

[class*='--bg-10'] {
    --textmedia-teaser-background: var(--color-neutral-20);
}

.textmedia-teaser {
    --textmedia-meta-color: var(--color-neutral-70);
    --textmedia-text-color: var(--color-neutral-90);
    --textmedia-teaser-border-color-focus: var(--color-neutral-100);
    --textmedia-teaser-outline-focus: var(--color-neutral-70);
    --textmedia-teaser-background-color-focus: var(--color-neutral-100);

    --image-border-radius: var(--corners-l) var(--corners-l) 0 0;
    --image-object-fit: cover;
    --headline-margin-bottom: 8px;
    --button-margin: 24px 0 0;

    /* default colors for buttons independent of background */
    --button-primary-color: var(--color-primary-50);
    --button-primary-color-hover: var(--color-neutral-70);
    --button-primary-color-focus: var(--color-neutral-70);
    --button-primary-color-pressed: var(--color-neutral-70);
    --button-primary-content-color: var(--color-neutral-90);
    --button-primary-content-color-hover: var(--color-neutral-100);
    --button-primary-content-color-pressed: var(--color-neutral-100);
    --button-primary-border-color: var(--button-primary-color);
    --button-primary-border-color-hover: var(--button-primary-color-hover);
    --button-primary-border-color-pressed: var(--button-primary-color-pressed);
    --button-primary-content-border-bottom-color: transparent;
    --button-primary-content-border-bottom-color-hover: transparent;

    background: var(--textmedia-teaser-background);
    border-radius: var(--corners-l);
    display: block;
    width: var(--textmedia-teaser-width);
    min-width: var(--textmedia-teaser-width);
    overflow: hidden;
    position: relative;
}

.textmedia-teaser--highlight {
    --textmedia-teaser-background: var(--color-neutral-70);
    --textmedia-meta-color: var(--color-neutral-20);
    --textmedia-text-color: var(--color-neutral-10);

    /* use the configuration for dark background for all "highlight" teasers */
    --button-primary-color: var(--color-neutral-10);
    --button-primary-color-hover: var(--color-neutral-20);
    --button-primary-color-focus: var(--color-neutral-20);
    --button-primary-color-pressed: var(--color-neutral-20);
    --button-primary-content-color: var(--color-primary-50);
    --button-primary-content-color-hover: var(--color-primary-40);
    --button-primary-content-color-pressed: var(--color-primary-40);
    --button-primary-border-color: var(--color-neutral-10);
    --button-primary-border-color-hover: var(--color-neutral-20);
    --button-primary-border-color-pressed: var(--color-neutral-20);
    --button-primary-content-border-bottom-color: transparent;
    --button-primary-content-border-bottom-color-hover: transparent;
}

.textmedia-teaser__content {
    --text-color: var(--textmedia-text-color);

    padding: 24px;

    &:has(.button) {
        --button-position: absolute;
        --button-bottom: 24px;

        padding-bottom: calc(24px + 72px);
    }
}

.textmedia-teaser__meta {
    --margin-top-paragraph: 0;
    --margin-bottom-paragraph: 0;
    --paragraph-font-size: var(--body-small-size);
    --paragraph-letter-spacing: var(--body-small-letter-spacing);

    color: var(--textmedia-meta-color);
}

.textmedia-teaser__media {
    overflow: hidden;
}

.textmedia-teaser__text {
    --margin-top-paragraph: 16px;
    --margin-bottom-paragraph: 0;
}

.textmedia-teaser--link {
    &:hover,
    &:focus-within,
    &:active {
        --image-transform: var(--effect-image-scale);

        .button {
            --button-content-color: var(--button-content-color-hover);
            --button-content-border-bottom-color: var(--button-content-border-bottom-color-hover);
            --button-color: var(--button-color-hover);
            --button-border-color: var(--button-border-color-hover);
        }
    }

    &:focus-visible {
        background: var(--textmedia-teaser-background-color-focus);
        border-color: var(--textmedia-teaser-border-color-focus);
        border-radius: var(--corners-l);
        outline: 2px solid var(--textmedia-teaser-outline-focus);

        .button {
            border-radius: 10px;
            border-color: var(--button-border-color);
            outline: 2px solid var(--button-secondary-color-focus);
            background: var(--button-color-focus);
        }
    }
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .textmedia-teaser {
        width: auto;
        min-width: auto;

        * > &:only-child {
            --image-border-radius: var(--textmedia-teaser-collapsed-border-radius);

            display: var(--textmedia-teaser-collapsed-display);
            grid-template-columns: var(--textmedia-teaser-collapsed-image-width) 1fr;
        }
    }
}

/* Medium */
@media (min-width: 1024px) {
    :root {
        --textmedia-teaser-collapsed-image-width: 304px;
    }
}

/* Large */
@media (min-width: 1280px) {
    :root {
        --textmedia-teaser-collapsed-image-width: 392px;
    }
}

/*
    show a collapsed version of the teaser in the sidebar of blog posts
    when the sidebar collapses underneath the main content
*/
@container aside (width > 767px) {
    .textmedia-teaser {
        --image-border-radius: var(--textmedia-teaser-collapsed-border-radius);

        width: auto;
        min-width: auto;
        display: var(--textmedia-teaser-collapsed-display);
        grid-template-columns: var(--textmedia-teaser-collapsed-image-width) 1fr;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_textmedia-teaser-grid.css';
/*----------------------------------------------------------------------------*/
.textmedia-teaser-grid {
    --textmedia-teaser-width: 360px;

    display: grid;
    gap: var(--spacing-xl);
}

.textmedia-teaser-grid__grid {
    /* ignore the grid container on small breakpoints to enable horizontal scrolling */
    display: contents;
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .textmedia-teaser-grid__grid {
        display: grid;
        width: 100%;
        gap: var(--spacing-m);
        grid-template-columns: repeat(3, 1fr);

        &:has(> :only-child) {
            grid-template-columns: 1fr;
        }

        &:has(> :nth-child(2)):not(:has(> :nth-child(3))),
        &:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_textpic.css';
/*----------------------------------------------------------------------------*/
.textpic {
    display: grid;
    gap: var(--spacing-m);
    grid-template-columns: var(--textpic-grid-columns);
    grid-column-gap: var(--textpic-grid-column-gap);
}

.textpic--below,
.textpic--right,
.textpic--right-third {
    --textpic-text-order: 1;
    --textpic-media-order: 2;
}

.textpic__media {
    order: var(--textpic-media-order);
}

.textpic__text {
    order: var(--textpic-text-order);
}

.textpic__video {
    width: 100%;
    height: auto;
}

/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    .textpic {
        --textpic-grid-column-gap: var(--spacing-m);
    }

    .textpic--left,
    .textpic--right,
    .textpic--left-third,
    .textpic--right-third {
        --textpic-grid-columns: 1fr 1fr;
    }
}

/* Large */
@media (min-width: 1280px) {
    .textpic {
        --textpic-grid-column-gap: var(--spacing-l);
    }

    .textpic--left-third {
        --textpic-grid-columns: 288px 1fr;
    }

    .textpic--right-third {
        /*
            the max-width of bodytext is 880px. This grid configuration avoids
            funny-looking white space between the text and the image/media to the right
        */
        --textpic-grid-columns: var(--max-width-paragraph) 288px;
    }
}

/*----------------------------------------------------------------------------*/
/* @import '_textteaser.css';
/*----------------------------------------------------------------------------*/
.textteaser {
    background: var(--background-color);
    padding: var(--inline-card-padding);
    color: var(--text-color);
    border-radius: var(--corners-l);
}

.textteaser__content {
    max-width: var(--max-width-paragraph);
    margin: 0 auto;
}

/*----------------------------------------------------------------------------*/
/* @import '_video.css';
/*----------------------------------------------------------------------------*/
.video {
    width: var(--video-width, 100%);
    height: auto;
    aspect-ratio: var(--video-aspect-ratio);
    border-radius: var(--video-border-radius, var(--corners-l));
}

/*----------------------------------------------------------------------------*/
/* THEME
/*----------------------------------------------------------------------------*/
/* Grundstyling för knappen */
.theme-toggle-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem; /* w-8 */
  height: 2rem; /* h-8 */
  border-radius: 9999px; /* rounded-full */
  border: none;
  transition: all 0.2s ease;
  
  /* Använd variabler för färgerna */
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-90);
}

.theme-toggle-btn:hover {
  outline: 2px solid var(--color-primary-40);
}

/* Storlek på ikonerna */
.theme-toggle-btn svg {
  width: 1.5rem; /* h-6 */
  height: 1.5rem; /* w-6 */
}

/* LOGIK FÖR ATT VISA/DÖLJA IKONER */

/* Standard (Ljust läge): Visa sol, dölj måne */
#icon-sun { display: block; }
#icon-moon { display: none; }

/* Mörkt läge: Dölj sol, visa måne */
[data-theme="dark"] #icon-sun { display: none; }
[data-theme="dark"] #icon-moon { display: block; }

.theme-toggle-btn svg {
  transition: transform 0.3s ease;
}
.theme-toggle-btn:active svg {
  transform: scale(0.8);
}

/* ---------------------------------------------------------------------------*/
/* Search plugin
/* ---------------------------------------------------------------------------*/
.search-box {
	display: flex;
	max-width: 600px;
	margin: 2rem 0;
	background: var(--color-neutral-20);
	border: 1px solid var(--color-neutral-0);
	border-radius: 30px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}
.search-box:focus-within {
	box-shadow: 0 0 10px var(--primary-color-80);
	border-color: var(--primary-color-70);
}
.search-input {
	background: transparent;
	color: var(--text-color);
	flex: 1;
	border: none;
	padding: 12px 20px;
	font-size: 1rem;
	outline: none;
}
.search-button {
	background: transparent;
	color: var(--text-color);
	border: none;
	padding: 0 20px;
	cursor: pointer;
	font-size: 1.1rem;
	transition: transform 0.2s ease;
}
.search-button:hover {
    transform: scale(1.1);
}
.search-results-header {
	margin-bottom: 3rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--color-neutral-20);
}
.search-main-title {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: var(--text-color);
}
.search-main-title .highlight {
	color: var(--link-color);
	font-style: italic;
}
.search-result-stats {
	font-size: 1.1rem;
	color: var(--color-neutral-60);
}
.search-no-results-hint {
	background: var(--color-warning-soft);
	color: var(--color-warning);
	padding: 1rem;
	border-radius: 8px;
	border-left: 4px solid var(--color-primary-50);
}
.pagination-list {
	display: flex;
	list-style: none;
	padding: 0;
	gap: 10px;
	justify-content: center;
	margin-top: 2rem;
}
.page-item a {
	padding: 8px;
	color: var(--text-color);
}
.page-item.active a {
	background: transparent;
	color: var(--link-color);
	text-decoration: underline;
}
.search-result-item {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-neutral-40);
}
.search-result-title {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}
.search-result-title a {
	color: var(--link-color);
	text-decoration: none;
}
.search-result-title a:hover {
	text-decoration: underline;
}
.result-rating {
	font-size: 0.8rem;
	background: var(--color-success-soft);
	color: var(--color-success);
	padding: 2px 8px;
	border-radius: 10px;
	margin-left: 10px;
	vertical-align: middle;
}
.search-result-meta {
	font-size: 0.85rem;
	color: var(--color-neutral-60);
	margin-top: 0.75rem;
}
.meta-item:not(:last-child)::after {
	content: "|";
	margin: 0 10px;
	color: #ccc;
}

/* ---------------------------------------------------------------------------*/
/* FORM
/*----------------------------------------------------------------------------*/
/* --- Själva Formuläret --- */
form[id^="contact-"] {
    max-width: 32rem;
    color: var(--text-color);
}

/* Rubrik (H2) */
form[id^="contact-"] h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

/* Spacing mellan fält (mb-3 ersätts/förstärks) */
.form-element.mb-3 {
    margin-bottom: 1.25rem !important;
}

/* --- Labels --- */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem !important;
    color: var(--tw-label);
}

.required {
    color: #ef4444;
    margin-left: 0.25rem;
}

/* --- Input & Textarea (form-control) --- */
.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tw-text);
    background-color: var(--textmedia-teaser-background);
    border: 1px solid var(--textmedia-teaser-collapsed-border-radius) !important;
    border-radius: 0.5rem !important; /* Mjukare hörn */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Fokus-effekt (Tailwind-style ring) */
.form-control:focus {
    outline: none !important;
    border-color: var(--button-border-color-hover) !important;
    box-shadow: 0 0 0 4px var(--button-border-color) !important;
}

/* Särskild höjd för Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* --- Knappen (btn-primary) --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem !important;
    background-color: var(--button-primary-color) !important;
    border: none !important;
    color: var(--button-primary-content-color) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    background-color: var(--button-primary-color-hover);
}

@media (min-width: 640px) {
    .btn-primary {
        width: auto; /* Återgå till auto-bredd på större skärmar */
    }
}

/* SUMARY */
/* --- Summeringssidan (Description List) --- */
.summary-list {
    background-color: var(--textmedia-teaser-background);
    border: 1px solid var(--button-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

fieldset legend {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    padding: 0 0.5rem;
}

/* Raderna i listan */
dl.row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    margin: 0;
    border-bottom: 1px solid var(--button-content-border-bottom);
    transition: background-color 0.2s;
}

dl.row:last-child {
    border-bottom: none;
}

dl.row:hover {
    background-color: color-mix(in srgb, var(--button-color-hover), transparent 96%);
}

/* Etiketten (t.ex. Name) */
dt.col {
    font-weight: 600;
    color: var(--text-color-highlight);
    font-size: 0.875rem;
    flex: 0 0 35%; /* Ger etiketten fast bredd */
}

/* Värdet (t.ex. Emir) */
dd.col {
    margin: 0;
    color: var(--text-color);
    font-size: 0.875rem;
    text-align: right;
    flex: 1;
}

/* --- Multi-step Navigation (Knappar) --- */
.form-navigation {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* "Previous step" knappen (btn-outline-primary) */
.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem !important;
    background-color: var(--color-neutral-30) !important;
    border: 1px solid var(--color-neutral-20) !important;
    color: var(--text-color) !important;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.btn-outline-primary:hover {
    background-color: var(--color-neutral-40) !important;
    border-color: var(--button-border-color-hover) !important;
    color: var(--button-content-color-hover) !important;
}

/* Anpassa Submit-knappen så den matchar layouten i navigeringsfältet */
.form-navigation .btn-primary {
    flex: 2; /* Gör Submit-knappen lite bredare än "Back"-knappen */
}

/* Mobilanpassning för knappar */
@media (max-width: 480px) {
    .form-navigation {
        flex-direction: column-reverse; /* Lägg Back-knappen underst på mobilen */
    }
}