:root{--bg:#f3f3ef;--ink:#121212;--rule:#d6d6cf;--accent:#e33;--brand:#ffd44a;--blue:#8ac7ff;--blue-dark:#5ca9f0;--header-bg:#03548a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{text-decoration:none;color:inherit}

header{background:linear-gradient(180deg,#77b6f0,#8ac7ff);border-bottom:3px solid #77b6f0}
.mast{max-width:1100px;margin:0 auto;padding:18px 16px}
.mast-top{display:flex;align-items:center;gap:14px}
.brand-mark{width:48px;height:64px;flex:0 0 auto}
.logo-wrap{display:flex;flex-direction:column}
.logo-top{font-family:"Press Start 2P",monospace;font-size:26px;letter-spacing:2px;color:#1b2a41;display:flex;gap:10px;align-items:center}
.logo-badge{background:var(--brand);padding:6px 10px;border-radius:6px;border:2px solid #1b2a41}
.fake-oe{position:relative;display:inline-block}
.fake-oe .slash{position:absolute;left:52%;top:-8%;width:3px;height:120%;background:#1b2a41;transform:skew(-10deg)}
.logo-sub{font-weight:800;opacity:.85;margin-top:6px;letter-spacing:.06em}

nav{border-top:1px solid #8ac7ff;border-bottom:1px solid #cfe6ff;margin-top:1px}
.nav{max-width:1100px;margin:0 auto;padding:6px 16px;display:flex;gap:18px;overflow:auto}
.nav a{font-weight:700;color:#19202a;white-space:nowrap;padding:4px 8px;border-radius:8px}
.nav a.active{background:rgba(0,0,0,.08)}
nav a {
  display: flex;
  align-items: center;
  gap: 6px; /* afstand mellem ikon og tekst */
}

nav a img {
  width: 18px;
  height: 18px;
  object-fit: contain; /* så ikonet ikke bliver strukket */
}
.container{max-width:1100px;margin:0 auto;padding:16px}
.page[hidden]{display:none}
.rule{height:2px;background:var(--rule);margin:16px 0}
footer{border-top:2px solid var(--rule);margin-top:40px;padding:20px 0;font-size:13px;color:#666}

/* Article cards */
.article-card{display:grid;grid-template-columns:1.1fr 1.3fr;gap:12px;background:#fff;border:2px solid var(--rule);border-radius:12px;padding:12px;margin-bottom:12px;align-items:stretch}

.article-media .ratio{width:100%;aspect-ratio:16/9;background:#eef1f4;border-radius:8px;overflow:hidden}
.article-media img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{display:flex;flex-direction:column}
.article-body .meta{font-size:12px;color:#666;margin:.2rem 0 .4rem}
.article-body .more{font-weight:800;margin-top:auto}
@media (max-width:820px){.article-card{grid-template-columns:1fr}.article-media{order:2}.article-body{order:3}}

/* === EKSKLUSIV knappenål – samlet flyt med præcis delta === */
.article-card.exclusive {
  position: relative;
  /* Oprindelige placeringer (fra din kode) */
  --base-top: 18px;     /* kugle top */
  --base-right: -10px;   /* kugle right */
  --needle-top: -20px;   /* nål top */
  --needle-right: -5px; /* nål right */

  /* Flyt hele enheden, så spids rammer nuværende kugle-center:
     Δy = -36px (op), Δx = -1.5px (mod højre) */
  --dy: -36px;
  --dx: -1.5px;
}

/* Kuglehovedet (3D) */
.article-card.exclusive::after {
  content: "";
  position: absolute;
  top: calc(var(--base-top) + var(--dy)) !important;    /* 10 - 36 = -26 */
  right: calc(var(--base-right) + var(--dx)) !important;/* 12 - 1.5 = 10.5 */

  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.25) 22%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 40% 40%, #ff6b6b 0%, #e63b3b 55%, #b30808 100%);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.25),
    0 6px 12px rgba(0,0,0,0.35);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
  z-index: 2;
}

/* Nål – spidsen forbliver i centrum når vi roterer */
.article-card.exclusive::before {
  content: "";
  position: absolute;
  top: calc(var(--needle-top) + var(--dy)) !important;     /* 22 - 36 = -2 */
  right: calc(var(--needle-right) + var(--dx)) !important; /* 24 - 1.5 = 22.5 */

  width: 7px;
  height: 45px;
  background: linear-gradient(to bottom, #d8dadd 0%, #b6bcc5 35%, #8a9099 60%, #6b7077 100%);
  clip-path: polygon(50% 0%, 100% 90%, 50% 100%, 0% 90%);
  border-radius: 3px;
  transform-origin: 50% 100%;
  transform: rotate(210deg);
  box-shadow: 0 2px 3px rgba(0,0,0,0.25);
  z-index: 1;
}

/* (valgfrit) hover */
.article-card.exclusive:hover::after {
  transform: translateZ(0) scale(1.02);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

.article-card.exclusive::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, #ff4444, #b30000);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* HERO smaller (~2/3 height) */
#hero .article-card{padding:12px}
#hero .article-media .ratio{aspect-ratio:21/9} /* shorter than 16:9 */
#hero .article-body p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.front-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width:980px){.front-grid{grid-template-columns:1fr}}
.sidecard{background:#fff;border:2px solid var(--rule);border-radius:12px;padding:14px}
.sidecard h3{margin:.2rem 0 .4rem;font:800 16px Inter,system-ui}
.sidecard .muted{color:#666;font-size:13px}

#archive-list .item{background:#fff;border:2px solid var(--rule);border-radius:12px;padding:14px;margin-bottom:14px}

.card{background:#fff;border:2px solid var(--rule);border-radius:12px;padding:16px;margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;margin-bottom:6px}
.field input[type="text"],.field input[type="password"],.field textarea{width:100%;padding:10px;border:2px solid #d8d8d0;border-radius:10px;font:inherit}
.row{display:flex;gap:16px;flex-wrap:wrap}
.btn{border:none;background:#111;color:#fff;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.muted{color:#666;font-size:13px}
.preview{max-width:100%;border:2px dashed #c9c9c0;border-radius:12px;padding:8px;background:#fafaf7}

.ugens{display:flex;gap:12px;align-items:flex-start}
.ugens img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:#eef1f4;border:2px solid var(--rule)}
.ugens .name{font-weight:800;margin-bottom:4px}
.ugens .lines{font-size:13px;line-height:1.3;color:#333}
.ugens .lines span{display:block;margin-bottom:2px}
@media (max-width:980px){ .ugens img{width:64px;height:64px} }

/* === Title background chip on article headings === */
.article-card h2 {
  grid-column: 1 / -1;
  margin: -12px -12px 0 -12px;   /* træk baggrunden helt ud i kanterne */
  font: 700 20px Merriweather, serif;
  line-height: 1.3;
  background: var(--blue);       /* blå baggrund */
  color: #0f2238;                /* mørk tekst */
  padding: 10px 14px;
  border-radius: 10px 10px 0 0;  /* afrunding i toppen */

}
/* Keep hero's heading size override */
#hero .article-card h2{ font-size:20px }

nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s;
}

nav a img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: filter 0.2s;
}

/* Hover-effekt */
nav a:hover {
  background: var(--blue-dark);
  color: #ffffff;
}

nav a:hover img {
  filter: brightness(0) saturate(100%) invert(19%) sepia(86%) saturate(50%) hue-rotate(205deg) brightness(95%) contrast(95%);
  /* ovenstående filter giver en blålig tone – kan justeres */
}

/* Active side (via JS-klasse .active) */
nav a.active {
  background: var(--blue);
  color: #0f2238;
}

nav a.active img {
  filter: brightness(0) saturate(100%) invert(19%) sepia(86%) saturate(3185%) hue-rotate(205deg) brightness(95%) contrast(95%);
}

/* Crossfade-logo (1.5s) */
.logo-img{
  position: relative;
  display: inline-block;
  width: 560px;   /* justér bredden så den passer til dit PNG-logo */
  height: auto;
}

.logo-img img{
  display: block;
  width: 100%;
  height: auto;
}
.logo-img .logo-base,
.logo-img .logo-hover {
  transition: none; /* nulstil */
}

.logo-img:hover .logo-hover {
  transition: opacity 2.5s ease-in-out; /* kun fade ind */
  opacity: 1;
}

.logo-img:hover .logo-base {
  transition: opacity 2.5s ease-in-out; /* kun fade ud */
  opacity: 0;
}
.logo-img .logo-hover{
  position: absolute;
  inset: 0;       /* top:0; right:0; bottom:0; left:0; */
  opacity: 0;
  pointer-events: none;
}

.logo-img:hover .logo-base{ opacity: 0; }
.logo-img:hover .logo-hover{ opacity: 1; }

/* (valgfrit) behold spacing der svarede til .brand-mark */
.mast-top .logo-img{ margin-right: 14px; }

/* EKSKLUSIV hero – lavere højde */
#hero .article-card {
  padding: 10px; /* kan også sænkes lidt fra din nuværende værdi */
}

#hero .article-card .article-media .ratio {
  aspect-ratio: 21/7;  /* lavere højde, tidligere stod den til ca. 21/9 */
}

#hero .article-card .article-body p {
  -webkit-line-clamp: 4; /* viser kun 2 linjer tekst for at holde højden nede */
}


/* Eksklusiv hero-overskrift med gul baggrund */
#hero .article-card h2 {
  background: #fedb2c;    /* ny gul baggrund */
  color: #000;            /* sort tekst for kontrast */
}

/* Blinkende hero-overskrift */
@keyframes headlinePulse {
  0%, 60%, 100% { background: #fedb2c; color: #000; }  /* gul holder længe */
  80%           { background: var(--blue); color: #0f2238; } /* kort blå blink */
}

#hero .article-card h2 {
  animation: headlinePulse 3s infinite ease-in-out;
}
/* Artikler – pagination */
.pager{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin:16px 0 8px;
  flex-wrap:wrap;
}
.pager .pg{
  background:#fedb2c;
  border:2px solid #c9aa1a;
  border-radius:10px;
  padding:6px 10px;
  font-weight:800;
  cursor:pointer;
  color:#111;
}
.pager .pg:hover{
  filter: brightness(0.95);
}
.pager .pg.active{
  background:#111;
  border-color:#111;
  color:#fff;
  cursor:default;
}

.admin-block[hidden]{ display:none; }
#admin-controls{ margin-bottom: 10px; }
#admin-section{ padding:8px 10px; border:2px solid var(--rule); border-radius:10px; }

.klumme-wrap{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.klumme-avatar{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
  background:#eef1f4;
  border:2px solid var(--rule);
  flex:0 0 auto;
}

.klumme-text{
  font-size:14px;
  line-height:1.35;
}

.klumme-user{
  margin-bottom:4px;
}

/* Konkurrencer – kort genbrug som artikler */
.comp-card{display:grid;grid-template-columns:1.1fr 1.3fr;gap:12px;background:#fff;border:2px solid var(--rule);border-radius:12px;padding:12px;margin-bottom:12px;align-items:stretch}
.comp-card .ratio{width:100%;aspect-ratio:16/9;background:#eef1f4;border-radius:8px;overflow:hidden}
.comp-card img{width:100%;height:100%;object-fit:cover;display:block}
.comp-card .meta{font-size:12px;color:#666;margin:.2rem 0 .4rem}
.comp-card .body{display:flex;flex-direction:column}
.comp-card .body .more{margin-top:auto;font-weight:800}

/* Header-bannere */
.comp-card h2{
  grid-column:1 / -1;
  margin:-12px -12px 0 -12px;
  font:700 20px Merriweather,serif;
  line-height:1.3;
  padding:10px 14px;
  border-radius:10px 10px 0 0;
  color:#0f2238;
  position:relative;
}
.comp-card.active h2{ background:#2ecc71; color:#10361d; }   /* grøn */
.comp-card.ended  h2{ background:#e74c3c; color:#2a0b0a; }   /* rød */

/* Status badge i højre side */
.comp-card h2 .status{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font:800 12px/1 Inter,system-ui; letter-spacing:.06em;
  background:rgba(255,255,255,.85); padding:4px 8px; border-radius:8px; border:1px solid rgba(0,0,0,.15);
}
.comp-card.active h2 .status{ color:#0e5c2b; }
.comp-card.ended  h2 .status{ color:#6b1410; }

/* Admin-lister */
#konk-list-active li, #konk-list-ended li{margin:6px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#konk-list-active button, #konk-list-ended button{padding:6px 10px; border-radius:8px; border:2px solid var(--rule); background:#fafafa; cursor:pointer}
#konk-list-active button:hover, #konk-list-ended button:hover{filter:brightness(.97)}


/* Avatar overlay frame for Ugens Læser & Læserklummen */
.avatar-frame{position:relative;flex:0 0 auto;width:86px;height:86px;background-image:url('../graphic/avatar/background.png');background-size:cover;background-repeat:no-repeat;border-radius:12px;border:2px solid var(--rule);overflow:hidden}
.avatar-frame img{position:absolute;left:50%;top:50%;width:87px;height:87px;transform:translate(-50%,-60%);border:none;background:transparent;border-radius:8px}
/* tighten layout when using frame */
.ugens{align-items:center}
.ugens img#ugens-avatar,.ugens img#klumme-avatar{border:none;background:transparent}

/* Læserklummen text sizing to match Ugens Læser details */
#box-laeserklummen{font-size:13px;line-height:1.3}

/* Article detail layout */
.article-detail{max-width:1100px;margin:20px auto;padding:0 12px}
.art-head{display:grid;grid-template-columns: 300px 1fr;gap:20px;align-items:start;margin-bottom:16px}
.art-media{background:#eef1f4;border:2px solid var(--rule);border-radius:10px;min-height:300px}
.art-media .ratio{position:relative;width:100%;padding-top:100%}
.art-media .ratio img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;border-radius:8px}
.art-media--placeholder{display:flex;align-items:center;justify-content:center;color:#666;font-size:12px}
.art-top{display:flex;flex-direction:column;gap:8px}
.art-title{font-size:42px;line-height:1.1;margin:0}
.art-meta{color:#555;font-size:14px}
.art-body{border:2px solid var(--rule);border-radius:10px;padding:12px}
@media (max-width:900px){
  .art-head{grid-template-columns:1fr;gap:12px}
  .art-media{min-height:220px}
  .art-title{font-size:28px}
}


/* UNIFIED37C: Blue chip header baseline */
.sidecard > h3{
  position: relative;
  overflow: visible;
  margin: -14px -14px 8px -14px;
  font: 700 18px Merriweather, serif;
  line-height: 1.15;
  background: var(--blue);
  color: #0f2238;
  padding: 6px 12px;
  border-radius: 10px 10px 0 0;
}
.sidecard > h3 .meta{ font-weight:600 }

/* UNIFIED37C: Active header override for competitions */
.sidecard > h3.konk-head.active{ background: var(--green,#27ae60); color:#fff; }
.sidecard > h3.konk-head .status{ font:700 12px/1.2 Inter,system-ui,sans-serif; margin-left:8px; opacity:.95; }
.sidecard > h3.konk-head.active .status{ color:#fff; }
.sidecard > h3.konk-head .status.inactive{ color:#6b7a85; }

/* UNIFIED37C: spacing between sidecards in aside */
.front-grid aside .sidecard + .sidecard{ margin-top: 16px; }

/* UNIFIED37C: Inactive competitions layout + winners list */
#box-konkurrencer.inactive > .avatar-frame{ display:none; }
#box-konkurrencer.inactive #konk-content{ margin-left: 0px; } /* push right same as avatar frame width + gap */
#box-konkurrencer .winners{ margin-top:8px; }
#box-konkurrencer .winners .title{ font:700 14px Inter,system-ui,sans-serif; margin-bottom:4px; color:#304252; }
#box-konkurrencer .winner-line{ font:600 13px Inter,system-ui,sans-serif; }
#box-konkurrencer .winner-line .prize{ opacity:.9; margin-left:6px; }

/* UNIFIED37C: Equalize competitions box height to Ugens Læser */
#box-konkurrencer{ min-height:110px; }
#box-konkurrencer.inactive{ min-height:110px; }

/* UNIFIED43: Fix 'Konkurrencer' flex container height */
#box-konkurrencer.ugens{
  height:86px;
  min-height:86px;
  max-height:86px;
  align-items:center;
  overflow:hidden;
}
#box-konkurrencer.ugens.inactive{
  height:86px;
  min-height:86px;
  max-height:86px;
}


/* TOP-ALIGN SIDEBOX TEXT (2025-09-27) */
#box-ugenslaeser.ugens,
#box-laeserklummen,
#box-konkurrencer.ugens,
.klumme-wrap{
  align-items: flex-start !important;
}

#box-ugenslaeser .lines,
#box-laeserklummen .lines,
#box-konkurrencer .lines,
.klumme-wrap .lines,
.klumme-wrap .klumme-text{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Resize konkurrence-billede (2025-09-27) */
#box-konkurrencer #konk-image {
  width: 60% !important;
  height: auto !important;
  display: block;
  margin: 0 auto; /* centrer billedet i boksen */
  margin-top: 6px; /* justér tallet efter behov, fx 20px for mere luft */
}

/* Læserklummen styling (2025-09-27) */
#box-laeserklummen #klumme-text {
  font-style: italic;
  display: inline; /* sørger for at teksten står på linje */
}

#box-laeserklummen #klumme-text::before,
#box-laeserklummen #klumme-text::after {
  content: '"';
  font-style: normal;   /* anførselstegn ikke kursiv */
  display: inline;      /* altid inline */
  white-space: pre;     /* undgå utilsigtede linjeskift */
}

#box-laeserklummen #klumme-text::before {
  margin-right: 2px;
}
#box-laeserklummen #klumme-text::after {
  margin-left: 2px;
}

/* SIDEBOX HEADER-IKONER – ovenpå, højrejusteret (2025-09-27) */
.sidecard > h3{
  position: relative;   /* findes allerede, men godt at sikre */
  overflow: visible;    /* så ikonet må stikke udenfor chippen */
  z-index: 0;           /* baseline under ikonet */
}

/* Fælles basis for alle tre headere */
.ugens-head::after,
.klumme-head::after,
.konk-head::after{
  content: "";
  position: absolute;
  z-index: 3; /* over headerens baggrund */
  right: var(--icon-right, -10px);  /* negativ værdi = lidt udenfor højrekant */
  top:   var(--icon-top,   -6px);   /* kan hæves/sænkes som knappenålen */
  width:  var(--icon-w, 1.25em);    /* knyttet til headerens font-størrelse */
  height: var(--icon-h, 1.25em);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;         /* skaler billedet ind i boksen */
  transform:
    rotate(var(--icon-rot, 0deg))
    scale(var(--icon-scale, 1));
  transform-origin: 50% 50%;
  pointer-events: none;
  opacity: 0.98;
}

/* Ikoner pr. sektion (kan ændres) */
.ugens-head::after  { background-image: url('../graphic/medalje.gif'); }
.klumme-head::after { background-image: url('../graphic/popcorn.gif'); }
.konk-head::after   { background-image: url('../graphic/pokal.png'); }

/* Eksempel-justeringer (KAN DU TILPASSE FRIT) */
/* Ugens Læser – standard tæt på knappenålsplacering */
.ugens-head{
  --icon-w: 1.3em;      /* størrelse i em => følger headerens højde */
  --icon-h: 1.3em;
  --icon-right: 8px;  /* hvor langt ud over højrekant */
  --icon-top:   18px;   /* hvor meget op/ned (negativ = op) */
  --icon-rot: 20deg;
  --icon-scale: 3.0;
}

/* Læserklummen – en anelse lavere og tættere */
.klumme-head{
  --icon-w: 1.4em;
  --icon-h: 1.4em;
  --icon-right: 16px;
  --icon-top:   -2px;
  --icon-rot: -15deg;
  --icon-scale: 2.5;
}

/* Konkurrencer – lidt større og drejet for “energi” */
.konk-head{
  --icon-w: 1.25em;
  --icon-h: 1.25em;
  --icon-right: 8px;
  --icon-top:   13px;
  --icon-rot: 22deg;
  --icon-scale: 2.5;
}

/* KONKURRENCER: smallere billedkolonne + hvid container + centreret og mindre billede (2025-09-27) */
#page-konkurrencer .comp-card{
  grid-template-columns: 0.8fr 1.8fr !important; /* venstre smallere, højre bredere */
}

/* Containeren omkring billedet (hvid baggrund og centreret indhold) */
#page-konkurrencer .comp-card .ratio{
  width: 50% !important;            /* overstyr evt. tidligere 50%-regel */
  background: #fff !important;       /* var #eef1f4 */
  display: flex !important;          /* centrer billedet i boksen */
  align-items: center !important;
  justify-content: center !important;
}

/* Selve billedet – lidt mindre inde i containeren */
#page-konkurrencer .comp-card .ratio img{
  width: 50% !important;             /* justér fx 80–90% efter smag */
  height: auto !important;
  object-fit: contain !important;
}

/* Mobil: én kolonne */
@media (max-width: 980px){
  #page-konkurrencer .comp-card{
    grid-template-columns: 1fr !important;
  }
}

/* Konkurrencer: smallere billedkolonne */
#page-konkurrencer .comp-card{
  grid-template-columns: 0.7fr 1.7fr !important; /* justér fx 0.8/1.6 eller 0.6/1.8 */
  column-gap: 10px; /* valgfrit: lidt mindre afstand mellem kolonner */
}

/* Billedet skal bare følge containeren */
#page-konkurrencer .comp-card .article-media .ratio{
  width: 100%;
  display: flex; align-items: center; justify-content: center; /* centrer billedet */
  background: #fff; /* valgfrit: hvid baggrund */
}
#page-konkurrencer .comp-card .article-media .ratio img{
  width: 120%; /* gør selve billedet mindre inde i kassen */
  height: auto; object-fit: contain;
}

/* Mobil fallback: én kolonne */
@media (max-width: 980px){
  #page-konkurrencer .comp-card{ grid-template-columns: 1fr !important; }
}

/* Konkurrencer: fjern fast aspect-ratio og brug fast højde (2025-09-27) */
#page-konkurrencer .comp-card .article-media .ratio{
  aspect-ratio: auto !important;  /* stop 16/9-koblingen */
  height: 200px !important;       /* vælg den højde du vil have */
  width: 200px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;               /* valgfrit: hvid baggrund */
}

#page-konkurrencer .comp-card .article-media .ratio img{
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Konkurrencer-side: Labellede felter og beskrivelse styling (2025-09-27) */
#page-konkurrencer .comp-card .comp-desc{ white-space: pre-wrap; margin: .25rem 0 .5rem; }
#page-konkurrencer .comp-card .comp-prize{ margin: .25rem 0 .25rem; }
#page-konkurrencer .comp-card .ratio{ background: #fff; display:flex; align-items:center; justify-content:center; }

/* --- Auth widget in header --- */
.auth-mini-slot{ margin-left:auto; }
.mast-top{ justify-content: space-between; } /* push auth to right */
.auth-mini{ display:flex; align-items:center; gap:.5rem; font-size:14px; }
.auth-mini input{ height:28px; padding:0 .5rem; border:1px solid #ccc; border-radius:6px; width:130px; }
.auth-mini .btn-mini, .auth-mini .btn-mini-link{ height:28px; padding:0 .6rem; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }
.auth-mini .btn-mini-link{ display:inline-flex; align-items:center; }
.auth-mini .sep{ opacity:.4; }

/* --- Counts on cards --- */
.article-card .article-body{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.engage-counts{ margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; opacity:.9; }
.engage-counts .cnt{ min-width:1.2em; text-align:right; }
.icon-heart{ font-style:normal; }
.icon-bubble{ font-style:normal; }

/* --- Detail like + comments --- */
.like-btn{ border:1px solid #ccc; border-radius:8px; padding:.2rem .5rem; background:#fff; cursor:pointer; }
.like-btn[data-liked="1"]{ border-color:#e33; color:#e33; }
#comments-area{ margin-top:1rem; }
#comments-area .mvp-comment-list{ list-style:none; padding:0; display:grid; gap:.5rem; }
#comments-area .mvp-comment-list li{ border:1px solid #eee; border-radius:10px; padding:.5rem .75rem; background:#fff; }
#comments-area .comment-form textarea{ width:100%; padding:.5rem; border:1px solid #ccc; border-radius:8px; }
#comments-area .comment-form button{ margin-top:.4rem; }


/* læg nederst i css/styles.css */
.auth-mini input{
  height: 26px;       /* var 28px */
  width: 90px;       /* var 130px — gør dem smallere */
  padding: 0 .4rem;   /* var 0 .5rem */
  font-size: 13px;    /* lidt mindre tekst */
}

.auth-mini .btn-mini{
  height: 26px;       /* match input-højde */
  padding: 0 .45rem;  /* lidt smallere knap */
  font-size: 12px;
}

.auth-mini{ gap: .35rem; } /* lidt tættere layout */


/* Placér login-widget helt oppe ved toppen af headeren */
.mast-top #auth-widget{
  align-self: flex-start;   /* overstyrer containerens align-items:center */
}

/* Finjustér hvis der er 1–3px forskel ift. logoets top */
@media (min-width: 900px){
  .mast-top #auth-widget{ margin-top: 2px; } /* prøv 0–4px efter behov */
}

/* Netstationen mini-profil (vises kun ved login) */
.ns-profile{
  margin-top: 6px;
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  border: 1px solid #e5e5e5; border-radius: 10px;
  background: #fff url('/images/background.png') right center no-repeat; /* << ret sti */
  background-size: contain; /* eller 'cover' hvis din bg er fuldflade */
}

.ns-avatar{
  width: 50px; height: 50px; border-radius: 50%;
  object-fit: cover; background: #eee;
  flex: 0 0 38px;
}

.ns-meta{ line-height: 1.1; }
.ns-username{ font-weight: 600; }
.ns-source{ font-size: 11px; color: #777; }

/* Signup note styling (punkt 2) */
.signup-note{ margin-top: .5rem; color:#444; }
.signup-note .green-strong{ color:#157347; font-weight:700; }
.signup-note .red-strong{ color:#c02a2a; font-weight:700; }

/* Simple layout for the signup form */
.auth-signup{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.auth-signup input{ height:36px; padding:0 .6rem; border:1px solid #ccc; border-radius:8px; }
.auth-signup .btn{ height:36px; padding:0 .8rem; border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer; }
#signup-msg{ margin-top:.4rem; color:#b33; }

/* Make the "Opret" link look like a small button/link in header */
/* Gør "Opret" samme størrelse som login-knappen */
.auth-mini .btn-mini,
.auth-mini .btn-mini-link{
  display: inline-flex;
  align-items: center;
  height: 26px;           /* samme som login-knappen */
  padding: 0 .6rem;       /* samme som login-knappen */
  font-size: 13px;        /* samme som login-knappen */
  line-height: 26px;      /* sikrer vertikal centrering */
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.auth-mini .btn-mini-link:hover{
  text-decoration: none;
}
/* === Counts under "Læs mere.." + detail UI === */
.article-card .article-body{ position: relative; }
.article-card .article-body .more{ display:inline-block; padding-right:70px; } /* leave room for counts */
.article-card .article-body .engage-counts{
  position:absolute; right:0; bottom:0;
  display:inline-flex; align-items:center; gap:.4rem; opacity:.95;
}
.article-card .article-body .engage-counts .cnt{ min-width:1.2em; text-align:right; }

.like-btn{ border:1px solid #ccc; border-radius:8px; padding:.2rem .5rem; background:#fff; cursor:pointer; margin-left:8px; }
.like-btn[data-liked="1"]{ border-color:#e33; color:#e33; }

#comments-area{ margin-top:1rem; }
#comments-area .mvp-comment-list{ list-style:none; padding:0; display:grid; gap:.5rem; }
#comments-area .mvp-comment-list li{ border:1px solid #eee; border-radius:10px; padding:.5rem .75rem; background:#fff; }
#comments-area .comment-form textarea{ width:100%; padding:.5rem; border:1px solid #ccc; border-radius:8px; }
#comments-area .comment-form button{ margin-top:.4rem; }

/* RESET from previous patch: keep text left-aligned, no flex centering */
.article-card .article-body{ 
  display: block !important;
  text-align: left !important;
  position: relative; /* for absolute counts */
}

/* make room for counts, without affecting alignment */
.article-card .article-body .more{
  display: inline-block !important;
  padding-right: 70px !important;
}

/* counts pinned to bottom-right */
.article-card .article-body .engage-counts{
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: .35rem; opacity: .95;
}
.article-card .article-body .engage-counts .cnt{ min-width: 1.2em; text-align: right; }

/* Detail like + comments (unchanged) */
.like-btn{ border:1px solid #ccc; border-radius:8px; padding:.2rem .5rem; background:#fff; cursor:pointer; margin-left:8px; }
.like-btn[data-liked="1"]{ border-color:#e33; color:#e33; }

#comments-area{ margin-top:1rem; }
#comments-area .mvp-comment-list{ list-style:none; padding:0; display:grid; gap:.5rem; }
#comments-area .mvp-comment-list li{ border:1px solid #eee; border-radius:10px; padding:.5rem .75rem; background:#fff; }
#comments-area .comment-form textarea{ width:100%; padding:.5rem; border:1px solid #ccc; border-radius:8px; }
#comments-area .comment-form button{ margin-top:.4rem; }

/* Artikelkort: tekstkolonne skal være flex-kolonne med link i bunden */
.article-card .article-body{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  position: relative; /* for counts i hjørnet */
}

/* "Læs mere.." skal stå i bunden og give plads til tællerne til højre */
.article-card .article-body .more{
  display: inline-block !important;
  margin-top: auto !important;   /* skub ned i bunden */
  padding-right: 70px !important;/* plads til ♥/💬 */
}

/* Tællerne fast i nederste højre hjørne */
.article-card .article-body .engage-counts{
  position: absolute;
  right: 0; bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  opacity: .95;
}
.article-card .article-body .engage-counts .cnt{
  min-width: 1.2em; text-align: right;
}
/* Detail page: keep counts inline with date/author */
.art-meta{ /* keep your existing typography; no layout change */ }

.art-engage-counts{
  display: inline-flex;
  align-items: center;
  gap: .12rem;
white-space: nowrap; 
min-width: 1.2em;
}

.art-like-action{
  display:inline-flex; align-items:center; gap:.4rem;
  cursor: pointer;
}
.art-like-action .art-like-icon{ width:20px; height:20px; display:inline-block; }
.art-like-action .art-like-text{ user-select:none; }



/* v4.0.6 — Like-tekst en anelse mindre og ikke fed (overstyr h1's bold) */
#artikel-detail h1 .art-like-action--title{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size: 0.8rem;     /* lidt mindre end 1rem */
  font-weight: normal;    /* ikke fed, selvom h1 er fed */
  margin-left: .5rem;
  cursor: pointer;
  vertical-align: baseline;
}
#artikel-detail h1 .art-like-icon{ width:20px; height:20px; }



.art-like-row{ margin-top: .5rem; }

.art-like-action{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.art-like-action--below{ font-size: .95rem; }
.art-like-action .art-like-icon{ width:14px; height:14px; display:inline-block; } /* 70% af 20px */

/* Strammere afstand mellem meta og "Like artiklen" */
#artikel-detail .art-meta{ margin-bottom: 0; }
#artikel-detail .art-meta + .art-like-row{ margin-top: .05rem; } /* ~30% af 0.5rem */


/* v4.0.8 — Like ved titlen (lille, ikke fed) */
#artikel-detail h1 .art-like-action--title{
  display:inline-flex;
  align-items:center;
  gap:.60rem;
  font-size: 0.7rem;     /* lille tekst */
  font-weight: normal;    /* ikke fed, selvom h1 er fed */
  margin-left: .5rem;     /* lidt luft efter overskriften */
  cursor: pointer;
  vertical-align: baseline;
}
#artikel-detail h1 .art-like-icon{ width:14px; height:14px; } /* 70% ikon */

/* Tættere mellem ikon og tal på kort (forside + “Artikler”) */
#hero .engage-counts,
#dynamic-articles .engage-counts,
#artikler-list .engage-counts{
  gap: -1.005rem !important;                 /* var ~.35rem */
}
#hero .engage-counts .cnt,
#dynamic-articles .engage-counts .cnt,
#artikler-list .engage-counts .cnt{
  font-size: .9em;                         /* en anelse mindre tal */
}
#hero .engage-counts .icon-heart,
#dynamic-articles .engage-counts .icon-heart,
#artikler-list .engage-counts .icon-heart{
  font-size: 1em;                          /* behold hjertets størrelse */
}
#hero .engage-counts .icon-bubble,
#dynamic-articles .engage-counts .icon-bubble,
#artikler-list .engage-counts .icon-bubble{
  font-size: .9em;                         /* taleboblen lidt mindre */
}

/* Detaljeside (tællerne ved dato/redaktion) */
.art-engage-counts .cnt{
  font-size: .9em;                         /* lidt mindre tal */
  margin-left: .05rem;                     /* en tand tættere på ikon */
}
.art-engage-counts .icon-heart{ font-size: 1em; }   /* hjertet uændret */
.art-engage-counts .icon-bubble{ font-size: .7em; } /* taleboblen mindre */

/* --- Strammere afstand på KORT (forside + "Artikler") --- */
.engage-counts{
  gap: .25rem !important;                /* mindre afstand mellem ikon og tal */
}
.engage-counts .cnt{
  font-size: .9em;                        /* en anelse mindre tal */
  margin-left: -0.5rem;                    /* tættere på ikon */
}

/* --- Strammere afstand på ARTIKELSIDEN (meta-linjen) --- */
/* gør tæller-containeren til inline-flex, så 'gap' virker */

.art-engage-counts .cnt{
  min-width: 0 !important;               /* overstyr gammel min-width der lavede luft */
  display: inline !important;             /* fjern inline-block-bredden */
  font-size: .9em;                        /* en anelse mindre tal */
  margin-left: .06rem;                    /* tættere på ikon */
}
.art-engage-counts .icon-heart{ font-size: 1em; }   /* hjertet uændret */
.art-engage-counts .icon-bubble{ font-size: .88em; }/* taleboblen mindre */

/* v5.0.0 — Kommentarblok nederst på artikelsiden */
.comments-block{
  margin-top: 1rem;
  padding-top: .25rem;
  border-top: 1px solid #eee;
}
.comments-block .comments-title{
  font-size: 1.1rem;
  margin: .25rem 0 .5rem;
}
.comments-block .comments-empty{ color:#666; font-size:.95rem; margin:.25rem 0; }

.comments-block .comment-row{ padding:.5rem 0; border-top:1px dashed #eee; }
.comments-block .comment-row:first-child{ border-top:none; }
.comments-block .c-meta{ color:#666; font-size:.85rem; margin-bottom:.2rem; }
.comments-block .c-body{ white-space:pre-wrap; line-height:1.35; }

.comments-block .comment-form{ margin-top: .6rem; display:flex; flex-direction:column; gap:.4rem; }
.comments-block textarea{
  width: 100%; min-height: 90px; padding:.5rem;
  border:1px solid #ccc; border-radius:8px; resize:vertical;
  font: inherit;
}
.comments-block .btn{
  align-self:flex-start; height:34px; padding:0 .9rem;
  border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer;
}
.comments-block .btn:disabled{ opacity:.7; cursor:default; }
.comments-block .comment-msg{ color:#555; font-size:.9rem; }

/* v5.0.4 — Match "Log af" stil til SMID!-knappen i kommentarblokken */
.comments-block .btn-mini{

  height:26px; padding:0 .45rem;
  font-size:12px; line-height:1;
  border:1px solid #ccc; border-radius:6px;
  background:#fff; color:inherit;
  cursor:pointer; text-decoration:none;
}
.comments-block .btn-mini:hover{ background:#f7f7f7; }
.comments-block .btn-mini:disabled{ opacity:.7; cursor:default; }

/* Remove number input spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

#page-redaktionen .staff-actions .send-post{ color:#111; }
#page-redaktionen .staff-actions .send-post:hover{ text-decoration: underline; }

#page-redaktionen .staff-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#page-redaktionen .staff-actions {
  margin-top: auto; /* Skubber linket ned */
}

/* Make the whole card a flex row and allow the right side to stretch */
#page-redaktionen .staff-card {
  display: flex;
  align-items: stretch; /* important: lets .staff-right fill the full height */
}

/* Left stays auto width, right fills remaining space and becomes a column */
#page-redaktionen .staff-left { flex: 0 0 auto; }
#page-redaktionen .staff-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Push the action area to the bottom of the right column */
#page-redaktionen .staff-actions {
  margin-top: auto;
  padding-top: 6px; /* small breathing room, optional */
}

/* Make the right side a positioning context */
#page-redaktionen .staff-right {
  position: relative !important;
  display: block;          /* safe regardless of previous flex/grid */
  padding-bottom: 28px;    /* room for the action row */
}

/* Pin the action row to the bottom of the right column */
#page-redaktionen .staff-actions {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding-top: 6px;        /* tiny spacing above */
}

/* === Ris & Ros page === */
#page-risros .risros-wrap {
  max-width: 720px;
  margin: 24px 0 40px 0; /* venstrestillet, ingen auto center */
  text-align: left;
  line-height: 1.5;
}

#page-risros .queue {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 0.5px;
  margin: 8px 0 12px;
}

#page-risros .send-post {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  border: 1px solid #ddd;
  padding: 10px 14px;
  border-radius: 12px;
}

#page-risros .send-post:hover {
  text-decoration: underline;
}

#page-risros .risros-action {
  margin-top: 18px;
}
#page-risros .queue-icon {
  height: 5em;        /* din ønskede størrelse */
  width: auto;
  vertical-align: baseline; /* flugt med tekstlinjens bund */
  margin-left: 6px;
  position: relative;
  top: 1.15em; /* juster denne værdi op/ned til det passer perfekt */
}

/* === Ris & Ros queue line fix === */
#page-risros .queue {
  display: flex;
  align-items: flex-end; /* bund-justering */
  gap: 2px;
}
#page-risros .queue-icon {
  height: 5em;
  width: auto;
}
/* === Ris & Ros: absolute-anchored icon (independent of text flow) === */
#page-risros .queue {
  position: relative;
  display: inline-block;   /* højden følger kun teksten */
  line-height: 1.2;
  gap: 0; /* override hvis der var sat gap før */
}
/* === Ris & Ros: baseline alignment override (precise bottom-to-bottom) === */
#page-risros .queue {
  display: inline-flex;     /* holder sig på linje med teksten, ikke full width */
  align-items: baseline;    /* bund-justerer tekst og billede */
  gap: 6px;
  position: static;
}
#page-risros .queue-text { line-height: 1.2; }
#page-risros .queue-icon {
  position: static !important;  /* overrule tidligere absolute */
  height: 5em;
  width: auto;
  align-self: baseline;         /* sikker baseline på billedet */
  margin-left: 5;
}

/* Kontrolleret afstand mellem sidecards i sidebar */
.aside .sidecard {
  margin-bottom: 12px; /* justér dette tal én gang for alle */
}

.aside .sidecard:last-child {
  margin-bottom: 0; /* ingen ekstra afstand efter den sidste */
}

#page-risros .queue-icon {
  height: 5em;        /* din ønskede størrelse */
  width: auto;
  vertical-align: baseline; /* flugt med tekstlinjens bund */
  margin-left: 6px;
  position: relative;
  top: 0.15em; /* juster denne værdi op/ned til det passer perfekt */
}

/* === Ris & Ros: absolute-anchored icon (independent of text flow) === */
#page-risros .queue {
  position: relative;
  display: inline-block;   /* højden følger kun teksten */
  line-height: 1.2;
  gap: 0; /* override hvis der var sat gap før */
}
#page-risros .queue-text { display: inline-block; }
#page-risros .queue-icon {
  position: absolute;
  left: 100%;    /* lige til højre for teksten */
  bottom: 0;     /* bund-justeret med teksten */
  height: 5em;   /* kan frit ændres uden at påvirke teksten */
  width: auto;
  margin-left: 6px;
}


/* /css/competitions_join_overrides.css — visual tweaks for competitions */
#konkurrencer-list .comp-card{
  position: relative;
  padding-bottom: 72px; /* space for sticky footer button */
}

#konkurrencer-list .comp-card .body .desc{
  font-size: 1.05rem;   /* bigger description */
  line-height: 1.5;
  margin: 8px 0 10px;
}

#konkurrencer-list .comp-card .body .meta-row{
  font-size: 0.92rem;
  color: #737373;       /* grey */
  margin: 6px 0 0;      /* each on its own line */
  display: block;
}

#konkurrencer-list .comp-card .body .meta-row .meta-k{
  margin-right: 6px;
  font-weight: 600;
  color: #737373;       /* slightly brighter label than value */
}

#konkurrencer-list .comp-card .join-footer{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

#konkurrencer-list .comp-card .join-footer .join-btn.fullwidth{
  width: 100%;
  display: inline-block;
}

#konkurrencer-list .comp-card .join-footer .join{
  padding: 10px 12px;
  border-radius: 8px;
  text-align: center;
  background: #f0fdf4;   /* light green bg for 'Allerede tilmeldt' */
  color: #14532d;
  font-weight: 600;
}

#konkurrencer-list .comp-card .join-footer .join.muted{
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
}

#konkurrencer-list .comp-card .join-footer .join.err{
  background: #fef2f2;
  color: #991b1b;
}

/* /css/competitions_join_overrides.css — FINAL: warm greys, bottom meta, winner highlight, sticky CTA */
#konkurrencer-list .comp-card{
  position: relative;
  padding-bottom: 78px; /* space for sticky footer button */
}

#konkurrencer-list .comp-card .body .desc{
  font-size: 1.08rem;   /* slightly larger description */
  line-height: 1.55;
  margin: 8px 0 12px;
}

