/* Tasiilaq Auto & Marine - Arktisk Oliven */

:root{
  --tam-bg:#FFFFFF; --tam-surface:#F4F5F0; --tam-ink:#1A1E18;
  --tam-muted:#6B7167; --tam-line:#E2E3DE;
  --tam-accent:#4E6033; --tam-accent-deep:#3A4826; --tam-footer:#1F2419;
  --tam-r-sm:4px; --tam-r-md:8px; --tam-r-lg:12px;
}

.tam-page, .tam-page p, .tam-page li{
  font-family:'Inter',sans-serif; color:var(--tam-ink);
}
.tam-page p{ line-height:1.6; max-width:65ch; }
.tam-page h1,.tam-page h2,.tam-page h3,.tam-page h4,
.tam-page .eael-entry-title{
  font-family:'Inter',sans-serif; font-weight:800;
  color:var(--tam-ink); letter-spacing:-0.01em;
}
.tam-page h1{ line-height:1.05; }
.tam-page h2,.tam-page h3{ line-height:1.12; }

/* Kategorifilter
   Ikke-valgt = sekundærknap (kant i oliven). Valgt = fyldt #3A4826.
   Flueben + fed vægt så tilstanden ikke kun ligger i farven. */
/* Baren staar som et baand: knapper til venstre, status til hoejre,
   med en haarfin streg over og under. Stregerne adskiller filteret
   fra hero og fra produktlisten uden at bruge en flade, hvilket er
   samme greb som resten af sitet bruger til at dele indhold op. */
.tam-filter{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px 24px;
  margin:0 0 34px; padding:16px 0;
  border-top:1px solid var(--tam-line);
  border-bottom:1px solid var(--tam-line);
}
.tam-filter[hidden]{ display:none; }
.tam-filter__raekke{ display:flex; flex-wrap:wrap; gap:10px; flex:1 1 auto; }

.tam-filter__knap{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 18px; margin:0;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  line-height:1.2; color:var(--tam-ink);
  background:var(--tam-bg); border:1px solid var(--tam-line);
  border-radius:var(--tam-r-md); cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.tam-filter__knap:hover{
  background:var(--tam-surface); border-color:var(--tam-muted); color:var(--tam-ink);
}
.tam-filter__knap:focus-visible{ outline:2px solid var(--tam-ink); outline-offset:2px; }
.tam-filter__knap[aria-pressed="true"]{
  background:var(--tam-ink); border-color:var(--tam-ink);
  color:#fff; font-weight:700;
}

.tam-filter__flueben{ display:none; flex:0 0 14px; }
.tam-filter__knap[aria-pressed="true"] .tam-filter__flueben{ display:inline-flex; }

.tam-filter__tal{
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--tam-muted);
}
.tam-filter__knap:hover .tam-filter__tal{ color:var(--tam-ink); }
.tam-filter__knap[aria-pressed="true"] .tam-filter__tal{ color:rgba(255,255,255,.75); }

/* Ingen margin mere: status sidder nu i samme flexlinje som knapperne
   og skubbes til hoejre af justify-content paa .tam-filter. */
.tam-filter__status{
  font-family:'Inter',sans-serif; font-size:13.5px; color:var(--tam-muted);
  margin:0; max-width:none; text-align:right; flex:0 0 auto;
}

.tam-sek[hidden]{ display:none !important; }

@media (max-width:600px){
  .tam-filter__raekke{ gap:8px; }
  .tam-filter__knap{ padding:10px 14px; font-size:13.5px; }
  /* Ingen plads til to spalter: status falder ned under knapperne. */
  .tam-filter__status{ text-align:left; flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .tam-filter__knap{ transition:none; }
}

.tam-kat{
  display:flex; align-items:center; gap:14px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--tam-ink);
  margin:0 0 20px;
}
.tam-kat::before{
  content:''; width:4px; height:22px; border-radius:2px;
  background:var(--tam-accent); flex:0 0 4px;
}

.tam-page .elementor-button{
  font-family:'Inter',sans-serif; font-weight:700;
  border-radius:var(--tam-r-md); box-shadow:none;
}

/* EA Post Grid omformet til brede rækker.
   Pluginnets eget stylesheet sætter holder-inner til flex-direction:
   column og lader billedet beholde sin egen billedhøjde. Det giver et
   højformat-foto lov til at presse hele kortet i vejret. Derfor
   tvinges rækken til row her, og hele højdekæden fra kort ned til
   <img> låses eksplicit, så ethvert foto - højt eller bredt - vises
   helt uden beskæring inden i den samme faste boks. */
.tam-grid .eael-post-grid{ margin:0; }
.tam-grid .eael-post-grid-column{ width:100% !important; padding:0 !important; }
.tam-grid .eael-grid-post{ margin-bottom:14px; }

