/*@font-face {
  font-family: "Playfair Display";
  src: url("/global/fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/global/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
*/

#price {
   scroll-padding-top: 60px;
}

a,
a:visited,
a:hover,
a:active {
  color: black;
  text-decoration: underline;
}

tinyx-specifications {
   display: block;
   column-count: 2;
   column-gap: 5vw;
   width: 100%;
}

tinyx-specification {
   display: block;
   break-inside: avoid;
   margin-bottom: 16px;
   width: auto;
   box-sizing: border-box;
}

@media only screen and (max-width: 700px) {
   tinyx-specifications {
      column-count: 1;
   }
}

tinyx-specification * {
   word-break: break-word;
   white-space: normal;
}

.steps-section, #hero-section, * {
   scroll-margin-top: 60px; /* Add space to nat have nav bar in the way */
}

.text_icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    vertical-align:sub;
}

.step-card * {
   color: var(--color-black);
   text-decoration: none;
}

body {
   background-color: var(--color-bg-page);
   font-family: var(--font-family-base);
   line-height:150%;
   font-size: 125%;
}

h1, h2, h3, h4, h5 {
   font-family: var(--font-family-heading);
}

main {
   margin: auto;
}

:root {
   --svg-round-border: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20height%3D'256'%20width%3D'256'%20fill%3D'rgb(228,211,224)'%20stroke%3D'gray'%3E%3Ccircle%20r%3D'120'%20cx%3D'128'%20cy%3D'128'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E");
   --svg-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20height%3D'20'%20width%3D'13'%20fill%3D'none'%20stroke%3D'gray'%3E%3Cpath%20d%3D%22M3%203%20L10%2010%20L3%2017%22%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E");
   --content-width: 80vw;
   --content-margin: calc((100vw - var(--content-width)) / 2);
   --step-card-width: min(calc(var(--content-width) * .15), 174px);
   --step-card-arrow-width: calc(var(--content-width) * .015);
   --step-card-gap: calc(var(--step-card-width) * .1);

   --subtitle-icon-size: max(6vw, 110px);

   --model-card-margin: calc(var(--content-margin) / 4);

   --step-line-width: 5px;
   --step-line-width-small: 3px;
   --step-background-color-r: 228;
   --step-background-color-g: 211;
   --step-background-color-b: 224;
   --step-background-color-selected: rgb(var(--step-background-color-r), var(--step-background-color-g), var(--step-background-color-b));
   --step-background-color-factor: 1.1;
   --step-background-color: rgb(calc(var(--step-background-color-r) * var(--step-background-color-factor)), calc(var(--step-background-color-g) * var(--step-background-color-factor)), calc(var(--step-background-color-b) * var(--step-background-color-factor)));
   --top-bg-color: rgba(0, 0, 0, .3);

   /*--test-color-1: gold;
   --test-color-2: red;
   --test-color-3: blue;*/

  /* =========================
     Brand / primære farver
     ========================= */
  --color-brand-primary: rgb(79, 111, 115);   /* Primær grøn (knapper, CTA, links) */
  --color-brand-primary-darkened: #354a4d; 
  --color-brand-secondary: #C9A57A; /* Sand/beige (sekundære knapper) */
  --color-brand-secondary-darkened: #987d5b;
  --color-brand-accent: #2F8F6B;    /* Accent (ikoner, highlights, aktiv step) */
  --color-brand-accent-darkened: #1d5943;

  --color-brand-accent: #69e7b9; 

  /* =========================
     Neutrale farver
     ========================= */
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-gray-900: #1F1F1F; /* Overskrifter */
  --color-gray-800: #2A2A2A; /* Brødtekst mørk */
  --color-gray-700: #4A4A4A;
  --color-gray-600: #6A6A6A; /* Brødtekst lys */
  --color-gray-500: #8A8A8A; /* Meta-tekst */
  --color-gray-300: #D6D6D6; /* Borders */
  --color-gray-200: #ECECEC; /* Cards */
  --color-gray-100: #F6F6F6; /* Sektion-baggrund */

  --color-active: var(--color-white);

  /* =========================
     Baggrunde
     ========================= */
  --color-bg-page: #FAFAFA;
  --color-bg-section: var(--color-gray-100);
  --color-bg-card: var(--color-white);
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  /* =========================
     Tekst
     ========================= */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);

  /* =========================
     Knapper
     ========================= */
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-text: var(--color-white);

  --button-secondary-bg: var(--color-brand-secondary);
  --button-secondary-text: var(--color-gray-900);

  --button-tertiary-bg: transparent;
  --button-tertiary-text: var(--color-brand-primary);
  --button-tertiary-border: var(--color-brand-primary);

  /* =========================
     Links
     ========================= */
  --link-color: var(--color-brand-primary);
  --link-hover-color: #3E5B5E;

  /* =========================
     Ikoner & diagrammer
     ========================= */
  --icon-primary: var(--color-brand-primary);
  --icon-secondary: var(--color-brand-accent);
  --icon-muted: var(--color-gray-500);
  --icon-background: var(--color-gray-200);

  /* =========================
     Borders & radius
     ========================= */
  --border-color: var(--color-gray-300);
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;

  /* =========================
     Skygger (meget afdæmpede)
     ========================= */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);

  /* =========================
     Typografi (kan justeres)
     ========================= */
  --font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-heading: "Playfair Display", Georgia, serif;

  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* =========================
     Layout
     ========================= */
  --max-width-content: 1200px;
  --max-width-text: 600px;
  --section-padding-y: clamp(3rem, 8vh, 6rem);
  --section-padding-y-small: calc(var(--section-padding-y) / 2.6);
  --section-padding-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-padding-x-big: clamp(1.25rem, 16vw, 10rem);
}