#konkurrencer-list .comp-card .body .meta-bottom{
  margin: 10px 0 12px;
}

#konkurrencer-list .comp-card .body .meta-row{
  display: block;
  font-size: 0.95rem;
  color: #737373;              /* warm grey for value */
  margin-top: 6px;
}

#konkurrencer-list .comp-card .body .meta-row .meta-k{
  margin-right: 6px;
  font-weight: 500;
  color: #a1a1aa;              /* warm grey for label */
}

#konkurrencer-list .comp-card.ended .body .meta-row.winner .meta-k,
#konkurrencer-list .comp-card.ended .body .meta-row.winner .meta-v{
  color: #166534;              /* greenish for winner */
  font-weight: 700;
}

#konkurrencer-list .comp-card .join-footer{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

#konkurrencer-list .comp-card .join-footer .join-btn.fullwidth{
  width: 100%;
  display: inline-block;
}

#konkurrencer-list .comp-card .join-footer .join{
  padding: 10px 12px;
  border-radius: 8px;
  text-align: center;
  background: #f0fdf4;   /* light green bg for 'Allerede tilmeldt' */
  color: #14532d;
  font-weight: 600;
}

#konkurrencer-list .comp-card .join-footer .join.muted{
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
}

#konkurrencer-list .comp-card .join-footer .join.err{
  background: #fef2f2;
  color: #991b1b;
}

