/* ═══════════════════════════════════════════════════════════════════════════
   VIBORG MODELFLYVEKLUB – style.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── VARIABLER & RESET ────────────────────────────────────────────────────── */

:root {
  --p:   #2563eb;
  --p2:  #1d4ed8;
  --ps:  #dbeafe;
  --tx:  #0f172a;
  --mu:  #64748b;
  --li:  rgba(15,23,42,.08);
  --bor: rgba(15,23,42,.08);
  --bg2: #f8fafc;
  --promo-card-h: 360px;
  --sh:  0 32px 90px rgba(15,23,42,.16);
  --ss:  0 18px 42px rgba(15,23,42,.11);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tx);
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(37,99,235,.18),  transparent 42%),
    radial-gradient(ellipse at 100% 0%,  rgba(59,130,246,.20), transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(99,102,241,.10), transparent 50%),
    linear-gradient(180deg, #f0f6ff, #f4f7fc 60%, #eef3fb);
  min-height: 100vh;
  overflow-x: hidden;
}

a                       { text-decoration: underline; color: inherit }
a:visited,a:hover,a:active { color: inherit }
img                     { max-width: 100%; display: block }
h1,h2,h3,h4             { margin: 0; letter-spacing: -.04em }

@keyframes fi { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }

/* ── LAYOUT – SHELL & CONTAINER ──────────────────────────────────────────── */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.c {
  width: min(85%, 1440px);
  margin: 0 auto;
}

main { flex: 1 }

.pg     { display: none; padding: 32px 0 70px }
.pg.on  { display: block; animation: fi .3s ease }

.sec { padding: 24px 0 }

.shead   { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; flex-wrap: wrap }
.shead > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.shead > div:first-child .eyebrow { padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; }
.shead h2 { font-size: 2.2rem; margin-top: 10px }
.shead p  { max-width: 660px; color: var(--mu); line-height: 1.7; margin: 0 }

/* ── HEADER & NAVIGATION ─────────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}

.bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
}

.brand-logo {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  display: grid;
  place-items: center;
  box-shadow: var(--ss);
  overflow: hidden;
  flex-shrink: 0;
}
.brand-logo img { width: 80%; height: 80%; object-fit: contain; border-radius: 10% }

#bname      { font-weight: 800; font-size: 1.1rem; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
#bname span { font-weight: 300; color: var(--p) }

.nav  { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center }
.nbtn { border: 0; background: transparent; color: #475569; cursor: pointer; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; font-family: inherit; transition: .18s; white-space: nowrap; text-decoration: none }
.nbtn:hover,.nbtn.on { background: var(--ps); color: var(--p) }
.nbtn-logout { background: rgba(147,51,234,.16); color: #6d28d9 }
.nbtn-logout:hover { background: rgba(147,51,234,.24); color: #581c87 }

.mob-logout-btn { background: rgba(147,51,234,.16); color: #6d28d9; border-radius: 999px; margin: 10px 14px 0; width: calc(100% - 28px) }
.mob-nav li .mob-logout-btn:hover { background: rgba(147,51,234,.24); color: #581c87 }

.cta-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end }
.ctabtn      { border: 0; flex-shrink: 0; background: linear-gradient(135deg,var(--tx),#1e293b); color: #fff; padding: 11px 20px; border-radius: 999px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: .9rem; text-decoration: none }
.ctabtn-blue { background: linear-gradient(135deg,var(--p),var(--p2)); box-shadow: 0 16px 40px rgba(37,99,235,.22) }

/* ── BURGER & MOBIL DRAWER ────────────────────────────────────────────────── */

.burger { display: none; flex-direction: column; justify-content: space-between; width: 36px; height: 26px; background: none; border: 0; cursor: pointer; padding: 0; flex-shrink: 0 }
.burger span { display: block; height: 3px; border-radius: 2px; background: var(--tx); transition: transform .22s, opacity .18s }
.burger.open span:nth-child(1) { transform: translateY(11.5px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity: 0 }
.burger.open span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg) }

.mob-overlay    { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 299; backdrop-filter: blur(4px) }
.mob-overlay.on { display: block }