.tam-grid .eael-grid-post-holder{
  background:#fff; border:1px solid var(--tam-line);
  border-radius:var(--tam-r-lg);
  box-shadow:0 1px 2px rgba(26,30,24,.06);
  overflow:hidden; height:auto;
}
.tam-grid .eael-grid-post-holder-inner{
  display:flex !important; flex-direction:row !important; align-items:stretch;
}
.tam-grid .eael-entry-media{
  margin:0; flex:0 0 200px !important; width:200px; height:auto;
  align-self:stretch; min-height:170px;
  background:var(--tam-bg); border-right:1px solid var(--tam-line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.tam-grid .eael-entry-wrapper{ flex:1 1 auto; min-width:0; }
.tam-grid .eael-entry-thumbnail{
  width:100% !important; height:100% !important; display:flex !important;
  align-items:center; justify-content:center;
}
.tam-grid .eael-entry-media img{
  width:100% !important; height:100% !important; max-width:100% !important;
  object-fit:contain !important; box-sizing:border-box; padding:14px;
  display:block; position:static !important; transform:none !important;
}
.tam-grid .eael-entry-wrapper{
  padding:22px 26px; display:flex; flex-direction:column;
}
.tam-grid .eael-entry-header{ margin:0 0 4px; }
.tam-grid .eael-entry-title{ font-size:20px; margin:0; }
.tam-grid .eael-entry-title a{ color:var(--tam-ink); text-decoration:none; }
.tam-grid .eael-entry-title a:hover{ color:var(--tam-accent); }
.tam-grid .eael-entry-content{ padding:0; flex:1; display:flex; }
.tam-grid .eael-grid-post-excerpt{ display:flex; flex:1; }
.tam-grid .eael-grid-post-excerpt > p{ margin:0; max-width:none; display:flex; flex:1; }

/* Kortindhold leveret af excerpt-filteret.
   Hele kæden ned til .tam-kort er flex, så foden (lager + pris)
   altid kan skubbes til bunden med margin-top:auto - uanset hvor
   kort eller langt beskrivelsesteksten er. En tidligere version brugte
   height:100% her, som kræver en eksplicit højde på hvert
   forældreled og derfor kun virkede for nogle produkter.

   Afstandene følger et korthierarki (titel tæt på en kort
   beskrivelse, mere luft før detaljerne, mest luft før pris/lager)
   i stedet for en ensartet afstand mellem alt. */
.tam-kort{ display:flex; flex-direction:column; flex:1; width:100%; }
.tam-kort__besk{
  font-size:15.5px; line-height:1.55; color:var(--tam-ink); max-width:60ch;
  margin:0 0 14px;
}
.tam-kort__spec{ font-size:13.5px; line-height:1.5; color:var(--tam-muted); margin:0; }
/* 16px over datalinjen, så titlen og de tre rubrikker ikke klistrer
   sammen. Svarer til sm i afstandsskalaen, og til polstringen ned mod
   foden, så datalinjen står som sin egen blok mellem de to. */
.tam-kort__data{ display:flex; flex-wrap:wrap; gap:8px 34px; margin:16px 0 4px; }
.tam-data{ display:flex; flex-direction:column; gap:1px; }
.tam-data__label{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--tam-muted);
}
.tam-data__vaerdi{ font-size:15px; font-weight:500; color:var(--tam-ink); }

.tam-kort__fod{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-top:auto; padding-top:18px;
}
.tam-kort__pris{
  font-family:'Inter',sans-serif; font-weight:800; font-size:27px;
  line-height:1; color:var(--tam-ink); white-space:nowrap; text-align:right;
}
.tam-kort__pris--aftale{
  font-size:14px; font-weight:600; color:var(--tam-accent);
  line-height:1.4; white-space:normal; max-width:190px;
}

/* Kontaktbokse */
.tam-kontakt{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tam-kontakt__boks{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--tam-r-lg); padding:22px 24px;
}
.tam-kontakt__label{
  display:block; font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,.6);
  margin-bottom:7px;
}
.tam-kontakt__vaerdi{
  font-family:'Inter',sans-serif; font-size:19px; font-weight:700; color:#fff;
  text-decoration:none; word-break:break-word;
}
.tam-adresse{
  font-family:'Inter',sans-serif; font-size:15px; color:rgba(255,255,255,.75);
  margin:22px 0 0; max-width:none;
}
/* Forbeholdstekst under introen: sekundær, men læsbar.
   Bredere mål end brødtekst, så den lander på to linjer og ikke
   bygger en smal søjle under introen. */
.tam-page .tam-forbehold{
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.55;
  color:var(--tam-muted); max-width:840px; margin:14px 0 0;
}
@media (max-width:900px){
  .tam-page .tam-forbehold{ max-width:none; }
}

/* Vejledningen er en fodnote, ikke broedtekst, og skal ligge som en
   linje under listen i hele dens bredde. .tam-page p saetter 65ch af
   hensyn til laesbarhed og er mere specifik end klassen alene, saa
   undtagelsen skal skrives med samme vaegt for at vinde. */
.tam-page .tam-disclaimer{
  font-size:13.5px; line-height:1.6; color:var(--tam-muted);
  border-top:1px solid var(--tam-line); padding-top:18px; margin:8px 0 0;
  max-width:none;
}

@media (max-width:880px){
  .tam-grid .eael-grid-post-holder-inner{ flex-direction:column !important; }
  .tam-grid .eael-entry-media{
    flex:0 0 auto !important; width:100%; height:190px !important;
    min-height:0; border-right:0; border-bottom:1px solid var(--tam-line);
  }
  .tam-grid .eael-entry-wrapper{ padding:20px; }
  .tam-kort__pris{ font-size:23px; }
  .tam-kort__pris--aftale{ font-size:14px; }
  .tam-kontakt{ grid-template-columns:1fr; }
}

/* Pladsholder-flade på kort uden featured image.
   Forsvinder automatisk så snart et produkt får et billede. */
.tam-grid .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
  content:''; flex:0 0 190px; align-self:stretch; min-height:132px;
  background:
    linear-gradient(160deg, rgba(78,96,51,.14) 0%, rgba(78,96,51,.05) 55%, rgba(26,30,24,.10) 100%),
    var(--tam-surface);
  border-right:1px solid var(--tam-line);
}
@media (max-width:880px){
  .tam-grid .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
    flex:0 0 auto; min-height:96px; border-right:0;
    border-bottom:1px solid var(--tam-line);
  }
}

/* Sikkerhedsnet mod mobilens egen linkificering.
   Slaar format-detection fejl, eller genkender en browser alligevel et
   telefonnummer, saetter den sit eget blaa link ind i vores markup. Her
   tvinges farve og understregning tilbage til tekstens egen, saa den
   blaa systemfarve ikke slipper igennem. */
.tam-kontakt__vaerdi a,
.tam-kinfo__vaerdi a,
.tam-kinfo__adresse a,
.tam-adresse a,
.tam-footer .tam-kontakt__boks a{
  color:inherit; text-decoration:none; -webkit-text-decoration:none;
}

/* ================= Sitebredde ================= */
/* Selve bredden styres af Blocksy-indstillingen maxSiteWidth (1280).
   Her justeres kun de wrappere temaet ikke selv dækker. */
/* 1280px er sidens indholdsbredde. Bredden her inkluderer de 20px
   polstring i hver side, så grænsen sættes til 1320px for at give
   et indhold på præcis 1280px. Ellers starter footerteksten 20px
   længere inde end overskrifter, kort og knapper ovenfor. */
.tam-footer__inner{ max-width:1320px; margin-inline:auto; }

/* ================= Header =================
   Blocksy styrer headeren gennem CSS-variabler, og temaets egne
   selektorer er mere specifikke end en almindelig klasse. Derfor
   sættes temaets variabler på temaets egne selektorer i stedet for
   at overskrive færdige egenskaber. Menulinks er height:100%, så
   baggrundsfarve på et menupunkt fylder hele headerens højde.
   Aktiv tilstand markeres derfor med en streg, ikke en flade. */

body[data-header*="type-1"] .ct-header [data-row*="middle"]{
  --height:84px;
  background-color:var(--tam-bg);
  --theme-border-bottom:1px solid var(--tam-line);
}
body[data-header*="type-1"]{ --header-height:84px; }