#konkurrencer-list .comp-card .join-footer .join-btn.fullwidth {
  width: 100%;
  display: inline-block;
  background: #86c3fc;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: background 0.25s, transform 2s;
}

#konkurrencer-list .comp-card .join-footer .join-btn.fullwidth:hover {
  background: #03568b;
  transform: translateY(-1px);
}

#konkurrencer-list .comp-card .join-footer .join-btn.fullwidth:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* TINGLISTEN — farv hele filter-boksen mørkeblå */
#page-tingliste section.card {
  background: #7fbdf6 !important; /* din mørkeblå */
  border-color: #7fbdf6;
  color: #ffffff;
}

/* Lidt spacing og fleksibel layout for indholdet i boksen */
#page-tingliste section.card .toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Inputs og select: bevar hvid baggrund for kontrast */
#page-tingliste section.card #tg-q,
#page-tingliste section.card #tg-cat {
  background: #ffffff;
  color: #1f2937;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
}

/* "Opdater"-knappen: lyseblå + mørkeblå hover */
#page-tingliste #tg-refresh.btn {
  background: #03568b;
  color: #FFF;
  border: none;
  border-radius: 0px;
  padding: 10px 16px;
  font-weight: 999;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: background .25s, transform .1s;
}
#page-tingliste #tg-refresh.btn:hover {
  background: #fedb2c;
  transform: translateY(-1px);
}

