@charset "UTF-8";
/* ==========================================================================
   nl-knaek.css – Knæk Cancer-billetten i forsidens hero (19-10-2026)

   En lys billet oven på serverbilletten i heroens højre side, revet sammen med
   den (perforering + halvcirkler), så de to står som ét kort. Markup:
   partials/knaekBillet.ejs, adfærd (tælleværk, I år/Alle år, live): /scripts/
   nl-knaek.js. Rød = Knæk Cancers egen #DF1A11 (deres vejledning 2026).

   Afløser den røde blok under tapen (19-10-2026, samme dag – brugeren ville have
   det "pænere … i toppen af forsiden"). De gamle .nlF-knaek-regler i
   nl-forside.css bruges ikke længere.

   Linkes fra views/index.ejs med ?v= – bump den ved hver ændring (Apache
   cacher /styles i 30 dage). Husregler fra nl-base.css gælder: ingen 1px-
   kanter om kort, ingen emoji, ingen glow.
   ========================================================================== */
:root {
    --nlKC-roed: #df1a11;
    --nlKC-roed-tekst: #b5221a;      /* lille rød tekst på papiret – #df1a11 er for lys i 13-15 px */
    --nlKC-papir: var(--nlA-creme, #fff2e4);
    --nlKC-blaek: var(--nlA-blaek, #150a0e);
    --nlKC-glid: cubic-bezier(.2, .9, .25, 1);
}

/* ---------- Heroen ----------------------------------------------------------
   Med billetten er højre kolonne højere end plakaten. Med heroens align-items: end
   blev plakaten så skubbet ned, og der kom tomt rum under menuen igen (det rum
   nl-top.css fjernede 06-10-2026). Begge kolonner starter derfor fra toppen. */
@media (min-width: 768px) {
    .nlA-hero-indhold.med-knaek { align-items: start; }
}

/* Serverbilletten under Knæk Cancer-billetten: lige topkanter + halvcirkler, hvor
   perforeringen er. Samme teknik som gæstestumpen i nl-top.css (.med-stump). */
.nlA-billet-wrap.med-knaek .nlA-billet {
    border-radius: 0 0 24px 24px;
    -webkit-mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
}
/* Gæstestumpen hænger OGSÅ under: halvcirkler i alle fire hjørner. Fire huller kan ikke
   lægges sammen som to halve lag – de skæres sammen (intersect), ét hul pr. lag. */
.nlA-billet-wrap.med-knaek.med-stump .nlA-billet {
    border-radius: 0;
    -webkit-mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px),
                  radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px),
                  radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px),
                  radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px);
    -webkit-mask-composite: source-in;
            mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px),
                  radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px),
                  radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px),
                  radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px);
            mask-composite: intersect;
}

/* ---------- Billetten --------------------------------------------------------- */
.nlKC {
    position: relative;
    padding: 20px 24px 22px;
    border-radius: 24px 24px 0 0;
    background: var(--nlKC-papir); color: var(--nlKC-blaek);
    font-family: var(--nlA-tekst);
    -webkit-mask: radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
}
/* Perforeringen – samme streg som gæstestumpens */
.nlKC::after {
    content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(21, 10, 14, .32) 0 7px, transparent 7px 13px);
}
.nlKC :focus-visible { outline-color: var(--nlKC-blaek); }

.nlKC-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nlKC-titel {
    margin: 0; display: inline-flex; align-items: center; gap: 8px;
    font: 800 15.5px/1 var(--nlA-tal); letter-spacing: .01em; color: var(--nlKC-blaek);
}
.nlKC-titel svg { width: 20px; height: 20px; color: var(--nlKC-roed); }
.nlKC-live {
    display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px;
    background: rgba(223, 26, 17, .1); color: var(--nlKC-roed-tekst);
    font: 800 13px/1 var(--nlA-tal); letter-spacing: .03em;
}
.nlKC-live[hidden] { display: none; }
.nlKC-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--nlKC-roed); animation: nlKC-puls 1.8s ease-out infinite; }
@keyframes nlKC-puls {
    0% { box-shadow: 0 0 0 0 rgba(223, 26, 17, .55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(223, 26, 17, 0); }
}

/* "+250 kr" når en ny donation kommer ind (nl-knaek.js lægger den her og fjerner den igen).
   Den stiger op under Live-mærket og holder sig inden for billetten: billettens maske
   (halvcirklerne) skærer alt af, der kommer uden for kanten. */
.nlKC-plus {
    position: absolute; right: 6px; top: 38px; z-index: 2; pointer-events: none;
    padding: 5px 10px; border-radius: 999px; background: var(--nlKC-roed); color: #fff;
    font: italic 800 18px/1 var(--nlA-tal); white-space: nowrap;
    box-shadow: 0 8px 18px rgba(223, 26, 17, .35);
    animation: nlKC-stig 2.6s var(--nlKC-glid) forwards;
}
@keyframes nlKC-stig {
    0% { opacity: 0; transform: translateY(14px) scale(.8); }
    12% { opacity: 1; transform: translateY(0) scale(1.06); }
    22% { transform: translateY(0) scale(1); }
    75% { opacity: 1; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-22px); }
}