body[data-header*="type-1"] .ct-header [data-id="logo"] .site-title{
  --theme-font-family:'Inter',sans-serif;
  --theme-font-weight:800;
  --theme-font-size:22px;
  --theme-line-height:1.15;
  --theme-letter-spacing:-0.015em;
  --theme-link-initial-color:var(--tam-ink);
  --theme-link-hover-color:var(--tam-accent);
}

body[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a{
  --theme-font-family:'Inter',sans-serif;
  --theme-font-weight:600;
  --theme-font-size:14.5px;
  --theme-text-transform:none;
  --theme-letter-spacing:0;
  --theme-line-height:1.2;
  --theme-link-initial-color:var(--tam-ink);
  --theme-link-hover-color:var(--tam-accent);
  --theme-link-active-color:var(--tam-accent);
}

body[data-header*="type-1"] .ct-header [data-id="menu"] > ul{
  --menu-items-spacing:34px;
}

/* Aktiv side: kort oliven streg i bunden af menupunktet */
body[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li{
  position:relative;
}
body[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li[class*="current-menu-"]::after{
  content:''; position:absolute; left:0; right:0; bottom:22px;
  height:2px; border-radius:2px; background:var(--tam-accent);
}

/* ================= Footer ================= */
.ct-footer{ display:none !important; }

.tam-footer{ background:var(--tam-footer); color:#fff; }
.tam-footer__inner{ padding:64px 20px 30px; }
.tam-footer__top{
  display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,1.65fr);
  gap:48px; align-items:start;
}
.tam-footer__pitch{
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.6;
  color:rgba(255,255,255,.68); margin:0; max-width:38ch;
}
.tam-footer .tam-kontakt__boks{ padding:20px 22px; }

.tam-footer__bund{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px 32px;
  margin-top:44px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.tam-footer__bund .tam-adresse{ margin:0; font-size:14.5px; }

.tam-footer__menu{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  list-style:none; margin:0; padding:0;
}
.tam-footer__menu a{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.72); text-decoration:none;
}
.tam-footer__menu a:hover{ color:#fff; }

@media (max-width:880px){
  .tam-footer__top{ grid-template-columns:1fr; gap:30px; }
  .tam-footer__inner{ padding:48px 20px 28px; }
  .tam-footer__bund{ flex-direction:column; align-items:flex-start; }
}

/* ================= To kolonner på Produkter ================= */
.tam-grid--2 .eael-post-grid{
  display:flex; flex-wrap:wrap; gap:0 16px;
}
.tam-grid--2 .eael-post-grid-column{
  width:calc(50% - 8px) !important; float:none !important;
}
.tam-grid--2 .eael-entry-media,
.tam-grid--2 .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
  flex:0 0 168px !important; width:168px; min-height:170px;
}
.tam-grid--2 .eael-entry-wrapper{ padding:20px 22px; }
.tam-grid--2 .eael-entry-title{ font-size:18px; }
.tam-grid--2 .tam-kort__besk{ font-size:14.5px; margin-bottom:12px; }
.tam-grid--2 .tam-kort__pris{ font-size:23px; }
.tam-grid--2 .tam-kort__pris--aftale{ font-size:14px; }
.tam-grid--2 .tam-kort__fod{ padding-top:14px; }

/* Lige højde på kortene i samme række. Kolonnerne strækker sig i forvejen,
   fordi .eael-post-grid er flex, men selve kortet stod med height:auto og
   fyldte derfor ikke sin kolonne ud. Et kort med to linjer i prisfeltet,
   for eksempel "Pris oplyses ved henvendelse", blev derfor højere end
   nabokortet. Her kobles højden hele vejen ned gennem kæden. */
.tam-grid--2 .eael-post-grid-column{ display:flex; }
.tam-grid--2 .eael-grid-post{ display:flex; width:100%; }
.tam-grid--2 .eael-grid-post-holder{ display:flex; flex:1 1 auto; width:100%; height:auto; }
.tam-grid--2 .eael-grid-post-holder-inner{ flex:1 1 auto; }

@media (max-width:1024px){
  .tam-grid--2 .eael-post-grid-column{ width:100% !important; }
  .tam-grid--2 .eael-entry-media,
  .tam-grid--2 .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
    flex:0 0 170px !important; width:170px;
  }
}
@media (max-width:880px){
  .tam-grid--2 .eael-entry-media{
    flex:0 0 auto !important; width:100%; height:190px !important; min-height:0;
  }
  .tam-grid--2 .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
    flex:0 0 auto; min-height:96px;
  }
}

/* Under 1000px overtager Blocksys mobilheader (hamburger).
   Der skal temaets egen højde på 70px gælde, ikke desktop-højden. */
@media (max-width:999px){
  body[data-header*="type-1"] .ct-header [data-row*="middle"]{ --height:70px; }
  body[data-header*="type-1"]{ --header-height:70px; }
  body[data-header*="type-1"] .ct-header [data-id="logo"] .site-title{
    --theme-font-size:19px;
  }
}

/* ================= Logo i header ================= */
body[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container img,
body[data-header*="type-1"] .ct-header [data-id="logo"] img{
  max-height:62px; width:auto; height:auto;
}
/* Logofilen har 30 tomme enheder i venstre kant af et laerred paa 1116,
   altsaa 2.69%. Uden kompensation flugter filens kant med menuen ovenfor,
   men bogstaverne goer ikke. Procenten regnes ud fra elementets egen
   bredde og holder derfor i alle stoerrelser.

   Gaelder kun desktop. Paa mobil centreres logoet i stedet, se nedenfor,
   og der ville en venstre-kompensation traekke det ud af midten. */
@media (min-width:1000px){
  body[data-header*="type-1"] .ct-header [data-id="logo"] img{
    transform:translateX(-2.69%);
  }
}

/* ================= Logo centreret paa mobil =================
   Raekken er et grid med to auto-kolonner: logoet i den foerste,
   hamburgeren i den anden.

   Skulle logoet centreres med flex eller margin alene, ville det lande
   midt i den plads, hamburgeren levner, altsaa en halv knapbredde for
   langt til venstre. Derfor loeftes logospalten ud af gridflowet og
   saettes paa 50% af raekken. Saa sidder det i sidens egen midte,
   uanset hvor bred hamburgeren er.

   Naar logoet forlader flowet, er hamburgeren eneste gridelement
   tilbage. Den skal derfor spaende begge kolonner og stilles i hoejre
   kant. Et margin-left:auto ville kun skubbe den til kanten af foerste
   kolonne, altsaa ind midt i headeren oven i logoet. */
@media (max-width:999px){
  body[data-header*="type-1"] .ct-header [data-device="mobile"] [data-row="middle"] .ct-container{
    position:relative;
  }
  body[data-header*="type-1"] .ct-header [data-device="mobile"] [data-column="start"]{
    position:absolute; top:0; bottom:0; left:50%;
    transform:translateX(-50%);
    display:flex; align-items:center;
    margin:0; padding:0;
  }
  body[data-header*="type-1"] .ct-header [data-device="mobile"] [data-column="end"]{
    grid-column:1 / -1;
    justify-self:end;
  }
  body[data-header*="type-1"] .ct-header [data-id="logo"] img{ max-height:44px; }
}
@media (max-width:600px){
  body[data-header*="type-1"] .ct-header [data-id="logo"] img{ max-height:36px; }
}

/* ================= Om os på forsiden =================
   Asymmetrisk todeling: påstanden til venstre, belæggene til højre.
   Punkterne adskilles med hårfine streger, ikke kort. Tre ens kort
   ved siden af hinanden er bandlyst i designretningen, og her er der
   heller ingen reel niveauforskel at markere med et løftet felt. */
.tam-om{ border-top:1px solid var(--tam-line); }

.tam-om__liste{ list-style:none; margin:0; padding:0; }
.tam-om__punkt{
  padding:22px 0; border-top:1px solid var(--tam-line);
}
.tam-om__punkt:first-child{ border-top:0; padding-top:4px; }
.tam-om__punkt:last-child{ padding-bottom:0; }

.tam-om__punkt{ display:flex; gap:16px; align-items:flex-start; }
.tam-om__ikon{
  flex:0 0 26px; width:26px; height:26px; margin-top:1px;
  /* Ingen tonet plade bag ikonet. Afrundet firkant med svag accentbund
     er standardgrebet i næsten enhver skabelon, og det var netop den, der
     fik listen til at ligne noget generisk. Ikonet står frit i accentfarven,
     lidt mindre og med tungere streg, så det læses som skiltning frem for
     dekoration. De hårfine streger mellem punkterne bærer opdelingen. */
  color:var(--tam-accent);
  display:flex; align-items:center; justify-content:center;
}

/* stroke-width sat i CSS vinder over attributten inde i SVG'en, så
   stregvægten kan justeres uden at røre markuppen i Elementor. */
.tam-om__ikon-svg{ width:24px; height:24px; stroke-width:1.9; }

.tam-om__titel{
  font-family:'Inter',sans-serif; font-weight:700; font-size:17px;
  line-height:1.25; color:var(--tam-ink); margin:0 0 7px; max-width:none;
}
.tam-om__tekst{
  font-family:'Inter',sans-serif; font-size:15.5px; line-height:1.6;
  color:var(--tam-muted); margin:0; max-width:52ch;
}

/* Eyebrow og grøn påstandslinje i "Om os" */
.tam-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--tam-muted);
  margin:0 0 4px; max-width:none;
}
.tam-eyebrow::before{ content:''; width:22px; height:2px; background:var(--tam-accent); flex:0 0 22px; }