/* Den lille status-tekst i boksen (id="tg-msg") – lys grå, så den kan læses på mørk baggrund */
#page-tingliste #tg-msg {
  color: #e5e7eb;
}





/* TINGLISTEN — filterboks mørkeblå */
#page-tingliste section.card{
  background: #7fbdf6 !important;  /* mørkeblå boks */
  border-color: #7fbdf6 !important;
  color: #fff;
}
#page-tingliste section.card .toolbar{
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* "Opdater" knap – farver + (valgfri) outline om teksten */
#page-tingliste #tg-refresh.btn{
  background: #03568b;
  color: #fff;
  border-radius: 6px;
  border: none;       /* kant omkring knappen (valgfri) */
  font-weight: 800;                /* gør teksten tydelig */
  -webkit-text-stroke: 0;          /* fjern tekst-outline hvis du havde det slået til */
  padding: 10px 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: background .25s, transform .1s, border-color .25s;
}
#page-tingliste #tg-refresh.btn:hover{
  background: #fedc2c;
  border-color: #fedc2c;
  transform: translateY(-1px);
}

/* TINGLISTE-KORT — "Indsend"-knappen i hver sektion */
#page-tingliste .sale-form .btn{
  background: #03568b !important;  /* samme lyseblå som Opdater */
  color: #fff !important;
  border: 2px solid #03568b;       /* ens kant */
  border-radius: 6px;
  font-weight: 800;                 /* tydelig tekst */
  padding: 6px 12px;
  line-height: 1.1;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: background .25s, transform .1s, border-color .25s;
}
#page-tingliste .sale-form .btn:hover{
  background: #fedc2c !important;
  border-color: #fedc2c;
  transform: translateY(-1px);
}