section-headers {
   display:block;
   width: 100%;
   background-color: var(--test-color-2);
}

section-headers > h1 {
   margin:auto;
   text-align: center;
}

section-headers:has(h1 + p) {
   text-align: center;
}

button-outer {
    background-color: black;
    color: var(--color-white);
    border-radius: 9999px;
    display:inline-block;
    cursor: pointer;

    padding-top: clamp(10px, 2vw, 20px);
    padding-bottom: clamp(10px, 2vw, 20px);
    padding-right: clamp(30px, 6vw, 60px);
    padding-left: clamp(30px, 6vw, 60px);

    &[button-type="primary"] {
        background-color: var(--color-brand-primary);
        color: var(--color-white);

        &:hover {
            background-color: var(--color-brand-primary-darkened);
        }
    }

    &[button-type="secondary"] {
        background-color: var(--color-brand-secondary);
        color: var(--color-white);

        &:hover {
            background-color: var(--color-brand-secondary-darkened);
        }
    }

    &[button-type="tertiary"] {
        background-color: var(--button-tertiary-bg);
        color: var(--button-tertiary-text);
        border-color: var(--button-tertiary-border);
        border-width: 3px;
        border-style: solid;

        &:hover {
            border-color: var(--color-brand-accent-darkened);
        }
    }
}

rounded-box {
    border: 3px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: clamp(20px, 4vw, 40px);
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
    display: block;
}

