/******************************************************** FONTE: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* LeJeuneDeck Regular */
@font-face {
    font-family: 'LeJeuneDeck';
    src: url('../fonts/LeJeuneDeck-Regular-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Futura Regular */
@font-face {
    font-family: 'Futura';
    src: url('../fonts/futura-pt_book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Grundlæggende reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Baggrundsfarve */
:root { --page-bg: #fcf9f3; }

body, header, footer {
    background-color: var(--page-bg);
}

/* Basis typografi for websitet */
body {
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: #2b1820;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Overskrifter */
h1, h2, h3, h4, h5, h6 {
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    color: #2b1820;
}

/* Links */
a {
    color: #2b1820;
    text-decoration: none;
}

a:hover {
    color: #2b1820;
    text-decoration: none;
}

/******************************************************** HEADER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Header (fixed) */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
  }
  
  /* Skjul headeren når 'header-hidden' klassen er aktiv */
  header.header-hidden {
    transform: translateY(-100%);
  }
  
  .header-content {
    display: flex;
    align-items: center;
    padding: 25px 0;
  }
  
  .header-logo {
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    color: #2b1820;
    display: flex;
    align-items: baseline;
    position: relative;
    z-index: 1002;
  }
  
  /********************************************************
    DESKTOP/LAPTOP TOP MENU (visible)
  ********************************************************/
  
  /* Skjul desktop-nav som default (mobile/tablet) */
  .header-nav {
    display: none;
  }
  
  .header-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
  }
  
  .header-nav a {
    color: #2b1820;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 0px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.25s ease;
  }
  
  .header-nav a:hover {
    border-bottom-color: transparent;
  }
  
  /* Fra laptop og op: vis menuen oppe til højre */
  @media screen and (min-width: 768px) {
    .header-content {
      justify-content: space-between;
    }
  
    .header-nav {
      display: flex;
      margin-left: auto;
      justify-content: flex-end;
    }
  
    /* Skjul DK/EN knappen på laptop+ */
  }
    /* Streg under menupunkter */
  .header-nav a.active {
    border-bottom-color: transparent;
  }
  

    .header-nav a.header-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        line-height: 1;
        border-radius: 50%;
        border: 1px solid #2b1820;
        background: transparent;
        cursor: pointer;
        color: #2b1820 !important;
        text-decoration: none;
        isolation: isolate;
        z-index: 0;
        transition: transform .15s ease;
    }
    
    .header-nav a.header-cta:hover {
        transform: translateY(0px);
        color: #fcf9f3 !important;
        background-color: #2b1820;
    }
    
/********************************************************
  BURGER + MOBILE MENU OVERLAY (DESKTOP FADE ANIMATION)
********************************************************/

/* 1. LOGO & BURGER FARVE + STØRRELSE */

  /********************************************************
    TABLET + MOBILE tweaks
  ********************************************************/
  
/* FIX: sørg for at header-elementer ikke overlapper på mobile/tablet */
.header-content{
    display: flex;
    align-items: center;
    justify-content: space-between; 
  }
  
  /* Logo skal ikke skrumpe og skal holde sin plads */
  .header-content > a{
    flex: 0 0 auto;
  }
  
  /* Skub knapper/burger helt til højre */
/******************************************************** YDELSER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Tekst der ligger under slider overskrift på desktop, laptop og tablet */
.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.stats-box {
    display: flex;
    align-items: flex-end;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat p {
    font-weight: 400; 
    margin: 0px 0 0 0;
    display: flex;
    align-items: flex-end;
}

.description {
    text-align: left;
    display: flex;
    align-items: flex-end;
}

.description p {
    font-weight: 400; 
    margin: 0;
}

/* Tekst der ligger under slider overskrift på mobile */
@media screen and (max-width: 480px) {
    .stats-container {
        flex-direction: column;
        align-items: center;
    }

    .stats-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 30px;
    }

    .stats-box .stat:first-child {
        width: 40%;
    }

    .stats-box .stat:last-child {
        width: 60%;
    }

    .stats-box .stat {
        box-sizing: border-box;
        margin-bottom: 15px;
        display: block;
    }

    .description {
        width: 100%;               
    }
}

/* Tekst sektion: Desktop, laptop og tablet */
.ydelser-section {
    display: flex;
    justify-content: space-between;
    color: #2b1820;
}

.ydelser-right-column p {
    font-weight: 400; 
}

/* Arch billede overlay */
.arch-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0);
    pointer-events: none; 
    z-index: 2;
}

/* Arch billede under selve overlay */
.arch-container img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
  
/* Photo gallery 3 images in bottom */
.photo-gallery {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
    align-items: flex-start;
    margin-top: 40px;
}

/* Mobile: 3 billeder under hinanden */
@media screen and (max-width: 767px) {
    .photo-gallery {
        flex-direction: column;
        align-items: center;
    }
}

/* iPad i portrætvisning: override grid til enkelt billede */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .photo-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .photo-frame:nth-child(2) {
        width: 100%;
        margin-top: 0;
    }
}