/* "Solgt for" — afrundet input ligesom søgefeltet */
#page-tingliste .sale-form input[name="amount"]{
  border: none;
  border-radius: 6px;               /* afrunding */
  background: #fff;
  color: #1f2937;
  padding: 8px 10px;                /* mere behagelig padding end inline 4px */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: box-shadow .2s;
}
#page-tingliste .sale-form input[name="amount"]:focus{
  outline: none;
  box-shadow: 0 0 0 2px #86c3fc;
}


/* Artikler – få teaseren helt op under meta-linjen (dato/klokkeslæt/Redaktionen) */
.article-body .meta{
  margin-bottom: 2px !important;     /* tæt på teaseren */
}

.article-card .article-body > p:first-of-type{
  margin-top: -8px !important;        /* fjern default <p> top-margin */
}

/* (valgfrit) på “hero”-kort øverst på forsiden – samme justering */
#hero .article-card .article-body > p:first-of-type{
  margin-top: -8px !important;
}


/* Artikler – ens teaser-størrelse + kursiv */
.article-card .article-body > p:first-of-type {
  font-size: 0.95rem !important;   /* samme størrelse som eksklusive */
  line-height: 1.4;
  font-style: italic;              /* ← kursiv tekst */
}

/* Sikrer samme stil også på eksklusive artikler */
.article-card.exclusive .article-body > p:first-of-type {
  font-size: 0.95rem !important;
  font-style: italic;              /* ← kursiv tekst */
}
/* Sidebox "Konkurrencer" – link i bunden */
#sidebox-konkurrencer .sidebox-footer {
  text-align: right;
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 6px;
}