.content-padding {
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

.content-padding-big {
    padding-left: calc(var(--section-padding-x-big));
    padding-right: calc(var(--section-padding-x-big));
}

.content-margin {
    margin-left: var(--section-padding-x);
    margin-right: var(--section-padding-x);
}

.content-margin-big {
    margin-left: calc(var(--section-padding-x-big));
    margin-right: calc(var(--section-padding-x-big));
}

section-headers:has(h1) {
   padding-top: var(--section-padding-y);
   padding-bottom: var(--section-padding-y);
}

section-headers:has(h2) {
   padding-top: var(--section-padding-y);
   padding-bottom: calc(var(--section-padding-y) / 8);
}

.content-vertical-padding {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.content-vertical-margin {
    margin-top: var(--section-padding-y);
    margin-bottom: var(--section-padding-y);
}

.content-vertical-padding-small {
    padding-top: var(--section-padding-y-small);
    padding-bottom: var(--section-padding-y-small);
}

button-group {
   text-align: center;
   width:100%;
   display:block;
}

.dark-opacity {
   background-color: rgba(0, 0, 0, 0.4);
}

.light-opacity {
   background-color: rgba(255, 255, 255, 0.80);   
}

step-line {
   width:100%;
   height: var(--step-line-width);
   background-color: var(--color-brand-primary);
   display: block;
   margin-top: calc(var(--subtitle-icon-size) / 2);
}

.max-width-content {
   max-width: var(--max-width-content);
   margin-left:auto;
   margin-right:auto;
   display:block;
}

ul, ol {
   padding-left: 20px;
}
li {
   padding-left: 6px;
}

h3 {
   padding-top: calc(var(--section-padding-y) / 7);
   padding-bottom: calc(var(--section-padding-y) / 14);
}

.center {
   text-align: center;
}

.left {
   text-align: left;
}

/* =========================
   Steps panel
   ========================= */

steps-panel {
    max-width: 100%;
    margin:auto;
    display:flex;
    justify-content: center;
    column-gap: var(--step-card-gap);
    cursor: pointer;
}

.step-card {
    display:flex;
    flex-direction: column;
    width: var(--step-card-width);
}

.step-icon {
   width: 100%;
   height: var(--step-card-width);
   border-radius: 50%;
   border: var(--step-line-width-small) solid var(--color-brand-primary); /* Creates the outline */
   background-color: var(--step-background-color);
   /*background-image: var(--svg-round-border);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-color: var(--test-color-1);
   background-image: var(--svg-round-border);*/
}


.step-icon.selected {
   background-color: var(--step-background-color-selected);
   border: var(--step-line-width) solid var(--color-brand-primary-darkened);
}

.step-card figure {
    margin-left:auto;
    margin-right:auto;
}

step-arrow {
    width: var(--step-card-arrow-width);
    height: var(--step-card-width);
    background-image: var(--svg-arrow);
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

flex-box {
   display: flex !important;
   justify-content: space-evenly;
}

.big-image-section {
    background-image: url('/global/images/models/billeder/solo_full.png');
    background-position-y: top;
    background-position-x: center;
    background-size: auto auto;
    padding-bottom: var(--section-padding-y);
    min-height: 60vh;
    padding-top: 22vh;
}

.big-image-section * {
   padding-top: 0 !important;
}

p {
   padding-top: 6px;
   padding-bottom: 6px;
}

.hero-with-image {
    background-position-y: top;
    background-position-x: center;
    background-size: auto auto;
    padding-bottom: var(--section-padding-y);
    min-height: 80vh;
}

flex-image img, .flex-image img {
    border-radius: 12px;
}

.hero-section section-headers {
   /*margin-top:2vh;*/
   margin-top:50px;
}

.small_screen_only {
      display: none !important;
}
.big_screen_only {
      display: block;
}

@media only screen and (min-width: 800px) {
   .overview {
      gap:10px;
   }
}

@media only screen and (max-width: 801px) {
   /*.hero-section section-headers {
      margin-top:8vh;
   }*/

   #logo_normal {
      height: 60px !important;
   }

   .subtitle-icons {
      display:none !important;
   }
   .subtitle-icon {
      display:block !important;
   }

   :root {
      --section-padding-x-big: clamp(1.25rem, 4vw, 10rem);
   }

   .small_screen_only {
         display: block !important;
   }
   .big_screen_only {
         display: none !important;
   }

   steps-panel {
      flex-wrap: wrap;
      row-gap: calc(var(--step-card-gap)*5);
   }

   .step-card {
      width:35vw;
   }
   rounded-box .step-card {
      width:30vw;
   }

   .step-icon {
      height: 35vw;
   }
   rounded-box .step-icon {
      height: 30vw;
   }

   step-arrow {
      width: 2.5vw;
      height: 35vw; 
   }
   rounded-box step-arrow {
      height: 30vw; 
   }

   .step-card figure {
      text-align: center;
   }

   flex-box {
      flex-direction: column;
      align-items: center;
   }

   #second_co2_section { /* #first_co2_section */
      flex-direction: column-reverse !important;
   }

   .overview > * {
      width: 100% !important;
   }

   flex-image > img, .flex-image > img {
      max-width: 90vw  !important;
   }

   #logo_nomral {
      min-height:80px !important;
   }

   /*#hero-section::before {
      background: linear-gradient(
         90deg,
         rgba(255,255,255,0.85) 0%,
         rgba(255,255,255,0.85) 100%,
      );
   }*/

   #hero-section::before {
      background-image: linear-gradient(
         180deg,
         rgba(255,255,255,0.80) 0%,
         rgba(255,255,255,0.80) 40%,
         rgba(255,255,255,0.0) 100%
      ) !important;
   }

   #hero-section {
      background-size: auto auto !important;
      background-position: 45% 40% !important;
   }

   #hero-section > section-headers {
     padding-bottom: 0 !important;
   }

   #hero-section buttton-group {
      padding-bottom: var(--section-padding-y) !important;
   }
}

