/* Belltime Events Calendar — site
   Ét stylesheet, delt af alle sider. Ingen build, ingen framework, ingen
   webfont fra en fremmed vaert (en side, der venter paa Google Fonts, er en
   side, der er langsom for den, der kom fra en soegning). */

:root {
  --bg:        #ffffff;
  --bg-sunk:   #f5f6f8;
  --bg-raise:  #ffffff;
  --ink:       #16181d;
  --ink-soft:  #565b66;
  --ink-faint: #7c828e;
  --line:      #e2e5ea;
  --line-soft: #eceef2;
  --brand:     #2b4a80;
  --brand-ink: #1e3660;
  --accent:    #b4531f;
  --accent-ink:#8f3f14;
  --ok:        #1c6b45;
  --ok-bg:     #eaf6ef;
  --warn:      #8a5a06;
  --warn-bg:   #fdf4e3;
  --bad:       #a02a1e;
  --bad-bg:    #fceeec;
  --radius:    10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14161a;
    --bg-sunk:   #191c21;
    --bg-raise:  #1d2027;
    --ink:       #e8eaee;
    --ink-soft:  #a8aeba;
    --ink-faint: #838a97;
    --line:      #2c3038;
    --line-soft: #23262c;
    --brand:     #8fb0e8;
    --brand-ink: #b0c8f2;
    --accent:    #e5924f;
    --accent-ink:#f0ab72;
    --ok:        #6ecf9f;
    --ok-bg:     #16251d;
    --warn:      #e5b968;
    --warn-bg:   #2a2317;
    --bad:       #f0918a;
    --bad-bg:    #2a1a19;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }

code, kbd, pre { font-family: var(--mono); font-size: 0.9em; }
code {
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 0.08em 0.34em;
}
pre {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

/* ---------- ramme ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-logo img { display: block; }
.site-nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.site-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 22px 72px;
}
.site-container.wide { max-width: 1020px; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  padding: 30px 22px 44px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.site-footer-inner { max-width: 1020px; margin: 0 auto; }
.site-footer p { margin: 0 0 10px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.site-footer nav a { color: var(--ink-soft); }
.site-footer .disclaimer { color: var(--ink-faint); font-size: 13.5px; }

/* ---------- typografi ---------- */

h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 680;
}
h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 38px 0 12px;
  font-weight: 650;
}
h3 { font-size: 17.5px; margin: 26px 0 8px; font-weight: 650; }
p { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 6px; }

.hero { padding: 8px 0 4px; }
.lede, .dek {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.page-head { margin-bottom: 26px; }
.note {
  font-size: 14.5px;
  color: var(--ink-faint);
  line-height: 1.55;
}
.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 620;
  margin: 0 0 10px;
}

.article-body { margin-top: 8px; }
.article-body h2:first-child { margin-top: 26px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 15.5px;
}
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { font-weight: 620; color: var(--ink); background: var(--bg-sunk); }
.table-wrap { overflow-x: auto; }

blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}

/* ---------- knapper og felter ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--brand:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn--accent, .btn--accent:hover, .btn--brand, .btn--brand:hover { color: #14161a; }
}
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--wide { width: 100%; }

label {
  display: block;
  font-size: 14px;
  font-weight: 620;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="number"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
textarea { font-family: var(--mono); font-size: 13.5px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.field { margin-bottom: 14px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.field-row .field { margin-bottom: 0; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.checkline input { width: auto; }
.checkline label { margin: 0; font-weight: 500; color: var(--ink); }

/* ---------- vaerktoejskort ---------- */

.tool {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  padding: 20px;
  margin: 22px 0 26px;
}
.tool-head { margin-bottom: 16px; }
.tool-head h2 { margin: 0 0 4px; font-size: 18px; }
.tool-head p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tool-out { margin-top: 18px; }
.tool-out:empty { display: none; }