#sidebox-konkurrencer .go-to-contests {
  display: inline-block;
  color: #1d2a63;              /* samme mørkeblå som temaet */
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s;
}

#sidebox-konkurrencer .go-to-contests:hover {
  color: #03568b;              /* hover – lidt lysere blå */
  text-decoration: underline;
}

/* Stil "Gå til konkurrencer" i konkurrencer-boksen */
#box-konkurrencer #konk-content .go-to-contests-inline {
  font-size: 0.85rem;
  color: #06558b;
  font-weight: 700;
  position: relative;
  top: 15px; /* en smule ned */
  text-decoration: none;
  transition: color 0.25s, transform 0.1s;
}

/* Hover-effekt */
#box-konkurrencer #konk-content .go-to-contests-inline:hover {
  color: #7fbdf6;         /* ← hoverfarve, lidt lysere blå */
  text-decoration: underline;
  transform: translateX(2px); /* lille bevægelse ved hover */
}
/* /css/tagline.css — mini styles for tagline editor */
.ns-source{ display:flex; align-items:center; gap:.35rem; }
.ns-tagline-editing{ display:inline-flex; align-items:center; gap:.35rem; }
.ns-tagline-input{
  height:24px; padding:0 .4rem; border:1px solid #ccc; border-radius:6px; font-size:13px;
  max-width:160px;
}
.ns-tagline-save{
  height:24px; padding:0 .5rem; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; font-size:12px;
}

/* === Editable tagline under brugernavn === */
#auth-widget #user-tagline[contenteditable]:empty:before {
  content: "Skriv her..";
  opacity: .6;
}
#auth-widget .user-tagline {
  line-height: 1.2;
  outline: none;
  max-width: 180px;         /* justér efter behov */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Editable tagline placeholder og udseende */
#auth-widget #user-tagline[contenteditable]:empty:before {
  content: "Skriv her..";
  opacity: .6;
}
#auth-widget .user-tagline {
  line-height: 1.2;
font-size: 11px;         /* ← gør teksten mindre */
font-style: italic;
  outline: none;
  max-width: 180px;           /* justér hvis nødvendigt */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Login-boks i headeren === */
#auth-widget .auth-login {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* lidt luft mellem felterne */
}

#auth-widget .auth-login input[type="text"],
#auth-widget .auth-login input[type="password"] {
  width: 110px;                 /* ← gør felterne smallere */
  height: 22px;
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

#auth-widget .auth-login input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 3px rgba(74,144,226,0.6);
}

/* === "Log ind" knappen === */
#auth-widget .auth-login .btn-mini {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 300;
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#auth-widget .auth-login .btn-mini:hover {
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border-color: #05548b;
}

#auth-widget .auth-login .btn-mini:active {
  background: linear-gradient(#dcdcdc, #b8b8b8);
  border-color: #666;
}

/* "Opret" linket */
#auth-widget .auth-login a.muted {
  font-size: 12px;
  color: #555;
  margin-left: 6px;
  text-decoration: none;
}
#auth-widget .auth-login a.muted:hover {
  text-decoration: underline;
}

/* === "Log af" knappen (samme som Log ind) === */
#auth-widget .auth-mini #aw-logout {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 300;
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#auth-widget .auth-mini #aw-logout:hover {
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border-color: #05548b;
}

#auth-widget .auth-mini #aw-logout:active {
  background: linear-gradient(#dcdcdc, #b8b8b8);
  border-color: #666;
}

/* === "Opret" knap (samme stil som Log ind) === */
#auth-widget .auth-login a.muted {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 300;
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  color: #000; /* kan ændres hvis du vil have mørkere/lysere tekst */
  transition: all 0.15s ease;
}

#auth-widget .auth-login a.muted:hover {
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border-color: #05548b;
}

#auth-widget .auth-login a.muted:active {
  background: linear-gradient(#dcdcdc, #b8b8b8);
  border-color: #666;
}
#auth-widget .auth-login .btn-mini,
#auth-widget .auth-login a.muted {
  margin-left: -2px;
}

#auth-widget .auth-login a.muted:hover {
  background: linear-gradient(#f6f6f6, #dcdcdc);
  border-color: #05548b;
}

#auth-widget .auth-login a.muted:active {
  background: linear-gradient(#dcdcdc, #b8b8b8);
  border-color: #666;
}


/* === Comment UI layout === */
.comment-list{display:grid;gap:16px}
.comment-item{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:start}
.comment-left{display:flex;flex-direction:column;align-items:center;min-width:0}
.comment-avatar{width:64px;height:64px;border-radius:6px;object-fit:cover;background:#f0f0f0;border:2px solid #111}
.comment-username{margin-top:8px;font-weight:600;font-size:.95rem;text-align:center}
.comment-tagline{margin-top:2px;font-size:.85rem;line-height:1.15;text-align:center;color:#555}
.comment-right{display:grid;gap:8px}
.comment-meta{font-size:.85rem;font-weight:600;opacity:.85}
.comment-body{padding:10px 12px;border:2px solid #111;border-radius:6px;background:#fff;line-height:1.35;white-space:pre-wrap}
@media (max-width:560px){.comment-item{grid-template-columns:64px 1fr;gap:12px}.comment-avatar{width:56px;height:56px}}


/* --- Kommentar layout – visuelt løft --- */

/* Hver kommentar i egen kasse */
.comment-item{
  display: grid;
  grid-template-columns: 160px 1fr;   /* venstresiden bredere */
  gap: 16px;
  align-items: start;

  border: 1px solid #666;             /* kasse rundt om hele sektionen */
  border-radius: 5px;
  background: #f3f3ef;
  padding: 5px 5px;

}

/* Venstreside: avatar + navn + tagline */
.comment-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Avatar – ingen border */
.comment-avatar{
  width: 90px;                         /* lidt større avatar */
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f3ef;
  border: none;                        /* <— fjern evt. eksisterende kant */
margin-top: -5px;
}

/* Brugernavn & tagline */
.comment-username{
  margin-top: 0px;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
opacity: .85;
}
.comment-tagline{
  margin-top: 0px;
  font-size: .65rem;
font-style: italic;
  line-height: 1;
  text-align: center;
  color: #555;
  word-break: break-word;
}

/* Højreside: meta + tekst */
.comment-right{
  display: grid;
color: #555;
  gap: 8px;
  font-size: .85rem;
}
.comment-meta{
  font-size: .75rem;
  font-weight: 600;
color: #8d8d8d;
  opacity: .95;
}

/* Selve kommentarteksten – fjern den gamle kant */
.comment-body{
  padding: 0;                          /* ingen ekstra padding nødvendig */
  border: none;                        /* <— fjern kant her */
  background: transparent;             /* ingen baggrund; kassen omkranser nu det hele */
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Mobil tilpasning */
@media (max-width: 600px){
  .comment-item{
    grid-template-columns: 120px 1fr;  /* stadig lidt bredere venstreside på mobil */
    gap: 12px;
    padding: 12px;
  }
  .comment-avatar{
    width: 64px;
    height: 64px;
  }
}

/* Sørg for, at header ikke klipper */
.mast-top { position: relative; overflow: visible; }

/* Skyer skal dække hele viewport-bredden (ikke bare header-bredden) */

  /* Fade nær højre kant af skærmen */
  --fadeStartPx: 80%;
  --fadeWidth: 60px;
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 var(--fadeStartPx),
    rgba(0,0,0,0) calc(var(--fadeStartPx) + var(--fadeWidth))
  );
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 var(--fadeStartPx),
    rgba(0,0,0,0) calc(var(--fadeStartPx) + var(--fadeWidth))
  );

  /* mål for animationens slutpunkt i px */
  --toX: 100vw;
}

#header-sky{
  position: fixed;
  left: 0; right: 0;
  top: var(--cloudTop, 0px);
  height: var(--cloudH, 120px);
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* under header/nav/indhold */
}