/* form elements */¨
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 16px;
    font-weight: 500;
    color: inherit;
}

.form-group input,
.form-group select,
.form-group textarea {
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    background-color: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand-primary, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
    font-size: 15px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-group button {
    font-size: 16px;
    padding: 14px 32px;
    border: none;
    border-radius: 6px;
    background-color: var(--color-brand-primary, #1a73e8);
    color: white;
    font-weight: 500;
    cursor: pointer;
    margin-top: 12px;
}

.form-group button:hover {
    background-color: var(--color-brand-primary-darkened, #1557b0);
}

/* Model card */
.model-card.coming-soon {
    position: relative;
    pointer-events: none;
}

.model-card.coming-soon > *:not(.coming-soon-badge) {
    filter: grayscale(0.85) brightness(1.08) opacity(0.7);
}

.coming-soon-badge {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-7deg);
    background: var(--color-brand-accent, #2F8F6B);
    color: var(--color-white, #fff);
    font-weight: bold;
    font-size: 1.2rem;
    padding: 10px 36px;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 2;
    letter-spacing: 1px;
    text-shadow: 0 2px 6px #000a, 0 1px 2px #000a;
    border: 2px solid var(--color-white, #fff);
    pointer-events: none;
    text-align: center;
    width: max-content;
    max-width: 90%;
    outline: 2px solid var(--color-brand-primary, #4F6F73);
    outline-offset: 2px;
}

.model-card.coming-soon button-outer,
.model-card.coming-soon a {
    pointer-events: none !important;
    opacity: 0.7;
    cursor: not-allowed;
}
model-cards {
    display: flex;
    width: 100%;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.model-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray-200);
    width: 300px;
    word-break: break-word;
}

.model-card > img:first-child, .model-card-plantegning {
    filter: invert(1);
    padding:44px;
    /*padding: var(--model-card-margin);
    padding-top: calc(var(--model-card-margin) * .7);
    padding-bottom: calc(var(--model-card-margin) * .7);*/
}

.model-card > img {
    width: 100%;
    height:200px;
    object-fit: contain;
}

model-card-title {
    font-size: 150%
}

model-card-subtitle {
    font-size: 125%
}

model-card-price {
      /*font-style:italic;*/
      font-weight: 600;
}

model-card-text {
    display:flex;
    flex-direction: column;
    margin: calc(var(--model-card-margin));
    margin-top: calc(var(--model-card-margin) * .7);
    margin-bottom: calc(var(--model-card-margin) * .7);
}

.model_card_button {
    padding-bottom:0;
    padding-top:16px;
}

model-card-info {
    /* min-height:90px; */
}

model-card-info > p {
    padding: 0;
}

.croped_model{
    width: 100%;
    height: 140px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* KONTAKT */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 16px;
    font-weight: 500;
    color: inherit;
}

.form-group input,
.form-group select,
.form-group textarea {
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    background-color: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand-primary, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
    font-size: 15px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-group button {
    font-size: 16px;
    padding: 14px 32px;
    border: none;
    border-radius: 6px;
    background-color: var(--color-brand-primary, #1a73e8);
    color: white;
    font-weight: 500;
    cursor: pointer;
    margin-top: 12px;
}

.form-group button:hover {
    background-color: var(--color-brand-primary-darkened, #1557b0);
}