/* Animation keyframes */
@keyframes float-up-down {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.photo-frame {
    position: relative; 
    display: block;
    width: 100%;
    text-decoration: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Første billede - kortere højde, langsommere animation */
.photo-frame:nth-child(1) {
    margin-top: -30px;
    animation: float-up-down 8s ease-in-out infinite;
}

/* Andet billede - højere højde, medium hastighed animation */
.photo-frame:nth-child(2) {
    margin-top: 70px;
    animation: float-up-down 6s ease-in-out infinite;
    animation-delay: 1s; 
}

/* T#2b1820je billede - medium højde, hurtigere animation */
.photo-frame:nth-child(3) {
    margin-top: 0px;
    animation: float-up-down 4s ease-in-out infinite;
    animation-delay: 2s;
}

/* Fix for responsivt design - bevar animation men juster spacing på mobil */
@media screen and (max-width: 767px) {
    .photo-frame {
        margin-bottom: 0px;
    }
    
    .photo-frame:last-child {
        margin-bottom: 0;
    }
}

/* Skjuler 1 og 3 billede på mobile OG tablet */
@media screen and (max-width: 1024px) {
    .photo-gallery .photo-frame:nth-child(1),
    .photo-gallery .photo-frame:nth-child(3) {
        display: none;
    }
}

/* —————————————————————————————————————————— */
/* Overlay på photo‑frame uden at røre højde/b#2b1820de */
/* —————————————————————————————————————————— */

  
.photo-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0);
    pointer-events: none;
    z-index: 2;
}
  
.photo-frame img {
    position: relative;
    z-index: 1;
}

body.services-page {
    overflow-x: clip;
}

html:has(body.services-page) {
    overflow-x: clip;
}

/* Ret dette i din eksisterende .arch-container: */
.arch-container {
    position: relative;
    overflow: visible; 
    margin-bottom: 5px;
}

.photo-gallery .photo-frame img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

.photo-gallery .photo-frame:nth-child(odd) img { border-radius: 0; }
.photo-gallery .photo-frame:nth-child(2) img   { border-radius: 50%; }

/******************************************************** FOOTER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

.footer{
    padding: 0px 0 63px;
    background-color: var(--bg);
    color: inherit;
    text-align: center;
}

.footer > .container{
    display: block;
    padding-top: 0;
    padding-bottom: 0;
}

.footer__store{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__store-link{
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    transition: opacity .25s ease;
}

.footer__store-link:hover{
    color: inherit;
    opacity: .65;
}

.footer__nav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 46px;
}

.footer__nav-link{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    transition: opacity .25s ease;
}

.footer__nav-link:hover{
    color: inherit;
    opacity: .65;
}

/* Det sorte udseende. Holdt adskilt fra --pille, som kun er selve
   udskydningen, så et almindeligt link også kan bytte tekst uden at
   blive en fyldt knap. */
.footer__nav-link--sort{
    padding: 11px 21px;
    border-radius: 999px;
    background-color: var(--fg);
    color: var(--bg);
    transition: opacity .25s ease;
}

.footer__nav-link--sort:hover{
    color: var(--bg);
    opacity: .82;
}

.footer__bund{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1000px;
    margin: 165px auto 0;
    text-align: left;
}

.footer__signup-label{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    margin-bottom: 20px;
}