/* Kort-indpakning om hele "Om os", jf. Claude Design-mockuppet:
   let baggrund udenom, hvidt kort med kant og let skygge indeni. */
.tam-om-ydre{ max-width:1280px; margin-inline:auto; }
.tam-om-kort{
  background:#fff; border:1px solid var(--tam-line);
  border-radius:var(--tam-r-lg); box-shadow:0 1px 2px rgba(26,30,24,.06);
  overflow:hidden;
}
.tam-om-raekke{ padding:48px 44px 40px; }

@media (max-width:880px){
  .tam-om__punkt{ padding:18px 0; }
  .tam-om-raekke{ padding:32px 22px 28px; }
}

/* ================= Bilkort: billede øverst =================
   Bilerne sælges på fotoet, ikke på en linje data, så billedet
   får hele kortets bredde i toppen i stedet for en smal søjle til
   venstre. Teksten under er uændret: titel, de tre datarubrikker og
   foden med ID og pris.

   EA sætter selv order:-1 på .eael-entry-media, så billedet lander
   øverst af sig selv, så snart rækken vendes til column. Billedet
   vises stadig med object-fit:contain i en fast boks, så høje og
   brede fotos fylder det samme og aldrig beskæres. */
.tam-grid--top .eael-grid-post-holder,
.tam-grid--top .eael-grid-post-holder-inner{ height:100%; }
.tam-grid--top .eael-grid-post-holder-inner{ flex-direction:column !important; }

.tam-grid--top .eael-entry-media,
.tam-grid--top .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
  flex:0 0 auto !important; width:100% !important; height:230px !important;
  min-height:0 !important;
  border-right:0; border-bottom:1px solid var(--tam-line);
}
.tam-grid--top .eael-entry-media img{ padding:18px 22px; }
.tam-grid--top .eael-entry-wrapper{ padding:22px 26px 24px; }

@media (max-width:880px){
  .tam-grid--top .eael-entry-media,
  .tam-grid--top .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
    height:200px !important;
  }
  .tam-grid--top .eael-entry-media img{ padding:14px 16px; }
  .tam-grid--top .eael-entry-wrapper{ padding:20px; }
}

/* ================= Ensartede billedformater =================
   Fotoerne varierer fra 0,48 (stående påhængsmotor) til 1,78
   (liggende ATV). Før lå højden hos billedet selv, så et
   højformat pressede kortet i vejret. Nu låses rammen i stedet:

     Produktkort  1:1   - midt mellem yderpunkterne, mindst spild
     Bilkort     16:9   - bilfotoerne ligger på 1,80 og udfylder den

   Rammen sidder på .eael-entry-thumbnail og bruger aspect-ratio,
   så den følger søjlebredden i alle brudpunkter uden faste
   pixelhøjder. object-fit:contain bevares - intet foto beskæres. */

.tam-grid .eael-entry-media{
  height:auto !important;
  min-height:0 !important;
  align-self:stretch;
}
.tam-grid .eael-entry-media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Produktkort: kvadratisk ramme */
.tam-grid:not(.tam-grid--top) .eael-entry-thumbnail{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
}

/* Bilkort: 16:9 ramme i toppen */
.tam-grid--top .eael-entry-thumbnail{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  flex:0 0 auto;
}
.tam-grid--top .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
  height:auto !important;
  min-height:0 !important;
  width:100%;
  aspect-ratio:16 / 9;
}