/* Selve skyerne (billeder) */
#header-sky .cloud{
  position: absolute;
  display: block;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.15));
  transform: translateX(var(--fromX, -40vw));
  animation: cloud-drift var(--dur, 90s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

/* Tre baner – justér top/width efter dine billeder */
#header-sky .cloud.c1{ top:  6px; width: 220px; --dur:  80s; --delay:   0s; opacity: .95 }
#header-sky .cloud.c2{ top: 42px; width: 180px; --dur: 105s; --delay: -40s; opacity: .95; }
#header-sky .cloud.c3{ top:  0px; width: 260px; --dur: 130s; --delay: -85s; opacity: .95;  }

/* Animer fra start X til slut X (begge sættes i px af JS) */
@keyframes cloud-drift{
  from { transform: translateX(var(--fromX, -40vw)); }
  to   { transform: translateX(var(--toX, 100vw)); }
}

/* Mindre bevægelse for brugere der ønsker det */
@media (prefers-reduced-motion: reduce){
  #header-sky .cloud{ animation: none; opacity: .7; }
}

/* Lidt tungere skygge i mørkt tema */
@media (prefers-color-scheme: dark){
  #header-sky .cloud{ filter: drop-shadow(0 3px 8px rgba(0,0,0,.28)); }
}

/* Start i pause, helt ude til venstre */
#header-sky.paused .cloud {
  animation-play-state: paused;
  opacity: 0;
  transform: translateX(var(--fromX, -40vw)); /* ← brug startpositionen */
}

/* Fade ind når vi starter */
#header-sky .cloud {
  transition: opacity 2s ease;
}

#header-sky.paused .cloud {
  animation-play-state: paused;
  opacity: 0;
  transform: translateX(var(--fromX, -40vw));
}
#header-sky .cloud {
  transition: opacity 2s ease;
}

/* ===== Responsive header layout ===== */

/* Gør headerens top flex og tillad wrap */
.mast-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;                 /* <— vigtig */
}

/* Logo-wrapper må krympe/udvide */
#logo-wrap{
  flex: 0 1 auto;
  max-width: 60%;                  /* desktop: logo tager højst 60% af bredden */
}

/* Logo-billeder skalerer pænt */
#logo-wrap .logo-img{
  display: inline-block;
  max-width: 100%;
}
#logo-wrap .logo-base,
#logo-wrap .logo-hover{
  width: 100%;
  height: auto;
  display: block;
}

/* Auth-widget må bruge resten, men kan også wrappe */
#auth-widget{
  flex: 1 1 350px;                 /* kan brede sig, men må også gå på ny linje */
  min-width: 10px;
max-width: 240px;
}

/* --- Mobil: stack logo over auth-widget og skaler logoet ned --- */
@media (max-width: 700px){
  .mast-top{
    align-items: flex-start;
    gap: 8px;
  }
  #logo-wrap{
    flex-basis: 100%;
    max-width: 100%;
    text-align: center;
  }
  /* Logo må fylde det meste af skærmen, men ikke mere end viewportens bredde */
  #logo-wrap .logo-img{
    max-width: 85vw;               /* justér 80–90vw efter smag */
  }
  #auth-widget{
    flex-basis: 100%;
  }
}

/* Lidt ekstra robusthed (hvis noget havde sat faste mål) */
@media (max-width: 420px){
  #logo-wrap .logo-img{ max-width: 90vw; }
  #auth-widget{ min-width: 0; }
}
/* === Kompakt login-form i header === */

/* Desktop: lad det fylde normalt */
.auth-login {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Inputs skal ikke være for brede */
.auth-login input {
  flex: 1 1 auto;
  width: 140px;
  padding: 4px 6px;
  font-size: 13px;
}

/* Log ind-knap */
.auth-login .btn-mini {
  padding: 4px 8px;
  font-size: 13px;
  white-space: nowrap;
}

/* Linket “Opret” lille og diskret */
.auth-login .muted {
  font-size: 12px;
  margin-left: 4px;
  color: #777;
}

/* Mobil-tilpasning: stack lodret */
@media (max-width: 700px) {
  .auth-login {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .auth-login input {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
  }
  .auth-login .btn-mini {
    width: auto;
    align-self: center;
  }
  .auth-login .muted {
    text-align: center;
    margin: 0;
  }
}




/* === Header-grid matcher .container og skubber login helt til højre === */
:root{
  --page-max: 1100px;  /* = .container max-width */
  --page-pad: 16px;    /* = .container padding */
}

/* Indre række i den blå header */
.mast > .mast-top{
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  /* vigtigt: brug pladsen mellem logo (venstre) og login (højre) */
  justify-content: flex-start; /* vi bruger margin-left:auto på login i stedet */
  gap: 12px;
}


/* Logo-blokken skal bare stå til venstre */
.mast > .mast-top #logo-wrap{
  flex: 0 0 auto;
}

/* Selve slotten der indeholder login-widgetten */
.mast > .mast-top .auth-mini-slot{
  flex: 0 0 auto;
  margin-left: auto;       /* <-- skubber login helt ud til højre */
  min-width: 0;
  text-align: right;       /* sørg for at indholdet højrejusteres, hvis det wrapper */
}

/* Selve widgetten må ikke fylde 100% eller centreres utilsigtet */
.mast > .mast-top #auth-widget{
  display: inline-block;
}

/* Kompakt login (så det ikke sprænger linjen) */
.auth-login{
  display:flex; align-items:center; gap:6px; line-height:1; margin:0; padding:2px 0;
}
.auth-login input{ width:140px; padding:3px 6px; font-size:13px; }
.auth-login .btn-mini{ padding:4px 8px; font-size:13px; white-space:nowrap; }
.auth-login .muted{ font-size:12px; position:relative; top:-1px; }

/* Mobil: stack under logo inde i samme container */
@media (max-width: 700px){
  .mast > .mast-top{ flex-wrap: wrap; gap:8px; }
  #logo-wrap{ flex-basis:100%; text-align:center; }
  .auth-mini-slot{ flex-basis:100%; margin-left:0; text-align:center; }
  .auth-login{ justify-content:center; }
  .auth-login input{ width:90%; max-width:240px; }
}

.mast-top{ max-width:var(--page-max) !important; padding-left:var(--page-pad) !important; padding-right:var(--page-pad) !important; }
.mast-top{ display:flex !important; }
.mast-top .auth-mini-slot{ margin-left:auto !important; }






/* --- Fast bredde på login-profilkort (avatar + brugernavn + tagline) --- */
#auth-widget .ns-profile {
  width: 220px;              /* fast bredde – justér efter smag */
  max-width: 90vw;           /* så den ikke sprænger layout på små skærme */
  box-sizing: border-box;
}


/* Gør "Opret"-linket identisk med "Log ind"-knappen */
#auth-widget .auth-login a.muted {
  background: #e8e8e8;
  border: 0px solid #ccc;
  border-radius: 4px;
 margin-top: 2px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

/* Hover-effekt identisk med Log ind */
#auth-widget .auth-login a.muted:hover {
  background: #e8e8e8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Fjern grå “muted”-farve fra standard link-stil */
#auth-widget .auth-login a.muted:visited {
  color: #000;
}





#ugens-tagline {
  font-style: italic;
  color: #555;
  margin: 0px 0 0px 0;
  display: block;
  font-size: 13px;
 margin-top: -2px;
}


/* === Kun på "Konkurrencer"-siden === */
#page-konkurrencer img {
  width: 160px !important;       /* justér størrelsen her */
  height: auto !important;       /* bevar proportioner */
}

/* Hvis billederne ligger i et specifikt element, fx .contest-item */
#page-konkurrencer .contest-item img,
#page-konkurrencer .konkurrence img {
  width: 160px !important;
  height: auto !important;
}

/* === Konkurrencer: gør billedet STØRRE og undgå beskæring === */
#page-konkurrencer #konkurrencer-list .comp-card .article-media .ratio {
  width: 100% !important;
  height: 300px !important;       /* øg tallet for større billede (f.eks. 340px) */
  aspect-ratio: auto !important;  /* fjern tvungen 16/9 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}

#page-konkurrencer #konkurrencer-list .comp-card .article-media .ratio img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important; /* vis hele billedet (ingen cropping) */
}