.footer__label{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.footer__form{
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer__felt{
    display: flex;
    align-items: center;
    gap: 11px;
    width: 250px;
    max-width: 100%;
    height: 42px;
    padding: 0 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.footer__send{
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;   /* samme som .footer__felt, så de flugter */
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--fg);
    color: var(--bg);
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.footer__form.har-tekst .footer__send{
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.footer__send:hover{
    opacity: .82;
}

.footer__tak{
    display: none;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
}

.footer__form.er-sendt .footer__ikon,
.footer__form.er-sendt .footer__input{
    display: none;
}

.footer__form.er-sendt .footer__tak{
    display: flex;
}

.footer__form.er-sendt .footer__send{
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
}

.footer__ikon{
    flex: 0 0 auto;
    opacity: .75;
}

.footer__input{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: none;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
}

.footer__input::placeholder{
    color: inherit;
}

.footer__social{
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-bottom: 11px;
}

.footer__social a{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    transition: opacity .25s ease;
}

.footer__social a:hover{
    color: inherit;
    opacity: .65;
}

.footer__nav-mobil{
    display: none;
}

/******************************************************** FADE ANIMATION PÅ HELE SIDEN ********************************************************/

/* Fade animation */
   .fade {
    opacity: 0;
    transform: translateY(12px);
    
    transition:
      opacity 420ms cubic-bezier(0.25, 1, 0.5, 1),
      transform 450ms cubic-bezier(0.25, 1, 0.5, 1);
    
    will-change: opacity, transform;
}

.fade.is-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
}

/******************************************************** MERGTON COOKIES ********************************************************/

:root{
    --mc-green:   #ffffff;
    --mc-cream:   #2b1820;
    --mc-green-60:#ffffff;
    --mc-green-15:#ffffff;
    --mc-green-08:#ffffff;
    --mc-sand:    #ffffff;
    --mc-ease:    cubic-bezier(0.25, 1, 0.5, 1);
}

.mc-consent,
.mc-consent *{box-sizing:border-box;}

/* Låser siden bag indstillingspanelet. Klassen sættes af
   cookie-consent.js. Samme teknik som menuens lås i menu.css. */
html.mc-laast body{
    position:fixed;
    left:0;
    width:100%;
    overflow:hidden;
    padding-right:var(--mc-scrollbar-gap, 0px);
}

/* Overlay (kun synligt når indstillinger er åbne) */
.mc-overlay{
    position:fixed;
    inset:0;
    z-index:99998;
    background:rgba(10,28,25,0.55);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;
    transition:opacity 380ms var(--mc-ease),visibility 380ms;
}
.mc-overlay.is-open{opacity:1;visibility:visible;}

/* Selve boksen */
.mc-consent{
    position:fixed;
    z-index:99999;
    left:50px;
    bottom:50px;
    width:600px;
    max-width:calc(100vw - 56px);
    background:var(--mc-cream);
    color:var(--mc-green);
    border-radius: 0px;
    padding:30px 30px 26px;
    font-family:'Futura',Arial,sans-serif;
    opacity:0;transform:translateY(16px);
    transition:opacity 420ms var(--mc-ease),transform 450ms var(--mc-ease);
    will-change:opacity,transform;
    border:none;
    box-shadow:none;
}

@media screen and (min-width: 768px) and (max-width: 1599px){
    /* Selve boksen */
    .mc-consent{
        left:40px;
        bottom:40px;
        width:530px;
        max-width:calc(100vw - 56px);
    }
}

.mc-consent.is-in{opacity:1;transform:translateY(0);}
.mc-consent[hidden]{display:none;}

/* Når indstillinger er åbne: centrér og gør lidt bredere */
.mc-consent.is-settings{
    left:50%;
    bottom:auto;
    top:50%;
    transform:translate(-50%,-50%) scale(0.98);
    width:570px;

    /* 93vh måler den store viewport — skærmen som om browserens bjælker
       var skjult. På iOS bliver boksen derfor højere end det synlige, og
       toppen ryger op bag adresselinjen. svh måler den mindste viewport,
       så boksen altid kan være der. vh-linjen står først som reserve til
       browsere uden svh; de får præcis den opførsel, de havde før. */
    max-height:93vh;
    max-height:min(93vh, calc(100svh - 40px));
    overflow-y:auto;
    overscroll-behavior:contain;
}
.mc-consent.is-settings.is-in{transform:translate(-50%,-50%) scale(1);}

.mc-title{
    color:var(--mc-green);
    font-weight: 400;
    margin:0 0 12px;
}

.mc-title .mc-accent{
    font-family:'Futura',Arial,sans-serif;
    font-weight: 400;
    font-style:normal;
    color:var(--mc-sand);
}

.mc-text{margin:0 0 22px;color:var(--mc-green);}
.mc-text a{color:var(--mc-green);text-decoration:none;border-bottom:1px solid var(--mc-green-60);padding-bottom:1px;}
.mc-text a:hover{border-bottom-color:var(--mc-green);}

/* Knapper */
.mc-actions{
    display:flex;
    justify-content:center;
    gap:13px;
    flex-wrap:wrap;
    width:100%;
}

.mc-btn{
    flex: 0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:inherit;
    font-weight: 400;
    padding:11px 21px;
    border-radius: 999px;
    cursor:pointer;
    border:1px solid var(--mc-green);
    transition:transform .18s var(--mc-ease),background-color .25s ease,color .25s ease,opacity .25s ease;
}
.mc-btn--solid{background:var(--mc-green);color:var(--mc-cream);}
.mc-btn--ghost{background:transparent;color:var(--mc-green);}
.mc-btn--ghost:hover{background:rgba(23,61,54,0.06);}
.mc-btn:focus{outline:none;}


/* "Tilpas" link under hovedknapperne */
.mc-customize{
    display:block;
    width:100%;
    margin-top:16px;
    text-align:center;
    background:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    color:var(--mc-green-60);
    text-decoration:underline;
    text-underline-offset:3px;padding:4px;
}
.mc-customize:hover{color:var(--mc-green);}

/* ---- Indstillingspanel ---- */
.mc-categories{margin:4px 0 24px;}
.mc-cat{
    border-top:1px solid var(--mc-green-08);
    padding:18px 0;
}
.mc-cat:last-child{border-bottom:1px solid var(--mc-green-08);}
.mc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mc-cat-name{
    color:var(--mc-green);
    font-weight: 400;
    text-transform: uppercase;   /* som .client-title */
}

.mc-cat-desc{
    margin: 0;
    line-height:1.55;
    color:var(--mc-green-60);
}
.mc-locked{
    color:var(--mc-sand);
    font-weight: 400;
    white-space:nowrap;
}

/* Toggle-switch */
.mc-switch{position:relative;width:42px;height:24px;flex:0 0 auto;}
.mc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.mc-track{
    position:absolute;inset:0;border-radius:999px;
    background:#2b1820;
    border:1px solid var(--mc-green-15);
    transition:background-color .25s ease;
}
.mc-track::after{
    content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
    border-radius:50%;background:var(--mc-green);
    transition:transform .25s var(--mc-ease);
}
.mc-switch input:checked + .mc-track{background:var(--mc-sand);}
.mc-switch input:checked + .mc-track::after{transform:translateX(18px);background:var(--mc-cream);}
.mc-switch input:disabled + .mc-track{opacity:0.55;cursor:not-allowed;}
.mc-switch input:focus-visible + .mc-track{outline:2px solid var(--mc-green);outline-offset:2px;}

.mc-settings-foot{
    line-height:1.55;
    color:var(--mc-green-60);
    margin:0 0 20px;
}
.mc-settings-foot a{color:var(--mc-green);border-bottom:1px solid var(--mc-green-60);text-decoration:none;}

/* Mobil */
@media (max-width:520px){
    .mc-consent{
        left:14px;
        right:14px;
        bottom:14px;
        width:auto;
        max-width:none;
        padding:26px 22px 22px;
        border-radius: 0px;
    }
    .mc-consent.is-settings{
        left:14px;
        right:14px;
        top:auto;
        bottom:14px;
        transform:translateY(16px);
        width:auto;

        /* Samme grund som i basisreglen. 28px = de 14px luft foroven
           og forneden. */
        max-height:calc(100svh - 28px);
    }
    .mc-consent.is-settings.is-in{
        transform:translateY(0);
    }
    .mc-actions{
        flex-direction:row;
        justify-content:center;
        flex-wrap:wrap; /* så de ikke knækker grimt hvis der ikke er plads */
        align-items:center;
    }
    .mc-btn {
        width:auto;
    }
}

@media (prefers-reduced-motion:reduce){
    .mc-consent,.mc-overlay,.mc-track::after,.mc-btn{transition:none !important;}
    .mc-consent{transform:none !important;}
    .mc-consent.is-settings{transform:translate(-50%,-50%) !important;}
}

/* FIX: NY MOBILE MENU: */
/* Burger-wrapper: skal kunne rumme tekst, så bredde er auto */

/* ========================================================
   TEMA — creme ⇄ mørk (OMVENDT af forsiden)
   Samme maskineri som index.css, kun tokens er byttet om.
   ======================================================== */

/* ---------- 1. Tokens ---------- */
:root{
    --fg: #2b1820;   /* tekst — mørk i toppen */
    --bg: #fcf9f3;   /* baggrund — creme i toppen */

    --theme-speed: .6s;
    --theme-ease:  ease;
}

/* Det ENESTE sted temaet skifter */
body.scrolled-bottom{
    --fg: #ffffff;
    --bg: #2b1820;
}

/* ---------- 2. Motoren ---------- */
body{
    background-color: var(--bg);
    color:            var(--fg);
    transition: background-color var(--theme-speed) var(--theme-ease),
                color            var(--theme-speed) var(--theme-ease);
}

/* ---------- 3. Slip arven fri ---------- */
h1, h2, h3, h4, h5, h6,
a, a:hover,
.header-logo,
.header-nav a,
.menu-label,
.ydelser-section,
.client-title,
.client-sub,
.footer-tagline,
.footer-details,
.footer-details a,
.footer-details address,
.footer-links a{
    color: inherit;
}

/* Streger følger tekstfarven af sig selv */
footer{ border-top-color: currentColor; }

/* Footer-hover: dæmp i stedet for at skifte farve */
/* .footer-details a:hover, */

/* ---------- 4. Elementer med egen flade ---------- */
footer{
    background-color: var(--bg);
    color: inherit;
    transition: background-color var(--theme-speed) var(--theme-ease);
}

header{
    background-color: var(--bg);
    transition: transform .3s ease-in-out,
                background-color var(--theme-speed) var(--theme-ease);
}


/* ---------- 5. Knapper ---------- */
.header-nav a.header-cta,
.hero-cta{
    color:            var(--fg) !important;
    background-color: transparent;
    border-color:     currentColor;
    transition: background-color .25s ease,
                color            .25s ease;
}

.header-nav a.header-cta:hover,
.hero-cta:hover{
    color:            var(--bg) !important;
    background-color: var(--fg);
}

/* ========================================================
   REVEAL — billeder glider blødt på plads i viewporten
   Her sidder .fade på wrapperen (.arch-container, .photo-frame),
   så bevægelsen lægges på <img> inde i den. Det er også
   nødvendigt, fordi .photo-frame har sin egen float-animation,
   der ellers overtrumfer transformen.
   ======================================================== */

:root{
    --reveal-y:     35px;                          /* hvor langt nedefra billedet starter */
    --reveal-scale: 0.99;                          /* hvor meget det skalerer op */
    --reveal-speed: 1200ms;
    --reveal-ease:  cubic-bezier(.23, 1, .32, 1);  /* easeOutQuint */
}

/* Wrapperen er synlig fra start — .fade's opacity slås fra */
.arch-container.fade,
.photo-frame.fade{
    opacity: 1;
}

/* Billedet inde i wrapperen er det der bevæger sig */
.arch-container.fade img,
.photo-frame.fade img{
    transform: translateY(var(--reveal-y)) scale(var(--reveal-scale));
    transition: transform var(--reveal-speed) var(--reveal-ease);
    will-change: transform;
}

.arch-container.fade.is-in img,
.photo-frame.fade.is-in img{
    transform: translateY(0) scale(1);
}

/* Forskudt landing på midterbilledet i bunden */
.photo-gallery .photo-frame:nth-child(2).fade img{ --reveal-y: 50px; }

@media (prefers-reduced-motion: reduce){
    .arch-container.fade img,
    .photo-frame.fade img{
        transform: none !important;
        transition: none !important;
    }
}


/* ========================================================
   LISTE-LAYOUT — delt af team og ydelser
   To kolonner: overskrift til venstre, listen til højre.
   ======================================================== */

/* ========================================================
   TEAM — navneliste i bunden af ydelser
   To kolonner: overskriften til venstre, listen til højre.
   Sætter ingen baggrund og ingen farve — begge arves fra
   tema-tokens, så sektionen følger creme ⇄ mørk-skiftet.
   ======================================================== */
.liste-sektion{
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: baseline;      /* TEAM flugter med første navn */
    padding-top: 80px;
}


.liste-overskrift{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: inherit;
}

@media screen and (min-width: 768px){

    .liste-sektion{
        position: relative;
    }
}


/* Stregen i toppen — den over første navn */
.liste{
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid currentColor;
}

@media screen and (max-width: 767px){

    .liste-sektion{
        grid-template-columns: 1fr;
        padding-top: 60px;
    }


    .liste-overskrift{
        margin-bottom: 24px;
    }
}

/* ========================================================
   TEAM — navnene, miniaturen og linket under listen
   ======================================================== */

@media screen and (min-width: 768px){


    /* Scopet til .liste-sektion, så den slår grundreglen .team-media
       længere nede i filen — ellers vinder den på rækkefølge. */
    .liste-sektion .team-media{
        position: absolute;
        left: 0;
        bottom: 68px;   /* .team-join: 45px margin + 23px linje */
        width: 200px;
        max-width: none;
        margin: 0;
    }
}


/* Billedfeltet under overskriften. Billederne ligger oven på
   hinanden og er usynlige, indtil JS'en sætter .is-active. */
.team-media{
    position: relative;
    width: 100%;
    max-width: 256px;
    aspect-ratio: 1 / 1;
    margin-top: 60px;
}


.team-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}


.team-photo.is-active{
    opacity: 1;
}

@media (hover: none) and (min-width: 768px){

    .team-media{ display: none; }
}


/* Navn til venstre, titel på midten. Streg under hver række. */
.team-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid currentColor;
    cursor: default;
}


/* Navne med egen underside. Stregen kommer ved hover og viser,
   at der er noget at klikke på. */
.team-row:hover .team-name--side{
    text-decoration: underline;
    text-underline-offset: 4px;
}

a.team-name{
    text-decoration: none;   /* browserens standardstreg væk */
    cursor: pointer;         /* .team-row har cursor: default */
}


.team-name,
.team-role{
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;}


.team-name{
    text-transform: uppercase;
}


/* Link under listen — understreget, samme størrelse som navnene */
.team-join{
    display: block;
    width: fit-content;
    margin-top: 45px;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity .25s ease;}


.team-join:hover{
    color: inherit;
    text-decoration: underline;
    opacity: .6;
}

@media screen and (max-width: 767px){


    /* Navn øverst, titel under — ikke side om side */
    .team-row{
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0 24px;
    }


    .team-join{
        margin-top: 35px;
    }


    /* Rækken er klikbar på mobil */
    .team-row{
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }


    .team-row.er-valgt .team-name{
        text-decoration: underline;
        text-underline-offset: 4px;
    }


    /* Miniaturen bliver stående nederst til højre uanset scroll.
       Visningen styres af .is-active på det enkelte billede. */
    .team-media{
        display: block;
        position: fixed;
        right: 25px;
        bottom: 25px;
        z-index: 5;

        width: 104px;
        max-width: none;
        margin: 0;

        opacity: 1;
        pointer-events: none;
    }
}


/* ========================================================
   KONTAKT-PILLEN I FOOTEREN
   Lukket står der "Kontakt". Peger man på den — eller trykker
   på den på mobil — skyder den ud i mailens bredde og bytter
   teksten ud med adressen. Klik åbner mailprogrammet.

   De to bredder måles af main.js og lægges i --pille-lukket og
   --pille-aaben, fordi CSS ikke kan animere til width: auto.
   Mailen ligger oven i etiketten, så den ikke er med til at
   bestemme bredden.
   ======================================================== */
.footer__nav-link--pille{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: width .55s cubic-bezier(.16, 1, .3, 1),
                opacity .25s ease;
}

/* Pillen dæmpes ikke længere ved hover — udskuddet er svar nok */
.footer__nav-link--pille:hover{
    opacity: 1;
}

.pille__ord{
    display: block;
    transition: opacity .28s ease;
}

/* Mailen klippes af pillen, indtil den har skudt sig ud */
.pille__ord--mail{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

/* Først når main.js har målt, låses bredden fast */
.footer__nav-link--pille.er-maalt{
    width: var(--pille-lukket);
}

.footer__nav-link--pille.er-maalt.er-aaben{
    width: var(--pille-aaben);
}

.footer__nav-link--pille.er-aaben .pille__ord--label{
    opacity: 0;
}

.footer__nav-link--pille.er-aaben .pille__ord--mail{
    opacity: 1;
}

@media (prefers-reduced-motion: reduce){
    .footer__nav-link--pille,
    .pille__ord{
        transition: none;
    }
}