/* Under 880px bliver billedsøjlen fuld bredde. Et kvadrat ville
   der fylde næsten en hel skærmhøjde, så produktrammen
   fladdes ud til 3:2 på mobil. */
@media (max-width:880px){
  .tam-grid:not(.tam-grid--top) .eael-entry-thumbnail{
    aspect-ratio:3 / 2;
  }
}

/* ================= Luft omkring fotoet =================
   Den oprindelige padding på 14px (18/22px på bilkort) blev sat
   dengang boksen kunne vokse med billedet. Nu er rammen låst, så
   den samme padding æder unødigt af pladsen. Skruet ned, så
   motivet fylder mest muligt uden at klistre til kanten. */
.tam-grid .eael-entry-media img{ padding:8px !important; }
.tam-grid--top .eael-entry-media img{ padding:10px 14px !important; }

@media (max-width:880px){
  .tam-grid .eael-entry-media img{ padding:8px !important; }
  .tam-grid--top .eael-entry-media img{ padding:8px 12px !important; }
}

/* ================= Produktkort med billede øverst =================
   Produkterne deler nu kolonnelayout med bilkortene, men ikke deres
   format. Bilfotoerne ligger på 1,80 og passer til 16:9. Produkt-
   fotoerne spænder fra 0,48 (stående påhængsmotor) til 1,78, så
   en bred 16:9-ramme ville presse de stående motorer ned til en
   tynd strimmel. 4:3 er bredt nok til ATV og gummibåd og højt nok
   til at en stående motor stadig fylder.

   Produktgittrene kendes på .tam-sek, som bilgitteret ikke har. */
.tam-grid--top.tam-sek .eael-entry-thumbnail{
  aspect-ratio:4 / 3;
}
.tam-grid--top.tam-sek .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
  aspect-ratio:4 / 3;
}

/* ================= Kontaktformular =================
   WPForms kører i modern render mode og eksponerer selv CSS-
   variabler. Derfor sættes udtrykket gennem pluginnets egne
   variabler frem for at overskrive dets regler med !important.

   Radius følger designretningen uændret: felter og knap 8px,
   kortet 12px. Retningen tillader kun 4, 8 og 12px, så det
   premium ligger i rammen, luften, versallabels og fokus-
   tilstanden - ikke i rundere hjørner. */

.wpforms-container.wpforms-render-modern{
  --wpforms-field-border-radius:8px;
  --wpforms-field-border-size:1px;
  --wpforms-field-border-color:#E2E3DE;
  --wpforms-field-background-color:#FFFFFF;
  --wpforms-field-text-color:#1A1E18;
  --wpforms-label-color:#1A1E18;
  --wpforms-label-sublabel-color:#6B7167;
  --wpforms-button-border-radius:8px;
  --wpforms-button-background-color:#4E6033;
  --wpforms-button-background-color-alt:#3A4826;
  --wpforms-button-text-color:#FFFFFF;
  --wpforms-field-size-input-height:52px;
  --wpforms-field-size-padding-h:16px;
  --wpforms-field-size-font-size:16px;
  --wpforms-button-size-height:52px;
  --wpforms-button-size-font-size:16px;
}

/* Kortet omkring formularen. Samme opskrift som produktkortene:
   1px kant, 12px radius, næsten usynlig tonet skygge. */
/* wpforms-full.min.css indlæses EFTER tam-visning.css, så ved ens
   specificitet vinder pluginnet. Derfor kvalificeres selektoren med
   tag + to klasser (0,2,1) i stedet for at slå efter med !important.
   Pluginnet centrerer selv formularen med margin:auto; her stilles
   den venstre, så kortets kant flugter med overskriften. */
div.wpforms-container.wpforms-render-modern{
  background:var(--tam-bg);
  border:none;
  border-radius:var(--tam-r-lg);
  box-shadow:none;
  padding:4px 0 0;
  max-width:760px;
  margin:0;
}

/* Versale labels binder formularen til datarubrikkerne på kortene. */
div.wpforms-container.wpforms-render-modern .wpforms-field-label{
  font-family:'Inter',sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--tam-muted);
  margin-bottom:8px;
}
div.wpforms-container.wpforms-render-modern .wpforms-required-label{
  color:var(--tam-accent); font-weight:600;
}
div.wpforms-container.wpforms-render-modern .wpforms-field-description{
  font-family:'Inter',sans-serif;
  font-size:13.5px; line-height:1.6; color:var(--tam-muted);
  margin-top:8px; text-transform:none; letter-spacing:0;
}
div.wpforms-container.wpforms-render-modern .wpforms-field{ padding:0 0 22px; }
div.wpforms-container.wpforms-render-modern input[type=text],
div.wpforms-container.wpforms-render-modern input[type=email],
div.wpforms-container.wpforms-render-modern textarea{
  font-family:'Inter',sans-serif;
  width:100%; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
div.wpforms-container.wpforms-render-modern textarea{ min-height:150px; padding:14px 16px; line-height:1.6; }

/* Fokus får en oliven kant plus en tynd ring, så tilstanden kan
   aflæses uden farvesyn. */
div.wpforms-container.wpforms-render-modern input:focus,
div.wpforms-container.wpforms-render-modern textarea:focus{
  border-color:var(--tam-accent);
  box-shadow:0 0 0 3px rgba(78,96,51,.14);
  outline:none;
}

div.wpforms-container.wpforms-render-modern .wpforms-submit-container{ padding-top:6px; }
/* WPForms bruger -alt-variablen som knappens grundfarve og ikke som
   hovertilstand, hvilket er omvendt af hvad navnet antyder. Farven
   sættes derfor direkte her, så den følger accentfarven uanset
   hvordan pluginnet fortolker sine egne variabler. */
div.wpforms-container.wpforms-render-modern button.wpforms-submit[type=submit]{
  font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:.02em; width:100%; cursor:pointer;
  border:0; transition:background-color .15s ease;
}

/* E-mail og telefon står som to kolonner på bred skærm. Alle
   andre felter er fuldbredte som udgangspunkt, så nye felter
   automatisk lander rigtigt uden at layoutet skal røres. */
@media (min-width:700px){
  #wpforms-51 .wpforms-field-container{
    display:grid; grid-template-columns:1fr 1fr; column-gap:20px;
  }
  #wpforms-51 .wpforms-field{ grid-column:1 / -1; }
  #wpforms-51 #wpforms-51-field_1-container{ grid-column:1 / 2; }
  #wpforms-51 #wpforms-51-field_2-container{ grid-column:2 / 3; }
}