/* ---------- Tallet: tælleværket -----------------------------------------------
   Hver cifferkolonne (.nlKC-kol) er et vindue på 1em med et bånd (.nlKC-baand) af
   cifrene 0-9 tre gange. nl-knaek.js flytter båndet. Uden JS står tallet som tekst.
   padding/margin på kolonnen: vinduet er lidt bredere end cifferet, så den kursive
   hældning ikke skæres af, uden at tallet bliver bredere. */
.nlKC-tal {
    margin: 12px 0 0; display: flex; align-items: baseline; gap: 8px;
    font-family: var(--nlA-tal); font-style: italic; font-weight: 800; line-height: 1;
}
.nlKC-tal b {
    display: inline-flex; font-weight: 800; font-size: 88px; letter-spacing: -.03em;
    color: var(--nlKC-roed); font-variant-numeric: tabular-nums;
}
.nlKC-tal > span { font-size: 30px; color: var(--nlKC-blaek); }
.nlKC-kol {
    position: relative; display: inline-block; height: 1em; overflow: hidden;
    padding: 0 .12em; margin: 0 -.12em;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.nlKC-baand { display: block; will-change: transform; }
.nlKC-baand > span { display: block; height: 1em; line-height: 1; text-align: center; }
.nlKC-sep { display: inline-block; }

.nlKC-linje {
    display: grid; margin: 2px 0 0;
    font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 64%;
    font-size: 34px; line-height: .92; letter-spacing: -.005em; word-spacing: .08em; text-transform: uppercase;
    color: var(--nlKC-blaek);
}

/* De to visninger ligger oven i hinanden og bytter plads med en lille glidning */
.nlKC-linje > span, .nlKC-etiketter > span {
    grid-area: 1 / 1;
    transition: opacity .35s ease .12s, transform .45s var(--nlKC-glid) .12s, visibility 0s;
}
.nlKC[data-visning="aar"] [data-vis="alle"], .nlKC[data-visning="alle"] [data-vis="aar"] {
    opacity: 0; visibility: hidden; transform: translateY(.4em);
    transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}

/* ---------- Måleren ---------------------------------------------------------
   To stykker, der glider mellem visningerne:
     I år:     rød op til målet + stribet rød for det, der er givet ud over målet
     Alle år:  blæk for tidligere år + rød for i år                                  */
.nlKC-maaler { position: relative; height: 12px; margin: 18px 0 0; border-radius: 6px; background: rgba(21, 10, 14, .1); }
.nlKC-maaler-a, .nlKC-maaler-b { position: absolute; top: 0; bottom: 0; }
.nlKC-maaler-a {
    left: 0; width: var(--aar-a); border-radius: 6px 0 0 6px; background: var(--nlKC-roed);
    transition: width .8s var(--nlKC-glid), background-color .45s ease;
}
.nlKC-maaler-b {
    left: var(--aar-a); width: var(--aar-b); border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(-45deg, var(--nlKC-roed) 0 5px, #f2685f 5px 10px);
    box-shadow: inset 2px 0 0 var(--nlKC-papir);        /* skillestregen ved målet */
    transition: left .8s var(--nlKC-glid), width .8s var(--nlKC-glid), background .45s ease;
}
.nlKC-maaler-maal {
    position: absolute; top: -5px; bottom: -5px; left: var(--maal); width: 3px; margin-left: -1.5px;
    border-radius: 2px; background: var(--nlKC-blaek);
    transition: left .8s var(--nlKC-glid), opacity .3s ease;
}
.nlKC[data-visning="alle"] .nlKC-maaler-a { width: var(--alle-a); background: var(--nlKC-blaek); }
.nlKC[data-visning="alle"] .nlKC-maaler-b { left: var(--alle-a); width: var(--alle-b); background: var(--nlKC-roed); }
.nlKC[data-visning="alle"] .nlKC-maaler-maal { opacity: 0; }

/* Første visning: måleren fyldes fra 0, det over målet kommer bagefter, og målstregen hopper */
.nlKC.er-nul .nlKC-maaler-a, .nlKC.er-nul .nlKC-maaler-b { width: 0; transition: none; }
.nlKC.er-nul .nlKC-maaler-maal { opacity: 0; transition: none; }
.nlKC.er-fylder .nlKC-maaler-a { transition-duration: 1.1s; }
.nlKC.er-fylder .nlKC-maaler-b { transition-duration: .7s; transition-delay: 1.05s; }
.nlKC.er-fylder .nlKC-maaler-maal { animation: nlKC-hop .5s cubic-bezier(.2, 1.6, .4, 1) .95s both; }
@keyframes nlKC-hop { 0% { opacity: 0; transform: scaleY(.3); } 60% { opacity: 1; transform: scaleY(1.45); } 100% { opacity: 1; transform: none; } }

.nlKC-etiketter { display: grid; margin: 9px 0 0; font: 600 14.5px/1.3 var(--nlA-tal); color: rgba(21, 10, 14, .66); }
.nlKC-etiketter > span { display: flex; justify-content: space-between; gap: 12px; }
.nlKC-etiketter b { font-weight: 800; color: var(--nlKC-blaek); font-variant-numeric: tabular-nums; }
.nlKC-etiketter b.er-ny { animation: nlKC-ny 2s ease; }
@keyframes nlKC-ny { 0%, 35% { color: var(--nlKC-roed); } }

/* ---------- Bunden: skifteren + Donér --------------------------------------- */
.nlKC-bund { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; }
.nlKC-skift {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    padding: 4px; border-radius: 999px; background: rgba(21, 10, 14, .08);
}
.nlKC-skift[hidden] { display: none; }
/* Pillen, der glider hen under den valgte knap */
.nlKC-skift::before {
    content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    border-radius: 999px; background: var(--nlKC-blaek);
    transition: transform .4s var(--nlKC-glid);
}
.nlKC[data-visning="alle"] .nlKC-skift::before { transform: translateX(100%); }
.nlKC-skift button {
    position: relative; z-index: 1; min-height: 36px; padding: 0 15px; border: 0; border-radius: 999px;
    background: transparent; color: rgba(21, 10, 14, .72); cursor: pointer; white-space: nowrap;
    font: 800 15px/1 var(--nlA-tal); letter-spacing: .01em;
    transition: color .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.nlKC-skift button:hover { color: var(--nlKC-blaek); }
.nlKC-skift button[aria-pressed="true"] { color: var(--nlKC-papir); }

.nlKC-doner {
    position: relative; isolation: isolate; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
    color: #fff; text-decoration: none; white-space: nowrap;
    font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 78%;
    font-size: 18px; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
    transition: transform .2s ease;
}
.nlKC-doner::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; transform: skewX(-8deg);
    background: var(--nlKC-roed); box-shadow: 0 10px 22px rgba(223, 26, 17, .32);
    transition: filter .2s, box-shadow .2s;
}
.nlKC-doner:hover { transform: translateY(-2px); color: #fff; }
.nlKC-doner:hover::before { filter: brightness(1.08); box-shadow: 0 14px 28px rgba(223, 26, 17, .45); }
.nlKC-doner svg { width: 18px; height: 18px; transition: transform .2s; }
.nlKC-doner:hover svg { transform: translateX(3px); }
.nlKC-doner:focus-visible { outline: none; }
.nlKC-doner:focus-visible::before { outline: 3px solid var(--nlKC-blaek); outline-offset: 3px; }

.nlKC-mp { margin: 12px 0 0; font: 600 13.5px/1.35 var(--nlA-tal); color: rgba(21, 10, 14, .64); }
.nlKC-mp b { font-weight: 800; color: var(--nlKC-blaek); }

/* ---------- Bredder ----------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Højre kolonne er 330 px her (nl-top.css) */
    .nlKC { padding: 18px 20px 20px; }
    .nlKC-tal b { font-size: 76px; }
    .nlKC-tal > span { font-size: 26px; }
    .nlKC-linje { font-size: 30px; }
    .nlKC-skift button { padding: 0 12px; }
    .nlKC-doner { padding: 0 16px; }
}
@media (max-width: 639px) {
    .nlKC { padding: 18px 18px 20px; border-radius: 22px 22px 0 0; }
    .nlA-billet-wrap.med-knaek .nlA-billet { border-radius: 0 0 22px 22px; }
    .nlKC-tal b { font-size: clamp(66px, 21vw, 88px); }
    .nlKC-tal > span { font-size: 27px; }
    .nlKC-linje { font-size: 31px; }
}
@media (max-width: 359px) {
    .nlKC-bund { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .nlKC-live i, .nlKC-plus, .nlKC.er-fylder .nlKC-maaler-maal, .nlKC-etiketter b.er-ny { animation: none; }
}