/******************************************************** 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;
    }
}


/* ========================================================
   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;
    }
}

/* ========================================================
   YDELSESLISTEN — udfoldelige rækker.
   Basisreglerne (.liste-*, .team-*) er hentet fra team.css, så
   ydelser.php kan nøjes med sit eget stylesheet som resten af sitet.
   .ydelse-* styrer plus-knappen og panelet; højden sættes af main.js.
   ======================================================== */

/* Stregen over den første række — resten kommer fra .team-row's border-bottom */
.liste{
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid currentColor;
}

.liste-sektion{
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: baseline;
    padding-top: 80px;
}

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

.team-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid currentColor;
    cursor: default;
}

a.team-name{
    text-decoration: none;
    cursor: pointer;
}

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

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

.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;
}

.liste-sektion--ydelser .liste-body,
.liste-sektion--ydelser .team-role,
.liste-sektion--ydelser .ydelse-panel{
    min-width: 0;
}

.liste-sektion--ydelser .team-row.er-aaben .team-name{
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ydelse-knap{
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 23px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.ydelse-knap__ikon{
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
}

.ydelse-knap__ikon::before,
.ydelse-knap__ikon::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.ydelse-knap__ikon::before{
    width: 18px;
    height: 1px;
    transform: translate(-50%, -50%) rotate(0deg);
}

.ydelse-knap__ikon::after{
    width: 1px;
    height: 18px;
    transform: translate(-50%, -50%) rotate(0deg);
}

.team-row.er-aaben .ydelse-knap__ikon::before,
.team-row.er-aaben .ydelse-knap__ikon::after{
    transform: translate(-50%, -50%) rotate(45deg);
}

.ydelse-panel{
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .45s cubic-bezier(.16, 1, .3, 1),
                opacity .3s ease;
}

.team-row.er-aaben .ydelse-panel{
    opacity: 1;
    transition: height .45s cubic-bezier(.16, 1, .3, 1),
                opacity .3s ease .15s;
}

.ydelse-tekst{
    padding-top: 22px;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
}

.ydelse-punkter{
    list-style: none;
    margin: 0;
    padding: 22px 0 6px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--punkt-raekker, 5), auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}

.ydelse-punkter li{
    position: relative;
    padding-left: 18px;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    color: inherit;
}

.ydelse-punkter li::before{
    content: "\2022";
    position: absolute;
    left: 0;
    top: 0;
}

@media screen and (min-width: 768px){
    .liste-sektion{
        position: relative;
    }

    .liste-sektion--ydelser .team-row{
        grid-template-columns: 34% minmax(0, 1fr) 20px;
        column-gap: 24px;
        row-gap: 0;
        align-items: start;
        cursor: pointer;
    }

    .liste-sektion--ydelser .ydelse-panel{
        grid-column: 2;
    }

}

@media screen and (max-width: 767px){
    .liste-sektion{
        grid-template-columns: 1fr;
        padding-top: 60px;
    }

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

    .team-row{
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0 24px;
    }

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

    .team-row{
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

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

    .liste-sektion--ydelser .team-row{
        grid-template-columns: minmax(0, 1fr) 20px;
        column-gap: 16px;
        row-gap: 0;
        padding: 22px 0;
        align-items: center;
    }

    .liste-sektion--ydelser .team-name{
        grid-column: 1;
        grid-row: 1;
    }

    .liste-sektion--ydelser .team-role{
        grid-column: 1;
        grid-row: 2;
        margin-top: 8px;
    }

    .liste-sektion--ydelser .ydelse-knap{
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .liste-sektion--ydelser .ydelse-panel{
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .ydelse-punkter{
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        column-gap: 0;
    }

}

@media (hover: hover){
    .liste-sektion--ydelser .team-row:hover .team-name{
        text-decoration: underline;
        text-underline-offset: 4px;
    }

}

@media (prefers-reduced-motion: reduce){
    .ydelse-panel,
    .ydelse-knap__ikon::before,
    .ydelse-knap__ikon::after{
        transition: none;
    }

}