@media (max-width:600px){
  div.wpforms-container.wpforms-render-modern{ padding:4px 0 0; }
}

/* ================= Kontaktside: to spalter =================
   Elementor-containeren er flex. Her overtages den som grid, så
   info-spalten og formularen står side om side uden at der skal
   bygges indlejrede containere. Formularen får lov at fylde sin
   egen spalte, så max-width fra formularblokken slås fra her. */
/* Elementor pakker containerens børn i en indre .e-con-inner, så
   gridet skal sidde der og ikke på selve containeren.

   Tre widgets, to spalter: info-spalten spænder begge rækker til
   venstre, mens overskrift og formular stables i højre spalte.
   Placeringen sættes på navngivne klasser frem for nth-child, så
   den ikke går i stykker næste gang rækkefølgen røres. */
.tam-kontakt-grid > .e-con-inner{
  display:grid !important;
  grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  column-gap:40px; row-gap:18px; align-items:start;
}
.tam-kontakt-grid > .e-con-inner > .elementor-widget{ width:100%; max-width:none; }
.tam-kontakt-grid > .e-con-inner > .tam-kinfo-col{ grid-column:1; grid-row:1 / span 2; }
.tam-kontakt-grid > .e-con-inner > .tam-kform-titel{ grid-column:2; grid-row:1; }
.tam-kontakt-grid > .e-con-inner > .tam-kform{ grid-column:2; grid-row:2; }
.tam-kinfo__eyebrow--form{ margin-bottom:0; }
@media (min-width:881px){
  .tam-kontakt-grid > .e-con-inner > .tam-kform{ margin-top:-22px; }
}
.tam-kontakt-grid div.wpforms-container.wpforms-render-modern{
  max-width:none; margin:0;
}

.tam-kinfo__eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tam-muted); margin:0 0 22px;
}
.tam-kinfo__streg{
  display:block; width:22px; height:2px; background:var(--tam-accent);
}
.tam-kinfo__blok{
  border-bottom:1px solid var(--tam-line);
  padding-bottom:16px; margin-bottom:16px;
}
.tam-kinfo__blok--sidst{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.tam-kinfo__label{
  display:block; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tam-muted); margin-bottom:5px;
}
.tam-kinfo__vaerdi{
  font-family:'Inter',sans-serif; font-weight:600; font-size:19px;
  color:var(--tam-ink); text-decoration:none;
}
.tam-kinfo__adresse{
  font-size:16px; line-height:1.55; color:var(--tam-ink);
}

@media (max-width:880px){
  .tam-kontakt-grid > .e-con-inner{ grid-template-columns:1fr; row-gap:14px; }
  .tam-kontakt-grid > .e-con-inner > .tam-kinfo-col,
  .tam-kontakt-grid > .e-con-inner > .tam-kform-titel,
  .tam-kontakt-grid > .e-con-inner > .tam-kform{
    grid-column:1; grid-row:auto;
  }
  .tam-kinfo__eyebrow--form{ margin-top:14px; }
}

/* ================= Forespørgselsknap på bilkort =================
   Fyldt accentknap. Den var oprindeligt sekundær for ikke at
   konkurrere med prisen, men filtrene er siden gjort neutrale, så
   accentfarven nu udelukkende markerer det man klikker sig videre
   på. Her er det kortets egentlige handling. */