/* Overstyr generel regel der sætter cover på alle comp-card billeder */
#page-konkurrencer .comp-card img {
  object-fit: contain !important;
}

/* (valgfrit) giv billed-kolonnen lidt mere plads */
#page-konkurrencer #konkurrencer-list .comp-card {
  grid-template-columns: 1.2fr 1.8fr !important;
}


/* === Forside: Gør konkurrencens billede (#konk-image) større === */
#box-konkurrencer #konk-image {
  width: 100% !important;       /* gør billedet større (justér til fx 90%) */
  max-width: 240px !important; /* maks bredde – så det ikke sprænger boksen */
  height: auto !important;     /* bevar proportioner */
  display: block !important;   /* centrer med margin auto */
  margin: 8px auto !important; /* lidt luft over/under */
  object-fit: contain !important;
}

/* (valgfrit) lidt ekstra luft i boksen, så billedet får plads */
#box-konkurrencer {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* Frigør højden på "Konkurrencer"-boksen på forsiden */
#box-konkurrencer.ugens,
#box-konkurrencer.ugens.inactive {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;     /* må ikke klippe */
  align-items: flex-start !important;/* ingen vertikal centrering */
  display: flex !important;          /* bevar flex-layout */
}

/* Giv evt. lidt luft omkring billedet/indholdet */
#box-konkurrencer { padding: 8px 0 !important; }


/* Lyrics view (artikel-detail) */
#artikel-detail .art-body.lyrics-view {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

#artikel-detail .lyrics-head{
  display: flex; gap: 12px; align-items: center;
  margin: 4px 0 10px;
}
#artikel-detail .lyrics-head .avatar-frame{
  width: 86px; height: 86px; border-radius: 12px;
  background-image: url('graphic/avatar/background.png');
  background-size: cover; background-repeat: no-repeat;
  border: 2px solid var(--rule);
  overflow: hidden; position: relative; flex: 0 0 auto;
}
#artikel-detail .lyrics-head .avatar-frame img{
  position: absolute; left: 50%; top: 50%;
  width: 87px; height: 87px; transform: translate(-50%,-60%);
  border: none; background: transparent; border-radius: 8px;
}
#artikel-detail .lyrics-head .u-meta .u-name{
  font-weight: 800; font-size: 18px; line-height: 1.1;
}
#artikel-detail .lyrics-head .u-meta .u-sub{
  color:#666; font-size: 13px; margin-top: 2px;
}



#artikel-detail .lyrics-body pre{
  white-space: pre-wrap; line-height: 1.45; font-family: inherit;
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  padding: 10px 12px;
}

/* stil for linkene i brødteksten */
#artikel-detail .lyrics-link{ color:#03568b; text-decoration: underline; }
#artikel-detail .lyrics-link:hover{ text-decoration: none; }

#artikel-detail .art-body.placeholder { display:none; }
#artikel-detail .art-body.loaded { display:block; }

.thing-int{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 8px 0;}




/* --- SAFETY OVERRIDES: Article header always visible --- */
#artikel-detail .art-top,
#artikel-detail .art-title,
#artikel-detail .art-meta,
#artikel-detail .art-top > p {
  display: revert-layer !important;   /* “nulstil” display til UA/forældre */
  visibility: visible !important;
  opacity: 1 !important;
}

/* sørg for at intet forældre-element skjuler dem */
#artikel-detail .art-head *,
#artikel-detail .art-top * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* hvis noget utilsigtet placerer dem bagved */
#artikel-detail .art-head { position: relative; z-index: 1; }






/* Deaktivér CSS-ikon-swap – vi bruger JS */
.nav a[data-route="artikler"]:hover > img,
.nav a[data-route="artikler"].active > img,
.nav a[data-route="tingliste"]:hover > img,
.nav a[data-route="tingliste"].active > img {
  visibility: visible !important;
}
.nav a[data-route="artikler"]::before,
.nav a[data-route="tingliste"]::before {
  content: none !important;
}


/* Initialer som fallback */
.avatar-dot.initials{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:#9CA3AF; /* neutral grå */
}

/* Billede i cirkel (klippet + zoom) */
.avatar-dot img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 35%;
  transform: scale(1.85);
}


/* Overlappende avatar-dot stack */
.mini-avatars {
  display: inline-flex;
  align-items: center;
}
.mini-avatars .avatar-dot {
  position: relative;          /* nødvendig for z-index at virke */
  margin-left: -12px;           /* overlap */
  border: 2px solid #fff;      /* lille outline, så lag kan ses */
  border-radius: 50%;
}
.mini-avatars .avatar-dot:first-child { margin-left: 0; }



/* Skub tallet lidt ind under avatar-stakken */
.intent-count {
  margin-left: -16px;      /* tuck it slightly under the last avatar */
  /* finjustér evt.: -4px … -10px afhængigt af hvor meget overlap du vil have */
}

.intent-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  background: #dddddd; /* grå cirkel */
}


.intent-count.hidden{ display:none; }



/* Standardstil for begge knapper */
.intent-btn {
  background: #04538a !important;     /* blå standardfarve */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* Når man har klikket (aktiv søger/sælger) */
.intent-btn.active {
  background: #7bfe41 !important;         /* grøn aktiv farve */
border-color: #7bfe41 !important;
  color: #FFF;                 /* lidt kontrast til grøn */
}

/* Valgfrit: når man hover over inaktiv knap */
.intent-btn:hover:not(.active) {
  background: #0562a3;         /* en anelse lysere blå */
}

/* placer intents øverst til højre i venstre tekstkolonne */
.card .card-main { position: relative; }
.card .card-main .intent-right{
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}



/* kortet er anker for intents */
.card { position: relative; }

/* intents øverst til højre på kortet — flugter med billedets top */
.card .intent-right{
  position: absolute !important;
  top: 12px;       /* finjustér 10–14px hvis du vil */
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}


/* Placer intents fast i kortets øverste højre hjørne (så de flugter med billedet) */
.card{ position:relative; }
.card .intent-right{
  position:absolute;
  top:12px;          /* finjustér 10–14px hvis nødvendigt */
  right:16px;
  display:inline-flex;
  align-items:center;
  gap:18px;
}


.intent-pop .expire{ font-size:10px; color:rgba(0,0,0,.5); margin-top:1px; }




/* --- Tving kort-layout: billede til venstre, indhold til højre --- */
.card{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start;
  column-gap:16px;
}
.card > div:first-child{          /* billed-holderen */
  flex:0 0 120px;                 /* fast bredde = samme som vi render */
}
.card > div:nth-child(2){         /* højre kolonne (tekst + salgshistorik) */
  flex:1 1 auto;
  display:flex;
  gap:16px;
}







/* Toolbar på én linje */
#page-tingliste .toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;            /* hold alt på én række */
}

/* Filtrene som kompakt inline-gruppe */
#intent-filters{
  display:inline-flex;
  align-items:center;
  gap:16px;
}
#intent-filters label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;          /* undgå linjeskift i "Vis søger"/"Vis sælger" */
}

/* Skub status helt til højre */
#tg-msg{ margin-left:auto; opacity:.75; }



/* SKY-LAGET: ligger helt forrest, men fanger ingen klik */
#header-sky{
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 160px;                 /* eller din højde */
  z-index: 9999;                 /* OVER alt andet visuelt */
  pointer-events: none;          /* ...men klik går igennem */
}
#header-sky *{
  pointer-events: none;          /* Safari/edge cases */
}



/* Sale history rows with avatars */
.card-side .history .hist-row{
  display: flex; align-items: center; gap: 8px; line-height: 1.4;
}
.card-side .history .avatar-dot{
  width: 20px; height: 20px; border-radius: 50%;
  overflow: hidden; border:1px solid rgba(0,0,0,.10); background:#ddd;
  flex: 0 0 20px; box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.card-side .history .avatar-dot img{
  width:100%; height:100%; display:block;
  object-fit: cover; object-position: 50% 35%; transform: scale(1.85);
}
.card-side .history .avatar-dot.initials{
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:#333; background:#e5e7eb;
}





/* === Tættere mellem logo (.mast-top) og menu (nav) === */

/* Din blå header-indmad har 18px padding – skru ned på bunden */
.mast{
  padding-bottom: 0px !important;   /* var 18px */
}

/* Ingen ekstra bund-luft i logo-rækken */
.mast-top{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* For en sikkerheds skyld: ingen bund-margin på logo-wrap */
#logo-wrap{
  margin-bottom: 0 !important;
}

/* Træk menuen helt op til logoet */
header > nav{
  margin-top: 2px !important;       /* sæt 0–8px efter smag */
}

/* (valgfrit) Hvis du vil HELT tæt: */
@media (min-width: 721px){
  .mast{ padding-bottom: 2px !important; }
  header > nav{ margin-top: 0 !important; }
}





/* Fjern lyseblå streger omkring header og menu */
header,
.mast,
header > nav,
.nav {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hvis der ligger en "hr" eller streg mellem header og nav */
header::after,
.mast::after {
  display: none !important;
  content: none !important;
}