.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 15px;
}
.result-list li {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.result-list li:last-child { border-bottom: 0; }
.result-list li:nth-child(even) { background: var(--bg-sunk); }
.result-list .n {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  min-width: 2.2em;
}
.result-list .d { font-variant-numeric: tabular-nums; }
.result-list .tag {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.month-grid {
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.month-grid th {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 7px 2px;
}
.month-grid td {
  text-align: center;
  padding: 7px 2px;
  height: 40px;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-soft);
}
.month-grid td.on {
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 650;
}
.month-grid td.on .dot { display: block; font-size: 8px; line-height: 1; margin-top: 1px; }
.month-grid tr:last-child td { border-bottom: 0; }

.kv { font-size: 15px; margin: 0; }
.kv div {
  display: flex;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-soft); min-width: 190px; flex: 0 0 auto; font-size: 14.5px; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.msg {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  margin: 0 0 14px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.msg:last-child { margin-bottom: 0; }
.msg--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: currentColor; }
.msg--warn { background: var(--warn-bg); color: var(--warn); border-color: currentColor; }
.msg--bad  { background: var(--bad-bg);  color: var(--bad);  border-color: currentColor; }
/* Neutral. Bruges mens en side arbejder - hverken godt, skidt eller advarsel. */
.msg--info { background: var(--line-soft); color: var(--ink-soft); border-color: var(--line); }
.msg strong { font-weight: 650; }
.msg[hidden] { display: none; }

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 660;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  vertical-align: 2px;
}
.badge--pro { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .badge--pro { color: #14161a; } }

/* ---------- pris ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin: 26px 0;
}
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
}
.price-card--pro { border-color: var(--accent); }
.price-card h3 { margin: 0 0 6px; font-size: 17px; }
.price-card .amount {
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.price-card ul { margin: 14px 0 20px; padding-left: 19px; font-size: 15px; }
.price-card ul li { margin-bottom: 7px; }
.price-card .btn { margin-top: auto; }

/* ---------- vejledningssider ---------- */

.related {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.related h2 { margin-top: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }
.related ul { list-style: none; padding: 0; margin: 0; font-size: 15.5px; }
.related li { margin-bottom: 7px; }

.cta-band {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-sunk);
  padding: 18px 20px;
  margin: 30px 0;
  font-size: 15.5px;
}
.cta-band p { margin: 0 0 10px; }
.cta-band p:last-child { margin: 0; }

.index-groups { margin-top: 10px; }
.index-groups h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin-top: 34px; }
.index-groups ul { list-style: none; padding: 0; font-size: 15.5px; }
.index-groups li { margin-bottom: 6px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .lede, .dek { font-size: 17.5px; }
  .site-container { padding: 30px 18px 56px; }
  .kv div { flex-direction: column; gap: 2px; }
  .kv dt { min-width: 0; }
}

/* ---------- forsiden: en pluginside, ikke et vaerktoej ----------
   Omlagt 05-09-2026 efter ejerens beslutning: forsiden skal forklare, vise
   og prissaette - som de store pluginsites goer det. Vaerktoejerne bor paa
   vejledningerne. */

.home { padding-top: 34px; }

.hero--home { max-width: 720px; padding: 10px 0 22px; }
.hero--home h1 { font-size: 42px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 16px; }
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.hero-proof li { margin: 0; padding-left: 16px; position: relative; }
.hero-proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -18px rgba(0, 0, 0, 0.25);
}
.shot figcaption {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 10px 2px 0;
}
.shot--hero { margin: 8px 0 0; }

.section { margin-top: 64px; }
.section-title { margin: 0 0 8px; font-size: 27px; letter-spacing: -0.015em; }
.section-dek { font-size: 17px; color: var(--ink-soft); max-width: 680px; margin: 0 0 24px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  padding: 20px 20px 14px;
}
.feature h3 { margin: 0 0 8px; font-size: 16.5px; }
.feature p { margin: 0 0 6px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px 22px;
  margin-top: 22px;
}

.section--pro {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
}
.pro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}
.pro-split .section-title { font-size: 25px; }
.check-list { list-style: none; padding: 0; margin: 14px 0 18px; font-size: 15.5px; }
.check-list li { padding-left: 26px; position: relative; margin-bottom: 8px; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--ok);
  font-weight: 700;
}
.pro-price { margin: 6px 0 0; font-size: 22px; letter-spacing: -0.01em; }
.pro-price .note { display: inline; margin-left: 6px; }

.compare { margin-top: 18px; font-size: 15.5px; }
.compare th:first-child { width: 60%; }
.compare th, .compare td { text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare th:nth-child(3) { color: var(--accent); }
.compare .yes { color: var(--ok); font-weight: 700; }
.compare .no { color: var(--ink-faint); }
.compare-price td { font-weight: 680; font-size: 17px; border-bottom: 0; background: var(--bg-sunk); }

.faq { margin-top: 18px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer;
  font-weight: 620;
  font-size: 16.5px;
  padding: 12px 0;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 10px;
  color: var(--ink-faint);
  font-size: 20px;
  font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; }

.cta-final {
  margin-top: 64px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 24px 34px;
}
.cta-final h2 { margin: 0 0 10px; font-size: 26px; }
.cta-final p { max-width: 560px; margin: 0 auto 6px; color: var(--ink-soft); }
.cta-final .hero-actions { justify-content: center; }

@media (max-width: 760px) {
  .hero--home h1 { font-size: 30px; }
  .pro-split { grid-template-columns: 1fr; gap: 22px; }
  .section--pro { padding: 24px 18px; }
  .section { margin-top: 48px; }
  .section-title { font-size: 23px; }
  .compare th:first-child { width: auto; }
}