.tam-kort__knap{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  color:#FFFFFF; text-decoration:none;
  background:var(--tam-accent);
  border:1px solid var(--tam-accent); border-radius:var(--tam-r-md);
  padding:9px 16px; line-height:1.2; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
.tam-kort__knap:hover,
.tam-kort__knap:focus-visible{
  background:var(--tam-accent-deep); border-color:var(--tam-accent-deep);
  color:#FFFFFF;
}

@media (max-width:520px){
  .tam-kort--bil .tam-kort__fod{ gap:12px; flex-wrap:wrap; }
  .tam-kort__knap{ width:100%; }
}

/* ================= Footerlogo =================
   brightness(0) gør alle pixels sorte, invert(1) vender dem til
   hvid. Alfakanalen røres ikke, så kun selve bogstaverne farves
   og baggrunden forbliver gennemsigtig. Det giver den monokrome
   udgave uden at der skal en separat hvid fil til. */
/* PNG-filen har 25px tom plads i venstre kant af et 596px lærred,
   altså 4,19%. Uden kompensation flugter filens kant med teksten
   nedenunder, men bogstaverne gør ikke. Den negative margen svarer
   til de 4,19% ved den viste bredde: 230px giver 9,6px, 190px giver
   8,0px. Skiftes logofilen, skal tallene måles igen. */
.tam-footer__logo{
  display:block; width:auto; height:auto;
  max-width:230px; margin:0 0 16px;
  filter:brightness(0) invert(1);
  /* Kompensationen var foer to faste pixelvaerdier, en pr. brudpunkt, og
     de skulle regnes om hver gang logoet skiftede stoerrelse. En procent
     i translateX regnes ud fra elementets EGEN bredde, ikke foraeldrens,
     saa den samme vaerdi passer i enhver stoerrelse. 25 tomme pixels i et
     laerred paa 596 giver 4.19%. */
  transform:translateX(-4.19%);
}

@media (max-width:880px){
  .tam-footer__logo{ max-width:190px; }
}

/* ================= Kobling til Elementors globale farver =================
   Elementor udstiller sine globale farver som CSS-variabler, men de
   sættes på body via klassen elementor-kit-9, ikke på html. Derfor
   ligger koblingen her på body og ikke i :root, hvor de øvrige
   tokens bor. body vinder over :root, fordi den er mere specifik.

   Andet argument i var() er en reserve: falder Elementor ud, eller
   åbnes en side uden kit, beholder sitet sine egne farver i stedet
   for at stå uden. Farverne kan herefter styres fra Elementor under
   Site Settings og Global Colors. */
body{
  --tam-accent:      var(--e-global-color-primary,   #4E6033);
  --tam-accent-deep: var(--e-global-color-accent,    #3A4826);
  --tam-ink:         var(--e-global-color-text,      #1A1E18);
}

/* WPForms læser ikke vores tokens af sig selv, så knappens farver
   peges eksplicit over på dem. Uden dette ville Send besked-knappen
   blive stående oliven, mens resten af sitet skiftede. */
div.wpforms-container.wpforms-render-modern{
  /* Bemærk rækkefølgen: WPForms bruger -alt som knappens
     grundfarve og den anden som hovertilstand, altså omvendt af
     hvad navnene antyder. Testet på formularen, ikke gættet. */
  --wpforms-button-background-color-alt: var(--tam-accent);
  --wpforms-button-background-color:     var(--tam-accent-deep);
}

/* ================= Hero med fotobaggrund =================
   Fotoet ligger som baggrund på selve containeren, så det går
   helt ud til kanten. Elementors indre wrapper begrænses stadig til
   indholdsbredden, så teksten flugter med resten af sitet.

   Gradienten er kraftigst nederst til venstre, hvor overskriften og
   statsbjælken står. Fotoet har en hvid slæde på tværs af
   nederste halvdel, og uden en solid gradient dernede ville hvid
   tekst forsvinde i den. */
.tam-hero--foto{
  position:relative;
  background-color:var(--tam-footer);
  padding-block:0 !important;
  min-height:600px;
  display:flex; align-items:stretch;
}
.tam-hero--foto::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(20,24,18,.92) 0%, rgba(20,24,18,.55) 38%, rgba(20,24,18,.12) 70%, rgba(20,24,18,.28) 100%),
    linear-gradient(to right, rgba(20,24,18,.72) 0%, rgba(20,24,18,.30) 45%, rgba(20,24,18,0) 75%);
}
/* Retningen sættes i containerens Elementor-indstillinger og ikke
   her, fordi temaets egen regel vinder over en almindelig klasse.
   Her styres kun afstandene, som nu er ens foroven og forneden. */
.tam-hero--foto > .e-con-inner{
  position:relative; z-index:1;
  gap:0; padding-block:88px;
}

/* Tekstspalten fylder den plads der er tilovers, og centrerer sit
   indhold lodret. Dermed får teksten lige meget luft over og under,
   uanset hvor høj hero'en er, og statsboksen skubbes til bunden. */
.tam-hero--foto > .e-con-inner > .e-con:first-child{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start;
}
.tam-hero--foto > .e-con-inner > .e-con:first-child > .e-con-inner{
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; height:100%;
}

/* Teksten står på foto og skal være hvid. Farverne sættes her i
   stedet for på hver enkelt widget, så et skift af foto ikke
   kræver at man går alle elementer igennem. */
.tam-hero--foto .elementor-widget-heading .elementor-heading-title,
.tam-hero--foto .elementor-widget-heading h1,
.tam-hero--foto h1{ color:#FFFFFF; }
.tam-hero--foto .elementor-widget-text-editor,
.tam-hero--foto .elementor-widget-text-editor p,
.tam-hero--foto p{ color:rgba(255,255,255,.88); }

@media (max-width:880px){
  .tam-hero--foto{ min-height:520px; }
  .tam-hero--foto > .e-con-inner{ padding-block:64px; }
}

/* Indholdet ved siden af ikonet. Uden en wrapper med flex:1 ville
   titel og tekst ikke fylde den resterende bredde i punktet. */
.tam-om__indhold{ flex:1 1 auto; min-width:0; }

/* ================= Tre kolonner på Produkter =================
   Produktsidens fire kategorigitre stod i to kolonner. Med billedet
   øverst blev hvert kort omkring 632px bredt, og fotoet fyldte en halv
   skærm. Tre kolonner giver cirka 416px pr. kort. To af kategorierne
   har præcis tre produkter og fylder derfor en række helt ud.
   Forsiden beholder to kolonner, fordi dens kort er den vandrette
   udgave uden .tam-grid--top. */
.tam-grid--3 .eael-post-grid{ display:flex; flex-wrap:wrap; gap:0 16px; }
.tam-grid--3 .eael-post-grid-column{
  width:calc((100% - 32px) / 3) !important; float:none !important;
  display:flex;
}

/* Samme højdekæde som på de to-spaltede, så kort i samme række flugter,
   uanset hvor lang beskrivelsen er. */
.tam-grid--3 .eael-grid-post{ display:flex; width:100%; }
.tam-grid--3 .eael-grid-post-holder{ display:flex; flex:1 1 auto; width:100%; height:auto; }
.tam-grid--3 .eael-grid-post-holder-inner{ flex:1 1 auto; }

/* Billedrammen saettes bevidst IKKE her. Hoejden styres af aspect-ratio
   paa .eael-entry-thumbnail laengere oppe i filen, saa intet foto beskaeres.
   En fast pixelhoejde her ville blive klippet af overflow:hidden, og det
   ramte netop de staaende paahaengsmotorer, som fylder hele rammen. */

.tam-grid--3 .eael-entry-wrapper{ padding:18px 20px 20px; }
.tam-grid--3 .eael-entry-title{ font-size:17px; }
.tam-grid--3 .tam-kort__besk{ font-size:14px; margin-bottom:10px; }
.tam-grid--3 .tam-kort__pris{ font-size:21px; }
.tam-grid--3 .tam-kort__pris--aftale{ font-size:13.5px; }
.tam-grid--3 .tam-kort__fod{ padding-top:12px; }

@media (max-width:1024px){
  .tam-grid--3 .eael-post-grid-column{ width:calc((100% - 16px) / 2) !important; }
}
@media (max-width:700px){
  .tam-grid--3 .eael-post-grid-column{ width:100% !important; }
}

/* ================= Produktkortets struktur =================
   Kortets tekst kommer fra et filter paa get_the_excerpt og ligger derfor
   inde i uddragsfeltet, mens titel og foto tegnes af Essential Addons
   udenfor. Maerket skal staa OVER titlen, altsaa foer noget der ligger
   efter den i HTML.

   Loesningen er display:contents ned gennem uddragskaeden: uddraget, dets
   afsnit og .tam-kort forsvinder som bokse, saa deres born bliver direkte
   flexbrn af .eael-entry-wrapper sammen med titlen. Derefter kan
   raekkefoelgen styres med order, og foden kan skubbes til bunden med
   margin-top:auto, saa kort i samme raekke flugter.

   Foerste forsoeg brugte absolut placering i stedet. Det fejlede, fordi
   baade maerkatet og maerket saa laa i samme referenceramme og dermed
   oven i hinanden. */

.tam-grid .eael-entry-wrapper{
  display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
}
/* Essential Addons pakker titlen i .eael-entry-header og uddraget i
   .eael-entry-content. Begge skal ogsaa oploeses, ellers ligger titel
   og maerke i hver sin underboks, og order kan ikke stille dem op
   mod hinanden. */
.tam-grid .eael-entry-header,
.tam-grid .eael-entry-content,
.tam-grid .eael-grid-post-excerpt,
.tam-grid .eael-grid-post-excerpt > p,
.tam-grid .tam-kort{ display:contents; }

.tam-grid .eael-entry-title{ order:2; }
.tam-kort__maerke{ order:1; }
.tam-kort__besk{ order:3; }
.tam-kort__spec{ order:4; }
.tam-kort__data{ order:3; }
.tam-kort__fod{ order:5; }

/* 1) Lagermaerkat oven paa fotoet. Kun holderen er referenceramme, saa
      maerkatet lander paa billedet og ikke i teksten. */
.tam-grid .eael-grid-post-holder-inner{ position:relative; }
.tam-maerkat{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  background:var(--tam-bg); border:1px solid var(--tam-line);
  box-shadow:0 1px 2px rgba(26,30,24,.08);
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--tam-ink);
  line-height:1;
}
/* Prikken baerer tilstanden sammen med teksten, ikke i stedet for. */
.tam-maerkat__prik{ width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--tam-accent); }
.tam-maerkat--tom{ color:var(--tam-muted); }
.tam-maerkat--tom .tam-maerkat__prik{ background:var(--tam-muted); }

/* 2) Maerket staar over modelnavnet. */
.tam-kort__maerke{
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--tam-muted);
  margin:0 0 7px;
}
.tam-kort__besk{ margin-top:9px; }

