:root{
  --cal-cream:#FCF3EA; --cal-paper:#fffaf3; --cal-ink:#4D4C32; --cal-orange:#D1803F;
  --cal-green:#73764A; --cal-blue:#24638a; --cal-purple:#8060a0; --cal-red:#bd5945;
  --cal-gold:#c9972d; --cal-line:#DCC8B0;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cal-cream);color:var(--cal-ink);font-family:'PT Serif',Arial,Helvetica,sans-serif}
button,input{font:inherit}
.cal-wrap{max-width:1500px;margin:auto;padding:0 34px 45px}
.hero{padding-top:8px}
.hero img{width:100%;display:block;max-height:300px;object-fit:cover;object-position:center top;border-bottom:1px solid #d6c3ad}
.brandline{display:flex;align-items:end;justify-content:center;gap:16px;padding:22px 0 8px}
.kicker{font-size:clamp(30px,4vw,58px);font-weight:900;letter-spacing:.02em;color:var(--cal-orange);line-height:.95}
.title{font-size:clamp(38px,5.5vw,76px);font-weight:900;letter-spacing:.015em;line-height:.9;text-align:center}
.subtitle{text-align:center;font-size:25px;color:var(--cal-green);margin:10px 0 28px}
.toprow{display:flex;justify-content:flex-end;margin-bottom:18px}
.submit{border:0;background:var(--cal-orange);color:#fff;font-weight:700;border-radius:6px;padding:12px 18px;cursor:pointer;flex-shrink:0;white-space:nowrap;align-self:flex-start}
.cal-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:24px 0}
.categories{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0;width:50%}
.cat{min-height:52px;border:1.5px solid currentColor;background:transparent;border-radius:7px;font-weight:800;cursor:pointer;padding:10px 14px;width:100%;white-space:normal;overflow-wrap:break-word;line-height:1.15}
.cat.active{background:currentColor;color:white}
.cat[data-cat="Alle"]{color:var(--cal-orange)} .cat[data-cat="Sport"]{color:var(--cal-green)}
.cat[data-cat="Voksenkultur"]{color:var(--cal-blue)} .cat[data-cat="Børnekultur"]{color:var(--cal-purple)}
.cat[data-cat="Lokalsamfund"]{color:var(--cal-red)} .cat[data-cat="Loppemarked"]{color:var(--cal-gold)}
.cat[data-cat="Andet"]{color:#786f61}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 12px}
.sectionhead h2{font-size:21px;margin:0;letter-spacing:.02em}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.control{border:1px solid var(--cal-line);background:var(--cal-paper);padding:10px 14px;border-radius:7px;cursor:pointer;font-weight:700;color:var(--cal-green)}
.control.active{color:var(--cal-orange);border-color:var(--cal-orange)}
.search{border:1px solid var(--cal-line);background:var(--cal-paper);padding:11px 14px;border-radius:7px;min-width:240px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{position:relative;background:var(--cal-paper);border:1px solid var(--cal-line);border-radius:10px;padding:0 12px 12px;overflow:hidden;min-height:0}
.card.cat-sport .datebox{border-color:var(--cal-green)!important}
.card.cat-voksenkultur .datebox{border-color:var(--cal-blue)!important}
.card.cat-børnekultur .datebox{border-color:var(--cal-purple)!important}
.card.cat-lokalsamfund .datebox{border-color:var(--cal-red)!important}
.card.cat-loppemarked .datebox{border-color:var(--cal-gold)!important}
.card.cat-andet .datebox{border-color:#786f61!important}
.card .datebox{position:absolute;left:12px;top:10px;z-index:2;background:transparent;color:var(--cal-orange);padding:0;border-radius:0;align-items:flex-start;margin:0;text-align:left}
.card .datebox .day{font-size:30px;line-height:.95;font-weight:900}
.card .datebox .mon{font-size:14px;line-height:1.1;font-weight:900}
.card .datebox .dow{font-size:10px;line-height:1.2;color:var(--cal-ink);margin-top:5px;font-weight:800}
.card .thumb{height:110px;margin:0 -12px 10px -12px;overflow:hidden;background:#eadcca;position:relative;display:flex;align-items:flex-end}
.card .thumb{background:linear-gradient(135deg,#e9d9c4,#f3e9dc)}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(35,25,12,.62),rgba(35,25,12,0) 70%)}
.card .thumb h3{position:relative;z-index:2;color:#fff;font-size:18px;line-height:1.2;margin:0;padding:10px 12px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.card .meta{font-size:14px;margin:4px 0;color:#4e473f}
.card .desc{font-size:14px;line-height:1.35;color:#514a42;margin:6px 0 10px}
.card .tag{display:inline-block;border:0;border-radius:5px;padding:4px 8px;font-size:10px;font-weight:900;background:#eadbc8;color:var(--cal-ink)!important}
.card a{font-size:12px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.cal-wrap{padding:0 14px 30px}.hero img{max-height:180px}.grid{grid-template-columns:1fr}.brandline{flex-direction:column;align-items:center;gap:5px}.grid{grid-template-columns:1fr}.sectionhead{align-items:flex-start;flex-direction:column}.search{width:100%;min-width:0}.categories{gap:8px;width:100%}.cat{flex-basis:calc(50% - 8px)}footer{grid-template-columns:1fr 1fr}}


@media(max-width:750px){
  .cal-wrap{padding:0 12px 28px}
  .hero img{max-height:165px;object-fit:cover}
  .brandline{flex-direction:column;align-items:center;gap:3px;padding:17px 0 5px}
  .kicker{font-size:40px}
  .title{font-size:44px;line-height:.92}
  .subtitle{font-size:20px;margin:8px 0 18px}
  .toprow{justify-content:center}
  .submit{width:100%;max-width:330px}
  .categories{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    margin:0 -12px 22px;padding:0 12px 7px;gap:8px;
    scrollbar-width:none
  }
  .categories::-webkit-scrollbar{display:none}
  .cat{flex:0 0 auto;min-height:45px;padding:9px 13px;font-size:12px}
  .sectionhead{gap:10px;margin-bottom:12px}
  .sectionhead h2{font-size:18px}
  .controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .control{font-size:11px;padding:9px 7px}
  .search{grid-column:1/-1;width:100%;min-width:0;font-size:14px}
  .grid{grid-template-columns:1fr;gap:12px}
  .card{min-height:0;padding:0 13px 14px}
  .card .thumb{height:112px;margin:0 -13px 11px 88px}
  .card .datebox{left:12px;top:13px}
  .card .datebox .day{font-size:32px}
  .card .datebox .mon{font-size:14px}
  .card .datebox .dow{font-size:10px;margin-top:5px}
  .card h3{font-size:20px;padding-right:22px;margin-bottom:7px}
  .card .meta{font-size:13px}
  .card .desc{font-size:13px;margin:6px 0 9px}
  footer{grid-template-columns:1fr 1fr;gap:10px;font-size:12px;padding:13px}
  footer strong{font-size:13px}
}


.title{display:flex;flex-direction:column;align-items:center;line-height:.9}
.title .line1,.title .line2{display:block}
.title .line1{font-size:clamp(42px,5vw,70px)}
.title .line2{font-size:clamp(48px,6vw,82px)}
.calendar{padding:20px}
.calgrid{gap:8px}
.daycell{min-height:135px;padding:9px}
.eventdot{display:block;margin-top:6px;padding:5px 7px;background:#efe1d2;color:var(--cal-ink);font-size:11px;line-height:1.2;text-decoration:none}
.eventdot:hover{background:#e4c7a8}
@media(max-width:750px){
 .title .line1{font-size:44px}.title .line2{font-size:54px}
 .calendar{overflow-x:auto;padding:10px}
 .calgrid{min-width:700px}
}


/* V9.1 — kalender geometri */
#calendar{width:100%;overflow:hidden}
#calendar .calgrid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  width:100%;
}
#calendar .dowh{
  min-width:0;
  text-align:center;
  font-size:11px;
  font-weight:900;
  padding:8px 2px;
  color:var(--cal-ink);
}
#calendar .daycell{
  appearance:none;
  width:100%;
  min-width:0;
  min-height:108px;
  border:1px solid #e7dacb;
  border-radius:6px;
  padding:7px;
  background:#fffdf8;
  color:var(--cal-ink);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
}
#calendar .daycell:hover{border-color:var(--cal-orange)}
#calendar .daycell .num{font-size:14px;font-weight:900;margin-bottom:4px}
#calendar .eventdot{
  display:block;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
  line-height:1.2;
  padding:4px 5px;
  margin-top:4px;
  border-radius:4px;
  background:#f0e2d3;
}
#calendar .control{min-width:42px}
#calendar #agenda{width:100%}
@media(max-width:750px){
  #calendar{padding:10px}
  #calendar .calgrid{gap:3px}
  #calendar .dowh{font-size:9px;padding:6px 0}
  #calendar .daycell{
    min-height:68px;
    padding:5px 3px;
    border-radius:4px;
  }
  #calendar .daycell .num{font-size:12px;margin-bottom:2px}
  #calendar .eventdot{
    font-size:8px;
    padding:3px 3px;
    margin-top:2px;
  }
}


/* V9.2 — hele kalenderen skal kunne ses */
#calendar {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#calendar .calgrid {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}
#calendar .daycell {
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
@media (max-width:750px) {
  #calendar { padding:4px !important; }
  #calendar .calgrid { gap:2px !important; }
  #calendar .dowh {
    font-size:8px !important;
    padding:5px 0 !important;
  }
  #calendar .daycell {
    min-height:60px !important;
    padding:4px 2px !important;
  }
  #calendar .eventdot {
    font-size:7px !important;
    line-height:1.1 !important;
    padding:2px !important;
    margin-top:2px !important;
  }
}


/* V9.3 — final visual fixes */
.card{position:relative}
.card .datebox{
  position:absolute!important;right:10px!important;top:10px!important;left:auto!important;
  background:#f3e7d7!important;color:var(--cal-ink)!important;border:1px solid var(--cal-orange)!important;
  border-radius:6px!important;padding:5px 8px!important;margin:0!important;
  align-items:center!important;text-align:center!important;min-width:48px!important;line-height:1!important;
}
.card .datebox .day{font-size:22px!important;line-height:1!important}
.card .datebox .mon{font-size:11px!important;line-height:1.1!important;font-weight:900!important}
.card .datebox .dow{font-size:9px!important;line-height:1.1!important;margin-top:2px!important;color:var(--cal-ink)!important}
.card h3{padding-right:70px!important}

/* Selected category: retain category color as fill, use beige text. */
.cat.active{color:var(--cal-cream)!important}
.cat[data-cat="Alle"].active{background:var(--cal-orange)!important}
.cat[data-cat="Sport"].active{background:var(--cal-green)!important}
.cat[data-cat="Voksenkultur"].active{background:var(--cal-blue)!important}
.cat[data-cat="Børnekultur"].active{background:var(--cal-purple)!important}
.cat[data-cat="Lokalsamfund"].active{background:var(--cal-red)!important}
.cat[data-cat="Loppemarked"].active{background:var(--cal-gold)!important}
.cat[data-cat="Andet"].active{background:#786f61!important}

/* Calendar sizing */
#calendar,#calendar .calgrid{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
#calendar .calgrid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}
#calendar .daycell{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
@media(max-width:750px){
 .card .datebox{right:8px!important;top:8px!important;min-width:44px!important;padding:4px 6px!important}
 .card .datebox .day{font-size:20px!important}
 .card h3{padding-right:62px!important}
}


/* FINAL: Tråden colors */
.title .line1{color:var(--cal-green)!important}
.title .line2{color:var(--cal-orange)!important}

/* Event date badge */
.card .datebox{
  position:absolute!important;
  right:10px!important;
  top:10px!important;
  left:auto!important;
  background:#f3e7d7!important;
  color:var(--cal-ink)!important;
  border:1px solid var(--cal-orange)!important;
  border-radius:6px!important;
  padding:5px 8px!important;
  margin:0!important;
  text-align:center!important;
  align-items:center!important;
  min-width:48px!important;
  z-index:4!important;
}
.card .datebox .day{font-size:22px!important;line-height:1!important}
.card .datebox .mon{font-size:11px!important;line-height:1.1!important;font-weight:900!important}
.card .datebox .dow{font-size:9px!important;line-height:1.1!important;margin-top:2px!important}
.card h3{padding-right:72px!important}

/* Category-selected buttons: beige text on category-color fill */
.cat.active{color:var(--cal-cream)!important}
.cat[data-cat="Alle"].active{background:var(--cal-orange)!important}
.cat[data-cat="Sport"].active{background:var(--cal-green)!important}
.cat[data-cat="Voksenkultur"].active{background:var(--cal-blue)!important}
.cat[data-cat="Børnekultur"].active{background:var(--cal-purple)!important}
.cat[data-cat="Lokalsamfund"].active{background:var(--cal-red)!important}
.cat[data-cat="Loppemarked"].active{background:var(--cal-gold)!important}
.cat[data-cat="Andet"].active{background:#786f61!important}

/* Calendar: always fit all seven days */
#calendar{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
#calendar .calgrid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;width:100%!important;min-width:0!important;gap:5px!important}
#calendar .daycell,#calendar .calblank{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
#calendar .daycell{min-height:105px!important}
.calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
@media(max-width:750px){
 .card .datebox{right:8px!important;top:8px!important;min-width:44px!important;padding:4px 6px!important}
 .card .datebox .day{font-size:20px!important}
 .card h3{padding-right:62px!important}
 #calendar{padding:4px!important}
 #calendar .calgrid{gap:2px!important}
 #calendar .dowh{font-size:8px!important;padding:5px 0!important}
 #calendar .daycell{min-height:62px!important;padding:4px 2px!important}
 #calendar .eventdot{font-size:7px!important;padding:2px!important}
}


.title .line1{color:var(--cal-orange)!important}
.title .line1 .hash2700{color:var(--cal-green)!important}
.title .line1 .faelles{color:var(--cal-orange)!important}
.title .line2{color:var(--cal-orange)!important;text-transform:none!important}

/* Teknisk rettelse: undgå at sitets generelle "article{display:grid}"-regel
   (fra Overblik-siden) lækker ind i kalenderens egne .card-elementer,
   som selv er <article>-tags. Kalenderens kort skal bare stakke normalt. */
.card{display:block!important}

/* Ny titel-stil: "#2700 Fælleskalenderen" på én linje, højrestillet */
.brandline{display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:baseline!important;padding:22px 0 8px!important;gap:0!important}
.brandtitle{font-size:clamp(28px,4vw,46px)!important;font-weight:900!important;letter-spacing:.01em!important;text-align:left!important;line-height:1!important}
.brandtitle .hash2700{color:var(--cal-green)!important}
.brandtitle .rest{color:var(--cal-orange)!important}
@media(max-width:750px){
  .brandtitle{font-size:28px!important}
}

/* Endelig rettelse: kategori-gitteret skal blive inden for kolonnens
   bredde på mobil, uden negativ margin fra ældre regler. */
@media(max-width:750px){
  .categories{margin:0!important;padding:0!important;width:100%!important;overflow:visible!important;flex-wrap:wrap!important}
  .cat{font-size:11px!important}
}

/* Værktøjslinje (kategorier + indsend-knap) stakkes på mobil */
@media(max-width:750px){
  .cal-toolbar{flex-direction:column;align-items:stretch;gap:14px}
  .submit{align-self:center}
}

/* ENDELIG ombygning af korts-layout: dato+titel på samme linje, ingen
   brunlig baggrund, kategori som farvet mærkat under titlen, og
   "SE ARRANGEMENT" fastgjort nederst i kortet. */
.card{
  position:relative!important;
  background:var(--cal-paper)!important;
  border:1px solid var(--cal-line)!important;
  border-radius:9px!important;
  padding:9px!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:visible!important;
}
.card-top{display:flex!important;flex-direction:row-reverse!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;margin-bottom:6px!important}
.card .datebox{
  position:static!important;
  flex-shrink:0!important;
  background:#f3e7d7!important;
  color:var(--cal-ink)!important;
  border:1px solid var(--cal-orange)!important;
  border-radius:6px!important;
  padding:4px 7px!important;
  margin:0!important;
  text-align:center!important;
  min-width:42px!important;
  line-height:1!important;
}
.card .datebox .day{font-size:18px!important;line-height:1!important;display:block!important}
.card .datebox .mon{font-size:9px!important;line-height:1.1!important;font-weight:900!important;display:block!important}
.card .datebox .dow{font-size:9px!important;line-height:1.1!important;margin-top:2px!important;display:block!important;color:var(--cal-ink)!important}
.card-top h3{margin:0!important;padding:2px 0 0!important;font-size:21px!important;line-height:1.22!important;color:var(--cal-orange)!important;font-weight:700!important;text-align:left!important}
.card .tag{display:inline-block!important;border:0!important;border-radius:5px!important;padding:4px 8px!important;font-size:11px!important;font-weight:900!important;color:#fff!important;margin:0 0 8px!important;align-self:flex-start!important}
.card .meta{font-size:15px!important;margin:4px 0!important;color:#4e473f!important}
.card .desc{font-size:15px!important;line-height:1.4!important;color:#514a42!important;margin:6px 0 0!important}
.card-footer{margin-top:auto!important;padding-top:12px!important}
.card-footer a{color:var(--cal-orange)!important;font-weight:800!important;text-decoration:none!important}

.card.cat-sport .datebox{border-color:var(--cal-green)!important}
.card.cat-voksenkultur .datebox{border-color:var(--cal-blue)!important}
.card.cat-børnekultur .datebox{border-color:var(--cal-purple)!important}
.card.cat-lokalsamfund .datebox{border-color:var(--cal-red)!important}
.card.cat-loppemarked .datebox{border-color:var(--cal-gold)!important}
.card.cat-andet .datebox{border-color:#786f61!important}

/* Hver kategori-mærkat farves efter sin EGEN kategori, ikke kortets første */
.tag-sport{background:var(--cal-green)!important}
.tag-voksenkultur{background:var(--cal-blue)!important}
.tag-børnekultur{background:var(--cal-purple)!important}
.tag-lokalsamfund{background:var(--cal-red)!important}
.tag-loppemarked{background:var(--cal-gold)!important}
.tag-andet{background:#786f61!important}

/* Ombygning af event-kort: 2/3 størrelse, max 3 linjers titel med fast
   højde (for symmetri), afgrænset streg under titel-området, større
   tekst med tæt linjeafstand på lokation/tid/beskrivelse, max 3 linjers
   beskrivelse, og "SE ARRANGEMENT" altid fastgjort nederst. */
.card{
  padding:6px!important;
}
.card-top{
  align-items:flex-start!important;
  gap:6px!important;
  margin-bottom:0!important;
}
.card{
  padding:6px!important;
}
.card .datebox{
  padding:3px 5px!important;
  min-width:34px!important;
}
.card .datebox .day{font-size:15px!important}
.card .datebox .mon{font-size:8px!important}
.card .datebox .dow{font-size:8px!important}
.card-top h3{
  font-size:21px!important;
  line-height:1.2!important;
  height:calc(21px * 1.2 * 3)!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
}
.title-divider{
  height:1px;
  background:var(--cal-line);
  margin:0 10px 1px 10px;
}
.card .tag{
  font-size:10px!important;
  padding:2px 6px!important;
  margin:0 0 1px!important;
}
.card .meta{
  font-size:16px!important;
  line-height:.1!important;
  margin:2px 0!important;
}
.card .desc{
  font-size:16px!important;
  line-height:1.15!important;
  height:calc(16px * 1.15 * 3)!important;
  color:#514a42!important;
  margin:2px 0 0!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.card-footer{
  margin-top:auto!important;
  padding-top:3px!important;
}

/* Sidste finjustering af korts-højde */
.card{padding:4px 6px!important}
.card-footer{padding-top:2px!important}

/* Kategori-mærkater skal stå på samme linje, ikke stables (kortet er et
   flex-layout i kolonne, så mærkaterne skal samles i én fælles wrapper). */
.tags-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  margin:0 0 3px!important;
  min-height:32px!important;
}
.tags-row .tag{
  margin:0!important;
}

/* Sikker linjeafstand på lokation/tid, så de ikke visuelt overlapper
   hinanden (0,1 var for stram og fik teksten til at ligge oven i hinanden).
   Kortene må gerne blive en anelse højere for at give plads til dette. */
.card .meta{
  line-height:1.2!important;
  margin:0 0 1px!important;
}