.mob-drawer      { position: fixed; top: 0; right: 0; bottom: 0; width: min(80vw,320px); background: #fff; z-index: 300; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(15,23,42,.18); overflow-y: auto }
.mob-drawer.open { transform: translateX(0) }

.mob-head  { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--li) }
.mob-brand { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; color: var(--tx) }
.mob-close { border: 0; background: #f1f5f9; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 1rem; color: var(--tx); flex-shrink: 0 }

.mob-nav { list-style: none; margin: 0; padding: 12px 0; flex: 1 }
.mob-nav li a,
.mob-nav li button         { display: block; width: 100%; text-align: left; padding: 13px 20px; font: 600 1rem/1 'Inter',sans-serif; color: #475569; background: none; border: 0; cursor: pointer; transition: background .14s, color .14s; text-decoration: none }
.mob-nav li a.on,
.mob-nav li button.on,
.mob-nav li a:hover,
.mob-nav li button:hover   { background: #eff6ff; color: var(--p) }

.mob-cta { padding: 16px 20px; border-top: 1px solid var(--li) }

/* ── HERO-SEKTION ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(239,246,255,.97), rgba(255,255,255,.98));
  box-shadow: 0 36px 100px rgba(15,23,42,.18), 0 6px 20px rgba(15,23,42,.08);
  border: 1px solid rgba(255,255,255,.85);
}
.hero::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 999px;
  filter: blur(30px); opacity: .6; right: -50px; top: -60px;
  background: rgba(59,130,246,.18); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; width: 250px; height: 250px; border-radius: 999px;
  filter: blur(30px); opacity: .6; left: -70px; bottom: -80px;
  background: rgba(16,185,129,.12); pointer-events: none;
}

.hgrid   { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; position: relative; z-index: 1 }
.eyebrow { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: #eff6ff; color: var(--p); font-weight: 700; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px }
.hero h1 { font-size: clamp(2.2rem,4.5vw,4.4rem); line-height: .98; margin: 0 0 14px }
.hero-p  { font-size: 1.03rem; line-height: 1.8; color: #475569; margin: 0 }

.hacts      { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px }

.hcard     { position: relative; border-radius: 32px; overflow: hidden; box-shadow: var(--sh); min-height: 500px; background: #0f172a }
.hcard img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0 }
.hov       { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(15,23,42,.06),rgba(15,23,42,.6)) }

.hbadge { position: absolute; right: -18px; bottom: 26px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: 20px; padding: 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--sh); max-width: 270px }
.hbico  { width: 48px; height: 48px; border-radius: 14px; background: #dcfce7; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0 }

.stats      { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px }
.stat       { background: rgba(255,255,255,.84); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9); padding: 15px; border-radius: 22px; box-shadow: var(--ss) }
.stat strong { display: block; margin-bottom: 4px; font-size: .97rem }
.stat span   { color: var(--mu); font-size: .87rem; line-height: 1.55 }

/* ── KNAPPER ──────────────────────────────────────────────────────────────── */

.btn      { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 700; cursor: pointer; transition: .2s; font-family: inherit; font-size: .93rem; text-decoration: none }
.btn-p    { background: linear-gradient(135deg,var(--p),var(--p2)); color: #fff; box-shadow: 0 16px 40px rgba(37,99,235,.22) }
.btn-s    { background: #fff; color: var(--tx); border: 1px solid var(--li); box-shadow: var(--ss) }
.btn:hover { transform: translateY(-1px) }

.tbtn        { border: 1px solid var(--li); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; font-size: .84rem; font-family: inherit; transition: .15s }
.tbtn:hover  { background: var(--ps); border-color: var(--p); color: var(--p) }
.tbtn.on     { background: var(--p); color: #fff; border-color: var(--p) }

.gfbtn          { border: 1.5px solid var(--li); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .86rem; cursor: pointer; font-family: inherit; transition: .16s; color: #475569 }
.gfbtn.on,
.gfbtn:hover    { background: var(--p); color: #fff; border-color: var(--p) }

.otab           { border: 1.5px solid var(--li); background: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .86rem; cursor: pointer; font-family: inherit; transition: .16s; color: #475569 }
.otab.on,
.otab:hover     { background: var(--p); color: #fff; border-color: var(--p) }

.otabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; justify-content: center }
.osec     { display: none }
.osec.on  { display: block; animation: fi .3s ease }

/* ── PANEL & GRIDS ────────────────────────────────────────────────────────── */

.panel { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.78); border-radius: 32px; padding: 26px; box-shadow: 0 22px 60px rgba(15,23,42,.13), 0 4px 14px rgba(15,23,42,.06) }

.g2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 22px }
.g3 { display: grid; grid-template-columns: repeat(3,1fr);   gap: 20px }
.g4 { display: grid; grid-template-columns: repeat(4,1fr);   gap: 20px }
.rg { display: grid; grid-template-columns: 1fr 1fr;         gap: 14px; margin-top: 14px }

/* ── KORT ─────────────────────────────────────────────────────────────────── */

.card        { background: #fff; border: 1px solid var(--li); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 52px rgba(15,23,42,.13), 0 4px 12px rgba(15,23,42,.06); transition: transform .22s, box-shadow .22s }
.card:hover  { transform: translateY(-5px); box-shadow: 0 32px 72px rgba(15,23,42,.18), 0 6px 18px rgba(15,23,42,.08) }

.cthumb          { height: 210px; overflow: hidden }
.cthumb img      { width: 100%; height: 100%; object-fit: cover; transition: transform .6s }
.card:hover .cthumb img { transform: scale(1.06) }

.cbody    { padding: 20px }
.cbody h3 { font-size: 1.05rem; margin-bottom: 5px }
.cbody p  { color: var(--mu); line-height: 1.72; margin: 0; font-size: .9rem }

.ibox  { width: 52px; height: 52px; border-radius: 16px; background: #eff6ff; color: var(--p); display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 12px }

.clist { display: grid; gap: 12px }
.citem { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--li); border-radius: 22px; padding: 14px 16px }
.dot   { width: 44px; height: 44px; border-radius: 12px; background: #eff6ff; color: var(--p); display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto }

/* ── GALLERI ──────────────────────────────────────────────────────────────── */

.gfolders { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px }

.ggrid     { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px }
.gitem     { border-radius: 18px; overflow: hidden; box-shadow: var(--ss); cursor: pointer; aspect-ratio: 4/3; background: #e2e8f0; position: relative }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.gitem:hover img { transform: scale(1.06) }
.gcap      { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 12px 10px; background: linear-gradient(transparent,rgba(15,23,42,.68)); color: #fff; font-size: .84rem; font-weight: 600; opacity: 0; transition: .22s }
.gitem:hover .gcap { opacity: 1 }
.gph       { border-radius: 30px; border: 2px dashed #cbd5e1; padding: 54px 20px; text-align: center; color: var(--mu) }

.galbgrid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 16px }
.galb      { border-radius: 18px; overflow: hidden; box-shadow: 0 16px 44px rgba(15,23,42,.13), 0 3px 10px rgba(15,23,42,.06); cursor: pointer; background: #fff; transition: transform .22s, box-shadow .22s; text-decoration: none }
.galb:hover { transform: translateY(-7px); box-shadow: 0 30px 70px rgba(15,23,42,.20), 0 6px 18px rgba(15,23,42,.08) }
.galb-thumb     { aspect-ratio: 4/3; background: #e2e8f0; overflow: hidden }
.galb-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.galb:hover .galb-thumb img { transform: scale(1.07) }
.galb-info        { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px }
.galb-info strong { font-size: .9rem; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.galb-info span   { font-size: .78rem; color: var(--mu) }

/* Feature-kort – ét pr. mappe */
.galfeatgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 20px }
.galfeat     { position: relative; border-radius: 24px; overflow: hidden; cursor: pointer; box-shadow: 0 24px 64px rgba(15,23,42,.18), 0 4px 14px rgba(15,23,42,.08); aspect-ratio: 16/9; background: #e2e8f0; transition: transform .22s, box-shadow .22s; text-decoration: none }
.galfeat:hover { transform: translateY(-6px); box-shadow: 0 36px 90px rgba(15,23,42,.24), 0 8px 22px rgba(15,23,42,.10) }
.galfeat-img     { position: absolute; inset: 0 }
.galfeat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.galfeat:hover .galfeat-img img { transform: scale(1.06) }
.galfeat-over    { position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,15,30,.82) 0%,rgba(10,15,30,.18) 55%,transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; padding: 22px 24px; transition: background .3s }
.galfeat:hover .galfeat-over { background: linear-gradient(to top,rgba(10,15,30,.92) 0%,rgba(10,15,30,.3) 55%,transparent 100%) }
.galfeat-info        { display: flex; flex-direction: column; gap: 3px }
.galfeat-info strong { color: #fff; font-size: 1.15rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.4) }
.galfeat-info span   { color: rgba(255,255,255,.7); font-size: .82rem }
.galfeat-arr         { color: #fff; font-size: 1.6rem; opacity: .7; transition: transform .25s, opacity .25s }
.galfeat:hover .galfeat-arr { transform: translateX(5px); opacity: 1 }

/* ── LIGHTBOX ─────────────────────────────────────────────────────────────── */

.lb     { position: fixed; inset: 0; background: rgba(15,23,42,.92); z-index: 500; display: none; align-items: center; justify-content: center; backdrop-filter: blur(16px) }
.lb.on  { display: flex }
.lb img { width: auto; height: auto; max-width: 95vw; max-height: 95vh; border-radius: 16px; box-shadow: 0 40px 100px rgba(0,0,0,.55) }
.lbc    { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 1.9rem; cursor: pointer; background: none; border: 0; line-height: 1 }
.lbp,
.lbn    { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); color: #fff; border: 0; width: 58px; height: 58px; border-radius: 50%; font-size: 1.45rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .16s }
.lbp { left: 14px } .lbn { right: 14px }
.lbp:hover,
.lbn:hover { background: rgba(255,255,255,.26) }
.lbcap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: .88rem; background: rgba(15,23,42,.5); padding: 6px 14px; border-radius: 999px; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ── NYHEDSTICKER ─────────────────────────────────────────────────────────── */

#newsTickerWrap { margin-bottom: 20px }

.nt-bar     { display: flex; align-items: stretch; background: linear-gradient(90deg,#0f172a 0%,#1e3a5f 100%); border-radius: 18px; overflow: hidden; height: 52px; min-height: 52px; max-height: 52px; box-shadow: 0 4px 22px rgba(15,23,42,.22), 0 1px 0 rgba(255,255,255,.06) inset }
.nt-label   { flex-shrink: 0; background: var(--p); color: #fff; font-weight: 800; font-size: 1.14rem; letter-spacing: .08em; padding: 0 22px; display: flex; align-items: center; white-space: nowrap; text-transform: uppercase; border-right: 2px solid rgba(255,255,255,.15); text-shadow: 0 1px 2px rgba(0,0,0,.2) }
.nt-track   { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; position: relative; height: 100% }
.nt-content { white-space: nowrap; color: #f1f5f9; font-size: 1.05rem; line-height: 1; will-change: transform; display: inline-block; padding: 0 }
.nt-content a             { color: #93c5fd !important; text-decoration: underline }
.nt-content strong,
.nt-content b             { font-weight: 700 }
.nt-content em,
.nt-content i             { font-style: italic }
/* <font size="N"> elementer fra execCommand('fontSize') bruger absolutte HTML-størrelser
   der er immune over for CSS-arv. Denne regel tvinger dem til at arve containerens
   font-size, så JS-styret størrelse (font-size på .nt-content) slår igennem. */
.nt-content font          { font-size: inherit !important; }

/* ── PROMO-RAMME (samme visuelle frame som hero) ──────────────────────────── */

.promo-frame {
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(239,246,255,.97), rgba(255,255,255,.98));
  box-shadow: 0 36px 100px rgba(15,23,42,.18), 0 6px 20px rgba(15,23,42,.08);
  border: 1px solid rgba(255,255,255,.85);
}
.promo-frame::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 999px;
  filter: blur(30px); opacity: .6; right: -50px; top: -60px;
  background: rgba(59,130,246,.18); pointer-events: none;
}
.promo-frame::after {
  content: ""; position: absolute; width: 250px; height: 250px; border-radius: 999px;
  filter: blur(30px); opacity: .6; left: -70px; bottom: -80px;
  background: rgba(16,185,129,.12); pointer-events: none;
}
.promo-frame .g2promo { position: relative; z-index: 1; }

/* Fjern kortets hover-løft i promo-sektionen – kun indhold animerer */
.g2promo .card:hover { transform: none; box-shadow: 0 20px 52px rgba(15,23,42,.13), 0 4px 12px rgba(15,23,42,.06); }

/* ── PROMO-SEKTION (forside) ──────────────────────────────────────────────── */

.g2promo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0px 0; align-items: stretch }

.promo-wrap       { display: flex; flex-direction: column; height: 100% }
.promo-card-title { display: block; padding: 0; background: transparent; color: var(--p); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px; text-align: center }
.promo-card-fixed { height: var(--promo-card-h) }

.promo-img-card,
.promo-event-card,
.promo-links-card,
.promo-map-card,
.promo-mdk-card,
.promo-dealers-card      { height: var(--promo-card-h); min-height: var(--promo-card-h); overflow: hidden; max-width: 100%; box-sizing: border-box }
.promo-img-card .cthumb,
.promo-slide-wrap        { height: 100%; min-height: 0; position: relative; overflow: hidden }
.promo-map-card          { border-radius: 26px; overflow: hidden }

.promo-fit       { position: relative; height: 100%; overflow: hidden }
.promo-fit-inner { width: 100%; transform-origin: top left; will-change: transform }

/* ── FORHANDLERE ──────────────────────────────────────────────────────────── */

.dealer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 20px 24px }

.dealer-item       { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--bor); transition: all .2s; min-height: 62px }
.dealer-item:hover { border-color: rgba(37,99,235,.3); box-shadow: 0 6px 20px rgba(37,99,235,.1); transform: translateY(-1px) }

.dealer-left { display: flex; gap: 9px; align-items: center; min-width: 0; flex: 1 }
.dealer-logo { width: 38px; height: 38px; min-width: 38px; max-width: 38px; border-radius: 999px; border: 1px solid var(--bor); background: #fff; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.07) }
.dealer-logo img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block }
.dealer-txt  { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.dealer-name { font-weight: 700; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx) }
.dealer-host { font-size: .74rem; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dealer-go   { flex-shrink: 0; font-weight: 700; font-size: .75rem; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(15,23,42,.2); background: transparent; color: var(--tx); text-decoration: none; white-space: nowrap; transition: all .18s }
.dealer-go:hover { background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.35) }

/* ── NYTTIGE LINKS ────────────────────────────────────────────────────────── */

.link-btn-grid { display: flex; flex-direction: column; gap: 6px }

.link-btn        { display: flex; align-items: center; gap: 12px; color: var(--tx); text-decoration: none; font-weight: 600; font-size: .88rem; padding: 11px 14px; border-radius: 12px; transition: all .2s; background: var(--bg2); border: 1px solid var(--bor); position: relative; overflow: hidden }
.link-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(37,99,235,.06),transparent); opacity: 0; transition: opacity .2s }
.link-btn:hover   { border-color: rgba(37,99,235,.35); transform: translateX(3px); box-shadow: 0 4px 16px rgba(37,99,235,.12) }
.link-btn:hover::before { opacity: 1 }

.link-btn-icon     { width: 32px; height: 32px; min-width: 32px; max-width: 32px; border-radius: 8px; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(37,99,235,.12) }
.link-btn-icon img { width: 20px; height: 20px; object-fit: contain; display: block }
.link-btn-label    { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.link-btn-arr      { font-size: .8rem; color: var(--p); opacity: .6; transition: all .2s; flex-shrink: 0 }
.link-btn:hover .link-btn-arr { opacity: 1; transform: translate(2px,-2px) }

/* ── MDK KALENDER ─────────────────────────────────────────────────────────── */

.mdk-list { list-style: none; margin: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px }

.mdk-item a       { display: flex; gap: 12px; text-decoration: none; color: var(--tx); border: 1px solid var(--bor); border-radius: 14px; padding: 11px 14px; background: var(--bg2); transition: all .2s; align-items: center }
.mdk-item a:hover { border-color: rgba(37,99,235,.3); box-shadow: 0 6px 20px rgba(37,99,235,.1); transform: translateX(3px) }

.mdk-thumb      { width: 52px; height: 52px; min-width: 52px; max-width: 52px; border-radius: 10px; border: 1px solid var(--bor); background: #fff; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.07) }
.mdk-thumb img  { width: 100%; height: 100%; object-fit: cover; display: block }
.mdk-thumb .mdk-fav { width: 28px; height: 28px; object-fit: contain; display: block }

.mdk-txt   { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px }
.mdk-title { font-size: .87rem; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--tx) }
.mdk-meta  { font-size: .76rem; color: var(--mu); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mdk-arr   { font-size: .8rem; color: var(--p); opacity: .5; flex-shrink: 0; transition: opacity .2s }
.mdk-item a:hover .mdk-arr { opacity: 1 }

/* ── OM KLUBBEN – PROSE, REGLER & TABELLER ────────────────────────────────── */

.prose        { line-height: 1.85; color: #334155; font-size: .95rem }
.prose h3     { font-size: 1.2rem; margin: 24px 0 8px; color: var(--tx) }
.prose h3:first-child { margin-top: 0 }
.prose p      { margin: 0 0 11px }
.prose ul     { padding-left: 20px; margin: 0 0 12px }
.prose li     { margin-bottom: 6px }
.prose a      { color: var(--p) }

.ruleg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.rulec { background: #fff; border: 1px solid var(--li); border-radius: 26px; padding: 20px; box-shadow: var(--ss) }
.rulec p { color: var(--mu); line-height: 1.72; margin: 6px 0 0; font-size: .9rem }

.ic  { background: #fff; border: 1px solid var(--li); border-radius: 26px; overflow: hidden; box-shadow: var(--ss) }
.icb { padding: 20px }
.icb p { color: var(--mu); line-height: 1.72; margin: 6px 0 0; font-size: .9rem }

.rc    { background: #fff; border: 1px solid var(--li); border-radius: 18px; padding: 14px }
.rc h4 { font-size: .97rem; margin: 0 0 5px }
.rc p  { color: var(--mu); font-size: .88rem; line-height: 1.6; margin: 0 }

.tt               { width: 100%; border-collapse: collapse; margin-top: 12px }
.tt th,.tt td     { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--li); font-size: .9rem }
.tt th            { font-weight: 700; background: #f8fafc }
.tt tr:last-child td { border: 0 }

.calmodes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px }

.map        { overflow: hidden; border-radius: 26px; margin-top: 20px; box-shadow: var(--ss); border: 1px solid var(--li); background: #fff }
.map iframe { width: 100%; height: 280px; border: 0; display: block }

/* ── FORMULARER & MODAL ───────────────────────────────────────────────────── */

.fgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.field  { display: grid; gap: 6px; margin-bottom: 12px }
.full   { grid-column: 1 / -1 }

label                         { font-size: .87rem; font-weight: 700; color: #334155 }
input,select,textarea         { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1.5px solid #e2e8f0; background: #f8fafc; font: inherit; color: var(--tx); transition: .14s }
input:focus,select:focus,
textarea:focus                { outline: none; border-color: var(--p); background: #fff }
textarea                      { min-height: 110px; resize: vertical }

.ok     { display: none; margin-top: 10px; padding: 11px 15px; border-radius: 13px; background: #dcfce7; color: #166534; font-weight: 700 }
.ok.on  { display: block }

.modal    { position: fixed; inset: 0; background: rgba(15,23,42,.46); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 400; backdrop-filter: blur(8px) }
.modal.on { display: flex }
.mcard    { width: min(100%,600px); background: #fff; border-radius: 30px; padding: 26px; box-shadow: var(--sh) }
.mhead    { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px }
.xbtn     { border: 0; background: #f1f5f9; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: .95rem }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */

.footer    { background: #0f172a; color: #cbd5e1; padding: 52px 0; margin-top: 26px }
.fgr       { display: grid; grid-template-columns: 1.2fr .9fr .9fr .9fr; gap: 22px }
.footer h4 { color: #fff; font-size: .97rem; margin: 0 0 12px }
.footer p,
.footer li { color: #94a3b8; line-height: 1.75; margin: 0; font-size: .9rem }
.footer ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 7px }
.footer a  { color: #94a3b8; transition: .14s; text-decoration: underline }
.footer a:hover { color: #fff }

/* ── ADMIN-LINK ───────────────────────────────────────────────────────────── */

#adml        { position: fixed; bottom: 16px; right: 16px; z-index: 999; background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: .83rem; box-shadow: 0 8px 28px rgba(124,58,237,.44); display: flex; align-items: center; gap: 7px; text-decoration: none; transition: .18s }
#adml:hover  { transform: translateY(-2px) }

/* ── LINK-REGLER: knap-lignende elementer uden understregning ─────────────── */

.card,.citem,.gitem,.galb,.galfeat,.mdk-item a,.link-btn,.dealer-go,.dealer-item a,
.nbtn,.btn,.ctabtn,.mob-cta a,.mob-nav a,.hbadge,.tbtn,.gfbtn,.otab,
#adml,.promo-card-title,a.btn { text-decoration: none !important }

/* Inline prosa-links beholder understregning */
.prose a { text-decoration: underline }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL – ≤ 700 px
   ═══════════════════════════════════════════════════════════════════════════ */


@media (max-width: 700px) {

  /* ── Container: 95% bredde ─────────────────────────────────────────────── */
  .c { width: 95% }

  /* ── Sektioner & sider ─────────────────────────────────────────────────── */
  .pg  { padding: 16px 0 52px }
  .sec { padding: 16px 0 }

  /* ── HEADER ────────────────────────────────────────────────────────────── */
  .bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  .bar-in {
    height: 62px;
    gap: 8px;
  }
  /* Skub indhold ned så det ikke gemmes bag den faste header */
  body { padding-top: 62px; }

  /* Skjul desktop-navigation og vis burger */
  .nav          { display: none !important }
  .burger       { display: flex !important }
  #indmeldbtn   { display: none !important }   /* Indmeldelse findes i drawer */

  /* Logo & klubnavn */
  .brand-logo   { width: 40px; height: 40px }
  #bname        { font-size: .92rem }

  /* ── HERO ──────────────────────────────────────────────────────────────── */
  .hero {
    padding: 8px;
    border-radius: 22px;
  }

  /* Sæt hero til én kolonne – tekst øverst, billede nedenunder */
  .hgrid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
  }

  .hero-p { font-size: .95rem }

  .hacts { gap: 8px; margin-top: 18px }
  .hacts .btn { font-size: .85rem; padding: 11px 16px }

  /* Billedkortet i hero */
  .hcard {
    min-height: 240px;
    border-radius: 20px;
  }

  /* Promo-ramme: reduceret padding og border-radius på mobil */
  .promo-frame {
    border-radius: 22px;
    padding: 8px;
  }

  /* Skjul hero-badge på mobil */
  .hbadge { display: none !important; }


  /* Stats-boks */
  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 14px;
  }
  .stat         { padding: 10px 8px; border-radius: 16px }
  .stat strong  { font-size: .82rem; margin-bottom: 2px }
  .stat span    { font-size: .74rem }

  /* ── SEKTIONSOVERSKRIFT ────────────────────────────────────────────────── */
  .shead          { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px }
  .shead h2       { font-size: 1.55rem; margin-top: 4px }
  .shead p        { font-size: .9rem }

  /* ── PROMO-GRID: 2 → 1 kolonne ─────────────────────────────────────────── */
  .g2promo {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 6px 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* CSS Grid-items har som standard min-width:auto og kan sprænge ud af gridden */
  .promo-wrap {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    height: auto;          /* Ophæv desktop height:100% – ellers kollapser kortet i én-kolonne grid */
  }

  /* JS-funktionen fitPromoCards() sætter inline width + transform på .promo-fit-inner.
     På mobil er indholdet allerede 1-kolonne og skalering er unødvendig – den brede
     inline-width får siden til at udvide sig udover 95%. Vi nulstiller med !important
     for at vinde over JS inline-styles. */
  .promo-fit {
    max-width: 100%;
    overflow: hidden;
  }
  .promo-fit-inner {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: hidden;
  }

  /* På mobil: billedslideshow-kortet SKAL have fast højde, da billederne er
     position:absolute (de kollapser til 0 ved height:auto). De øvrige kort
     tilpasser sig indholdet. */
  .promo-img-card {
    height: 260px !important;
    min-height: 260px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .promo-event-card,
  .promo-links-card,
  .promo-mdk-card,
  .promo-dealers-card {
    height: auto !important;
    min-height: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* "Find os" Google Maps-kort: ekstra høj så kortet er brugbart */
  .promo-map-card {
    height: 240px !important;
    min-height: 240px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
  }

  /* ── FORHANDLERE & NYTTIGE LINKS: 2 → 1 kolonne ───────────────────────── */
  .dealer-grid {
    grid-template-columns: 1fr;
    padding: 14px 16px;
    gap: 8px;
  }

  #promoEventBody {
    padding: 14px 16px !important;
    gap: 8px !important;
  }

  /* Dealer-items lidt luftigere i enkelt-kolonne */
  .dealer-item  { min-height: 56px; padding: 10px 12px }
  .dealer-name  { font-size: .86rem }

  /* ── GENERELLE GRIDS ───────────────────────────────────────────────────── */
  .g2, .g3, .g4  { grid-template-columns: 1fr; gap: 14px }
  .rg             { grid-template-columns: 1fr; gap: 10px }
  .ruleg          { grid-template-columns: 1fr; gap: 14px }

  /* ── PANEL & KORT ──────────────────────────────────────────────────────── */
  .panel  { padding: 16px 16px; border-radius: 22px }
  .card   { border-radius: 18px }

  /* ── KALENDER-KNAPPER ──────────────────────────────────────────────────── */
  .calmodes { gap: 5px }
  .tbtn     { font-size: .78rem; padding: 7px 11px }

  /* ── OM KLUBBEN – TABS ─────────────────────────────────────────────────── */
  .otabs { gap: 5px; justify-content: flex-start }
  .otab  { font-size: .8rem; padding: 7px 13px }

  /* ── KOM I GANG ────────────────────────────────────────────────────────── */
  .icb { padding: 16px }

  /* ── FORMULARER ────────────────────────────────────────────────────────── */
  .fgrid2       { grid-template-columns: 1fr }
  .field.full   { grid-column: 1 }
  .mcard        { padding: 18px; border-radius: 22px }

  /* ── KORT (kontakt-side) ───────────────────────────────────────────────── */
  .map iframe { height: 240px }

  /* ── AKTIVITET & MEDLEM iFrames: 95% bredde på mobil ──────────────────── */
  #aktivitetFrame {
    width: 100% !important;
    max-width: 100% !important;
  }
  #medlemFrame {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── FOOTER: 1 kolonne – Viborg Modelflyveklub øverst, Kontakt nederst ── */
  .fgr {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  #fgr > div {
    width: 100%;
  }
  /* Skjul "Adresse" (c2) og "Navigation" (c3) */
  #fgr > div:nth-child(2),
  #fgr > div:nth-child(3) { display: none !important }
  .footer { padding: 32px 0 28px }

  /* ── NYHEDSTICKER ──────────────────────────────────────────────────────── */
  .nt-bar    { border-radius: 12px; height: 44px; min-height: 44px; max-height: 44px }
  .nt-label  { font-size: .9rem; padding: 0 14px; letter-spacing: .05em }
  .nt-content { font-size: .92rem }

  /* ── GALLERI ───────────────────────────────────────────────────────────── */
  .ggrid     { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
  .galfeatgrid { grid-template-columns: 1fr }
  .galbgrid  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }

  /* ── PROMO-FRAME: fjern kort-skygger og dekorative blobs på mobil ──────── */
  /* Kortenes box-shadow lækker farvet lys mod promo-frame baggrunden og    */
  /* ser ud som farvede skygger i hjørnerne. Fjern begge.                   */
  .promo-frame::before,
  .promo-frame::after { display: none; }
  .g2promo .card      { box-shadow: none; border: 1px solid var(--li); }

  /* ── NYTTIGE LINKS: indhold må ikke overskride rammen ──────────────────── */
  /* 1) Nulstil padding på dealer-grid – padding adderes til width:100%     */
  /*    og giver overflow til højre.                                        */
  /* 2) Sæt overflow:hidden på kortet selv så ingenting stikker ud.        */
  .promo-links-card,
  .promo-dealers-card,
  .promo-mdk-card {
    overflow: hidden !important;
  }
  .promo-links-card .promo-fit,
  .promo-dealers-card .promo-fit,
  .promo-mdk-card .promo-fit { overflow: hidden !important; }
  .promo-links-card .promo-fit-inner,
  .promo-dealers-card .promo-fit-inner,
  .promo-mdk-card .promo-fit-inner {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .promo-links-card .dealer-grid,
  .promo-dealers-card .dealer-grid,
  .promo-mdk-card .mdk-list {
    padding: 12px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .promo-links-card .dealer-grid,
  .promo-dealers-card .dealer-grid {
    grid-template-columns: 1fr !important;
  }
  .promo-links-card .dealer-item,
  .promo-dealers-card .dealer-item,
  .promo-mdk-card .mdk-item a {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* Klip lange navne, men behold "Åbn"-knapperne i mobilvisning */
  .promo-links-card .dealer-go,
  .promo-dealers-card .dealer-go { display: inline-flex; }
  .promo-links-card .dealer-left,
  .promo-dealers-card .dealer-left,
  .promo-mdk-card .mdk-txt { min-width: 0; overflow: hidden; }

  /* ── ADMIN-KNAP ────────────────────────────────────────────────────────── */
  #adml { display: none !important; }

  /* ── MOBILMENU – lidt ekstra polering ──────────────────────────────────── */
  .mob-drawer { width: min(88vw, 320px) }
  .mob-nav li a,
  .mob-nav li button { padding: 15px 20px; font-size: 1.05rem }
}