/* 3) Foden er et selvstaendigt baand i bunden af kortet. Negativ margin
      traekker den ud gennem tekstfeltets polstring, saa stregen gaar fra
      kant til kant ligesom stregen under fotoet. margin-top:auto skal
      staa for sig selv - en samlet margin ville slaa den ihjel, og saa
      holder kortene i samme raekke ikke laengere samme hoejde. */
.tam-kort:not(.tam-kort--bil) .tam-kort__fod{
  border-top:1px solid var(--tam-line);
  align-items:flex-end; gap:16px;
  margin-top:auto; margin-left:-20px; margin-right:-20px; margin-bottom:-20px;
  padding:16px 20px 18px;
}
.tam-grid--2 .tam-kort:not(.tam-kort--bil) .tam-kort__fod{
  margin-left:-22px; margin-right:-22px; margin-bottom:-20px;
  padding:14px 22px 16px;
}
/* min-width:0 tillod flexbox at klemme prisblokken smallere end selve
   prisen, saa tallet flød ud under knappen. Under 880px har knappen
   width:100%, og saa blev der ingenting tilbage til prisen. Den skal
   beholde sin naturlige bredde. */
.tam-kort__prisblok{ display:flex; flex-direction:column; gap:3px; min-width:auto; flex:0 1 auto; }
.tam-kort__prislabel{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--tam-muted);
}
.tam-kort:not(.tam-kort--bil) .tam-kort__pris{ text-align:left; }
.tam-kort:not(.tam-kort--bil) .tam-kort__pris--aftale{ max-width:none; }

/* ================= Luft omkring teksterne =================
   Kortets dele er nu direkte flexboern af tekstfeltet, saa afstanden
   mellem dem styres ét sted med gap i stedet for en margin pr.
   element. De gamle marginer nulstilles, saa de to systemer ikke
   laegges oven i hinanden.
   Kortene bliver hoejere af det. Det er med vilje. */
.tam-grid .eael-entry-wrapper{ gap:10px; }
.tam-grid .tam-kort__maerke,
.tam-grid .tam-kort__besk,
.tam-grid .tam-kort__spec{ margin:0; }

/* Maerket hoerer taettere sammen med titlen end resten, saa det
   trekkes en anelse ind mod den. */
.tam-grid .tam-kort__maerke{ margin-bottom:-3px; }

/* Mere polstring i tekstfeltet. Fodens negative marginer skal folge
   med, ellers gaar stregen ikke laengere helt ud til kanten. */
.tam-grid--2:not(.tam-grid--top) .eael-entry-wrapper{ padding:22px 26px; }
.tam-grid--2:not(.tam-grid--top) .tam-kort:not(.tam-kort--bil) .tam-kort__fod{
  margin-left:-26px; margin-right:-26px; margin-bottom:-22px;
  padding:16px 26px 18px;
}
.tam-grid--3 .eael-entry-wrapper{ padding:20px 22px 22px; }
.tam-grid--3 .tam-kort:not(.tam-kort--bil) .tam-kort__fod{
  margin-left:-22px; margin-right:-22px; margin-bottom:-22px;
  padding:16px 22px 18px;
}

/* Billedsoejlen paa forsidens vandrette kort udvides, saa fotoet ikke
   drukner i tom plads nu hvor kortet er blevet hoejere.

   VIGTIGT: bilgitteret baerer BAADE .tam-grid--2 og .tam-grid--top.
   Paa det vandrette kort er flex-basis en bredde, men paa bilkortet,
   der er lodret, er den en hoejde - og saa bliver bilfotoet klippet.
   Enhver --2-regel om billedrammen skal derfor undtage --top. */
/* Kun over 880px. Derunder stabler kortet sig lodret, og billedet skal
   have hele bredden. Uden denne graense vandt reglen over mobilreglen,
   fordi den staar senere i filen - og saa laa fotoet i en 200px soejle
   i venstre side af et kort, der var stablet. */
@media (min-width:881px){
  .tam-grid--2:not(.tam-grid--top) .eael-entry-media,
  .tam-grid--2:not(.tam-grid--top) .eael-grid-post-holder-inner:not(:has(.eael-entry-media))::before{
    flex:0 0 200px !important; width:200px;
  }
}

/* ================= Sidens bundfarve =================
   Blocksy satte body til #FAFBFC, en blaalig hvid, som ingen har
   valgt. Den stod direkte op ad den varme graa flade, og kontrasten
   mellem de to fik den graa til at virke orange. Alle oevrige
   neutraler i paletten har groen som hoejeste kanal; en fjerde
   neutral, der haelder den anden vej, hoerer ikke hjemme her. */
body{ background-color:var(--tam-bg); }

/* ================= Foden paa smal skaerm =================
   Pris og knap kan ikke staa side om side, naar knappen fylder hele
   bredden. De faar derfor hver sin linje: prisen oeverst, knappen
   under i fuld bredde, hvor den er nem at ramme med en tommel. */
@media (max-width:880px){
  .tam-kort:not(.tam-kort--bil) .tam-kort__fod{ flex-wrap:wrap; gap:14px; }
  .tam-kort:not(.tam-kort--bil) .tam-kort__prisblok{ flex:1 1 100%; }
  .tam-kort:not(.tam-kort--bil) .tam-kort__knap{ width:100%; text-align:center; }
}