/* GLOBAL RESET */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #fafafa;
    color: #222;
}

/* ------------------------------------------------------ */
/* FULL BANNER (always visible at top of page)            */
/* ------------------------------------------------------ */
.floral-zone {
    background-image: url("images/flowerbg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.banner {
    min-height: 0;
    background: transparent;
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 30px clamp(10px, 2.5vw, 24px) 24px;
    position: relative;
}

.banner-link {
    display: block;
    width: min(1220px, 100%);
}


/* ------------------------------------------------------ */
/* TOPBANNER MED ØRNE — HJØRNER PÅ STORE SKÆRME          */
/* ------------------------------------------------------ */
.banner-row {
    width: min(1220px, 100%);
    display: block;
    margin: 0 auto;
}

.banner-row .banner-link {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    line-height: 0;
}

/*
 * Ørnene er forankret til selve bannerområdet — ikke til billedets grid.
 * Dermed ligger de 5 px fra venstre/højre kant og 10 px fra bunden.
 */
.banner-eagle {
    position: absolute;
    z-index: 2;
    bottom: 10px;

    display: block;
    width: clamp(110px, 9vw, 150px);
    height: auto;

    object-fit: contain;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.banner-eagle-left {
    left: 5px;
    transform: none;
}

.banner-eagle-right {
    right: 5px;
    transform: scaleX(-1);
}

.banner-image {
    display: block;
    width: 100%;
    max-width: 1220px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    border: 1px solid rgba(25, 83, 130, 0.28);
    box-shadow: 0 5px 16px rgba(57, 46, 66, 0.16);
}


/*
 * Banner-hover bruger to PNG-lag, som begge ligger i DOM'en fra start.
 * Browseren henter derfor hover-billedet sammen med standardbilledet,
 * og vi undgår src-skift/glitch når musen føres ind over banneret.
 */
.banner-image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s linear;
}

.banner-link:hover .banner-image-hover,
.banner-link:focus-visible .banner-image-hover {
    opacity: 1;
}

.banner-link:hover .banner-image-static,
.banner-link:focus-visible .banner-image-static {
    opacity: 0;
}

.banner-image-static {
    transition: opacity 0.08s linear;
}

/*
 * Når der ikke længere er plads til både et 1220 px bannerbillede
 * og to ørne på ca. 150 px, skjules ørnene automatisk.
 * Bannerbilledet får derefter hele den tilgængelige bredde.
 */
@media (max-width: 1580px) {
    .banner-eagle {
        display: none;
    }
}

/* På små skærme fortsætter banneret responsivt i fuld bredde. */
@media (max-width: 768px) {
    .banner-row {
        width: 100%;
    }

    .banner-row .banner-link,
    .banner-image {
        width: 100%;
        max-width: none;
    }
}


/* ------------------------------------------------------ */
/* COMPACT BANNER (slides in after scrolling down)        */
/* ------------------------------------------------------ */
.banner-compact {
    position: fixed;
    top: -53.333px;
    left: 0;
    right: 0;
    height: 53.333px;
    overflow: hidden;
    background-color: rgba(238, 232, 242, 0.96);
    background-image: url("images/flowerbg.png");
    background-position: center 20%;
    background-size: cover;
    border-bottom: 1px solid #ccc;
    padding: 0;
    z-index: 2000;
    transition: top 0.35s ease;
}

.banner-compact.visible {
    top: 0;
}

.banner-compact-link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.banner-image-small {
    display: block;
    height: 100%;
    max-height: 100%;
    width: auto;
    margin: 0;
    object-fit: contain;
    object-position: left center;
}


.banner-image-small-hover {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s linear;
}

.banner-compact-link:hover .banner-image-small-hover,
.banner-compact-link:focus-visible .banner-image-small-hover {
    opacity: 1;
}

.banner-compact-link:hover .banner-image-small-static,
.banner-compact-link:focus-visible .banner-image-small-static {
    opacity: 0;
}

.banner-image-small-static {
    transition: opacity 0.08s linear;
}

.banner-nav-small {
    display: flex;
    gap: 20px;
}

/* ------------------------------------------------------ */
/* HEADLINE (4 fixed-size boxes)                          */
/* ------------------------------------------------------ */
.headline {
    width: 100%;
    padding: 40px 360px 60px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 300px); /* FIXED SIZE */
    justify-content: center;
    gap: 22px;
}

.box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    height: 150px;
}

.box-img {
    width: 100%;
    height: 100%;
    background: #d0d0d0;
    transition: background 0.2s ease;
}

.box-img:hover {
    background: #bcbcbc;
}

/* Colored borders for headline boxes */
.headline .box:nth-child(1) {
    border: 4px solid #ff6b6b; /* red */
}

.headline .box:nth-child(2) {
    border: 4px solid #4dabf7; /* blue */
}

.headline .box:nth-child(3) {
    border: 4px solid #51cf66; /* green */
}

.headline .box:nth-child(4) {
    border: 4px solid #f59f00; /* orange */
}


/* ------------------------------------------------------ */
/* MAIN LAYOUT (desktop)                                  */
/* ------------------------------------------------------ */
.main_layout {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto 40px;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 288px;
    gap: 48px;

}


/* På artikelsider giver vi hovedkolonnen plads til et 960 px artikelbillede. */
@media (min-width: 1100px) {
    .post-page .main_layout {
        max-width: 1296px;
        grid-template-columns: minmax(0, 960px) 288px;
    }
}

/* ------------------------------------------------------ */
/* NEWS                                                   */
/* ------------------------------------------------------ */
.news-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    text-align: center;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.news-item {
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 4px;
}

.news-item:hover {
    background: #f0f0f0;
}

.news-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #e0e0e0;
    margin-bottom: 6px;
    transition: transform 0.3s ease;
}

.news-item:hover .news-img {
    transform: scale(1.06);
}

.news-title-bold {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
}


.news-category {
    margin: 0 0 3px;
    font-size: 10px;
    line-height: 1.3;
    color: #00947A;
    font-weight: 600;
}

.news-date {
    margin: 0;
    font-size: 11px;
    color: #777;
}

/* ------------------------------------------------------ */
/* RIGHT COLUMN                                           */
/* ------------------------------------------------------ */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;

    /* vigtigt for sticky */
    align-self: stretch;
}

/* PROFILE */
.profile {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 16px;
    text-align: center;
}

.profile-img {
    display: block;
    width: 100%;
    max-width: 110px;
    height: auto;
    margin: 0 auto 12px;
    border-radius: 0;
    object-fit: contain;
}

.profile-text {
    margin: 0;
    font-size: 13px;
    color: #555;
}

.profile p,
.profile-text {
    line-height: 1.7; /* increase spacing */
    margin-bottom: 10px; /* optional: adds space between paragraphs */
}


/* ------------------------------------------------------ */
/* TOOLS                                                  */
/* ------------------------------------------------------ */
.tools {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 900px;
    overflow-y: auto;
}

.tool-item {
    padding: 14px;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    transition: background 0.2s ease;
}


.tool-item-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tool-item-link:visited {
    color: inherit;
}

.tool-item-link:focus-visible {
    outline: 2px solid #00947A;
    outline-offset: -2px;
}

.tool-item:nth-child(3n) {
    border-right: none;
}

.tool-item:hover {
    background: #f0f0f0;
}

.tool-img {
    width: 100%;
    height: 70px;
    margin-bottom: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #79657d;
}

.tool-img svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.55;
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.tool-item:hover .tool-img svg {
    transform: translateY(-2px);
    color: #514553;
}

.tool-item p {
    margin: 0;
    font-size: 12px;
}

/* ------------------------------------------------------ */
/* MOBILE RESPONSIVE LAYOUT                               */
/* ------------------------------------------------------ */
@media (max-width: 768px) {
.banner {
        min-height: 0;
        padding: 18px 10px 16px;
        gap: 0;
    }

    .banner-image {
        width: 100%;
        max-height: none;
    }

    .banner-nav {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .banner-nav a {
        flex: 1 0 auto;
        padding: 8px 16px;
        text-align: center;
    }

    /* HEADLINE: 2 columns, fixed size */
    .headline {
        grid-template-columns: repeat(2, 150px); /* 2 columns */
        gap: 16px;
        padding: 0 20px;
        justify-content: center;
    }

    /* MAIN LAYOUT: stack vertically */
    .main_layout {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 100%;
        padding: 0 20px;
    }

    /* NEWS: 2 columns */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* PROFILE after news */
    .profile {
        order: 2;
    }

    /* TOOLS: 2 columns */
    .tools {
        grid-template-columns: repeat(2, 1fr);
        order: 3;
    }

    /* Compact banner smaller on mobile */
    .banner-compact {
        top: -40px;
        height: 40px;
        padding: 0;
    }
    .banner-image-small {
        height: 100%;
        max-height: 100%;
        width: auto;
    }

}


/* NEW POST STUFF */


/* Margin under banner */
.main_layout {
    margin-top: 40px;
}

/* DIRECTORY BAR */
.directory {
    height: 27px;
    padding: 0 80px;
    background: linear-gradient(
        to bottom,
        #dddddd 0%,
        #e5e5e5 5%,
        #eeeeee 10%,
        #eeeeee 90%,
        #e5e5e5 95%,
        #dddddd 100%
    );
    border-bottom: 1px solid #bdbdbd;
    display: flex;
    align-items: center;
}

.directory-inner {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.directory-inner a {
    color: #333;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
}

.directory-inner a:hover {
    text-decoration: underline;
}

.directory-home {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.directory-home svg,
.directory-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-width: 1.8;
    transform: translateY(1px);
}

.directory-chevron {
    color: #666;
}


.directory-title-chevron[hidden] {
    display: none !important;
}

/* POST SECTION */
.post-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px;
}

.post-date {
    font-size: 13px;
    color: #777;
    margin: 0 0 5px;
}

.post-category {
    margin: 0 0 20px;
    font-size: 12px;
    color: #00947A;
    font-weight: 600;
}

.post-image {
    display: block;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 960 / 504;
    height: auto;
    object-fit: cover;
    background: #d0d0d0;
    margin-bottom: 20px;
    border-radius: 12px;
}


.post-image[hidden] {
    display: none;
}

/* CONTENT behaves like NEWS grid */
.content {
    background: #ffffff;
    padding: 20px;
    margin-top: 30px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* Lidt tættere brødtekst end tidligere. */
.content > p {
    width: min(100%, 700px);
    margin: 0 auto 1em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
}

.post-intro {
    width: min(100%, 700px);
    margin: 0 auto 1em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
}


/* Læsevenlig artikeltypografi */
.content > ul,
.content > ol,
.content > blockquote {
    width: min(100%, 700px);
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
}

.content > ul,
.content > ol,
.content > blockquote {
    margin-top: 0;
    margin-bottom: 1em;
}

/* HIGHLIGHT SECTION */
.highlight {
    background: #e5e5e5;
    padding: 14px 18px;
    border-radius: 6px;
    font-weight: 700;
}

/* QUOTE BOX */
.quote-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.quote-text {
    background: #dff5d8;
    padding: 16px 20px;
    border-radius: 10px;
    position: relative;
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
}

.quote-text::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 20px;
    width: 0;
    height: 0;
    border-left: 12px solid #dff5d8;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.quote-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.quote-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    background: #ccc;
}

.quote-name {
    margin-top: 6px;
    font-size: 13px;
    color: #444;
}

/* POST BOX */
.post-box {
    display: flex;
    gap: 16px;
    border: 1px solid #d0d0d0;
    padding: 16px;
    border-radius: 6px;
    background: #ffffff;
}

.post-box-image {
    width: 120px;
    height: 120px;
    background: #ccc;
    border-radius: 4px;
    flex-shrink: 0;
}

.post-box-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.post-box-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Spejlvendt taleboble */
.quote-box-reverse {
    flex-direction: row-reverse;
}

/* Flyt pilen over på venstre side af boblen */
.quote-box-reverse .quote-text::after {
    right: auto;
    left: -12px;

    border-left: 0;
    border-right: 12px solid #dff5d8;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.poem {
    width: min(100%, 620px);
    margin: 22px auto;
    padding: 25px 30px;
    position: relative;
    isolation: isolate;

    background-color: #f4f1e8;

    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(57, 46, 66, 0.08);
}

.poem::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--poem-paper-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.75;
    pointer-events: none;
}

.poem > * {
    position: relative;
    z-index: 1;
}


/* Dekorativ lodret linje */
.poem::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15px;
    bottom: 15px;

    width: 3px;
    z-index: 2;

    background: linear-gradient(
        to bottom,
        transparent,
        #79657d,
        transparent
    );
}


.poem p {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;
    line-height: 1.9;

    color: #514553;

    letter-spacing: 0.01em;
}

/* MOBILE */
@media (max-width: 768px) {

    .content {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .post-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .post-box-image {
        width: 100%;
        height: 180px;
    }

    .quote-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .quote-text::after {
        right: auto;
        left: 20px;
        top: 100%;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 12px solid #dff5d8;
    }

    .quote-side {
        flex-direction: row;
        gap: 12px;
        width: auto;
    }

    .quote-name {
        margin-top: 0;
    }
}


/* Smooth zoom effect for headline and news images */
.box-img,
.news-img {
    transition: transform 0.3s ease;
}

.box:hover .box-img,
.news-item:hover .news-img {
    transform: scale(1.06); /* slight zoom */
}

/* ------------------------------------------------------ */
/* TABLE OF CONTENTS                                      */
/* ------------------------------------------------------ */

.table-of-contents[hidden],
.sidebar-toc[hidden],
.toc-toggle[hidden] {
    display: none !important;
}

.table-of-contents {
    width: 80%;
    max-width: 720px;
    margin: 18px auto;
    padding: 24px;

    background-color: #fff;

    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 5px,
        rgba(121, 101, 125, 0.14) 5px,
        rgba(121, 101, 125, 0.14) 6px
    );

    border-top: 2px solid #79657d;
    border-bottom: 2px solid #79657d;

    border-radius: 6px;
    text-align: center;
    justify-self: center;
}


.table-of-contents h2 {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
}

.toc-list {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.toc-section,
.toc-subsection {
    display: block;
    width: 100%;
    margin: 7px 0;
    padding: 0;
    line-height: 1.45;
    text-align: center;
}

.toc-list a,
.toc-list a:visited {
    display: block;
    width: 100%;
    color: #222;
    text-decoration: none;
    text-align: center;
}

.toc-list a:hover,
.toc-list a:focus {
    color: #222;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.toc-subsection {
    font-size: 0.94em;
}

.toc-extra {
    display: block;
}

.toc-toggle {
    display: block;
    margin: 14px auto 0;
    padding: 7px 12px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.toc-toggle:hover {
    background: #f4f4f4;
}

@media (max-width: 768px) {
    .table-of-contents {
        width: 88%;
        padding: 16px;
    }
}

/* Kun artikeloverskrifterne – ikke h3 inde i post-box osv. */
.content > h2,
.content > h3 {
    margin: 25px 0 9px;
    font-size: 19px;
    font-weight: 600;
    color: #222;
}

.content > h2 {
    margin: 40px 0 15px;
    font-size: 27px;
    font-weight: 600;
    color: #ffffff;
    padding: 8px 14px;
    background: #00947A;
    border-radius: 5px;
}

/* Smal linje over og under H2 */
.content > h2::before,
.content > h2::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.62),
        rgba(255, 255, 255, 0.22),
        transparent
    );
}

.content > h2::before {
    margin: -3px 0 8px;
}

.content > h2::after {
    margin: 8px 0 -3px;
}


.content > h3 {
    margin: 25px 0 9px;
    font-size: 19px;
    font-weight: 600;
    color: #00947A;
}

/* Lidt tykkere linje under H3 */
.content > h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 7px;
    background: #00947A;
}


@media (max-width: 768px) {
    .table-of-contents {
        width: min(100%, 620px);
        padding: 16px;
    }
}


.sidebar-toc {
    width: 100%;
    padding: 16px 14px;

    background-color: #fff;

    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 5px,
        rgba(121, 101, 125, 0.14) 5px,
        rgba(121, 101, 125, 0.14) 6px
    );

    border-top: 2px solid #79657d;
    border-bottom: 2px solid #79657d;

    border-radius: 6px;

    /* STICKY */
    position: sticky;
    top: 100px;

    align-self: flex-start;

    z-index: 10;
}

.toc-section,
.toc-subsection {
    display: block;
    width: 100%;
    margin: 7px 0;
    padding: 0;
    line-height: 1.45;

    text-align: left;
}

.toc-list a,
.toc-list a:visited,
.sidebar-toc-list a,
.sidebar-toc-list a:visited {
    display: block;
    width: 100%;

    color: #222;
    text-decoration: none;

    text-align: left;
}


/* Undersektioner får ekstra indryk */
.toc-subsection {
    font-size: 0.94em;
    padding-left: 22px;
}

.sidebar-toc h2 {
    margin: 0 0 14px;
    font-size: 17px;
    text-align: center;
    color: #514553;
}

.sidebar-toc-list {
    text-align: left;
}

.sidebar-toc-list a {
    display: block;
    padding: 5px 4px;

    color: #514553;
    text-decoration: none;

    font-size: 13px;
    line-height: 1.4;
}

.sidebar-toc-list a:hover,
.sidebar-toc-list a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sidebar-toc-list .toc-subsection {
    padding-left: 12px;
    font-size: 12px;
}

.sidebar-toc-list a {
    display: block;
    padding: 5px 7px;

    color: #514553;
    text-decoration: none;

    font-size: 13px;
    line-height: 1.4;

    border-radius: 4px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}


/* Aktiv sektion */
.sidebar-toc-list a.active {
    color: #00947A;
    font-weight: 700;

    background: rgba(0, 148, 122, 0.10);

    padding-left: 11px;
}


/* ------------------------------------------------------ */
/* DYNAMISK JSON-VERSION                                  */
/* ------------------------------------------------------ */

/* Artikelbilleder fra JSON bruger nu rigtige <img>-elementer, så alt-tekst kan læses af søgemaskiner. */

/* Forfatter under digtblok */
.poem-author {
    margin-top: 15px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    color: #79657d;
    text-align: right;
}

/* Relaterede opslag kan være hele klikbare kort */
.post-box-link {
    color: inherit;
    text-decoration: none;
}

.post-box-link:hover {
    background: #faf8fb;
}

/* Fejl ved indlæsning af et opslag */
.post-load-error {
    margin: 0;
    padding: 16px 18px;
    background: rgba(225, 214, 229, 0.45);
    border-radius: 6px;
}

/* Forsidens dynamiske artikelkort */
.news-item-link {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.news-loading,
.news-empty,
.news-error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #777;
}

.news-error {
    color: #79657d;
}

/* På mobil er den ekstra sticky indholdsfortegnelse unødvendig. */
@media (max-width: 768px) {
    .sidebar-toc {
        display: none;
    }
}


/* ------------------------------------------------------ */
/* OPDATERET VÆRKTØJSKASSE                                */
/* ------------------------------------------------------ */
.tool-item p {
    min-height: 2.8em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tool-line {
    display: block;
}


/* ------------------------------------------------------ */
/* FORSIDE: BLADRING MELLEM OPSLAG                        */
/* ------------------------------------------------------ */
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px 0 0;
}

.pagination-button {
    min-width: 102px;
    padding: 8px 14px;
    border: 1px solid rgba(121, 101, 125, 0.55);
    border-radius: 5px;
    background: #fff;
    color: #514553;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.pagination-button:hover:not(:disabled) {
    background: rgba(225, 214, 229, 0.55);
}

.pagination-button:disabled {
    opacity: 0.38;
    cursor: default;
}

.pagination-status {
    min-width: 92px;
    text-align: center;
    font-size: 12px;
    color: #79657d;
}


.post-pagination {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.post-pagination[hidden] {
    display: none !important;
}

.post-pagination-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.post-pagination-link.is-disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 768px) {
    .post-pagination {
        gap: 8px;
    }

    .post-pagination-link {
        flex: 1;
        min-width: 0;
    }
}

/* ------------------------------------------------------ */
/* VISUEL KOMMENTAR-PLACEHOLDER                           */
/* ------------------------------------------------------ */
.comments-placeholder {
    margin-top: 42px;
    padding: 22px;
    background: #fff;
    border-top: 2px solid #79657d;
    border-bottom: 2px solid #79657d;
    border-radius: 6px;
}

.comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.comments-heading h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #514553;
}

.comments-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(225, 214, 229, 0.7);
    color: #79657d;
    font-size: 11px;
    white-space: nowrap;
}

.comments-intro {
    margin: 0 0 18px;
    color: #777;
    font-size: 13px;
    line-height: 1.6;
}

.comment-preview {
    margin-bottom: 22px;
    padding: 14px 16px;
    background: repeating-linear-gradient(
        135deg,
        #fff 0,
        #fff 6px,
        rgba(121, 101, 125, 0.08) 6px,
        rgba(121, 101, 125, 0.08) 7px
    );
    border-left: 3px solid rgba(121, 101, 125, 0.55);
}

.comment-preview-meta {
    margin-bottom: 5px;
    font-size: 11px;
    color: #79657d;
}

.comment-preview p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.comment-form {
    display: grid;
    gap: 14px;
}

.comment-field {
    display: grid;
    gap: 6px;
}

.comment-field label {
    font-size: 12px;
    font-weight: 600;
    color: #514553;
}

.comment-field input,
.comment-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d6d0d8;
    border-radius: 5px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 14px;
}

.comment-field textarea {
    resize: vertical;
    min-height: 130px;
}

.comment-field input:focus,
.comment-field textarea:focus {
    outline: 2px solid rgba(121, 101, 125, 0.22);
    border-color: #79657d;
}

.comment-submit-placeholder {
    justify-self: start;
    padding: 9px 16px;
    border: 1px solid rgba(121, 101, 125, 0.55);
    border-radius: 5px;
    background: rgba(225, 214, 229, 0.65);
    color: #514553;
    font: inherit;
    font-size: 13px;
    cursor: default;
}

@media (max-width: 768px) {
    .news-pagination {
        gap: 8px;
    }

    .pagination-button {
        min-width: 0;
        flex: 1;
    }

    .pagination-status {
        min-width: 74px;
    }

    .comments-placeholder {
        padding: 18px 16px;
    }

    .comments-heading {
        align-items: flex-start;
    }
}


/* ------------------------------------------------------ */
/* HEADER UDEN NAVIGATION                                 */
/* ------------------------------------------------------ */
.banner-compact {
    justify-content: flex-start;
}

/* ------------------------------------------------------ */
/* OM SIDEN-KNAP I PROFIL                                 */
/* ------------------------------------------------------ */
.profile-about-button {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    border: 1px solid #00947A;
    border-radius: 5px;
    background: #00947A;
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.profile-about-button:hover,
.profile-about-button:focus-visible {
    background: #007d68;
    border-color: #007d68;
    color: #ffffff;
    transform: translateY(-1px);
}

/* De tvungne linjeskift i værktøjskassen. */
.tool-line {
    display: block;
}

/* ------------------------------------------------------ */
/* PROFILVÆLGER I KOMMENTAR-PROTOTYPE                     */
/* ------------------------------------------------------ */
.comment-profile-picker {
    display: grid;
    gap: 8px;
}

.comment-profile-label {
    font-size: 12px;
    font-weight: 600;
    color: #514553;
}

.comment-profile-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.comment-profile-option {
    position: relative;
    cursor: pointer;
}

.comment-profile-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.comment-profile-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 92px;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 7px;
    background: rgba(225, 214, 229, 0.28);
    color: #514553;
    font-size: 11px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.comment-profile-card img {
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
}

.comment-profile-option:hover .comment-profile-card {
    background: rgba(225, 214, 229, 0.52);
}

.comment-profile-option input:checked + .comment-profile-card {
    border-color: #79657d;
    background: rgba(225, 214, 229, 0.78);
    transform: translateY(-1px);
}

.comment-profile-option input:focus-visible + .comment-profile-card {
    outline: 2px solid rgba(121, 101, 125, 0.35);
    outline-offset: 2px;
}

.comment-preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.comment-preview-avatar {
    flex: 0 0 auto;
}

.comment-preview-avatar img {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.comment-preview-body {
    min-width: 0;
    flex: 1;
}

@media (max-width: 768px) {
    .comment-profile-options {
        gap: 10px;
    }

    .comment-profile-card {
        width: 86px;
    }
}

/* ------------------------------------------------------ */
/* LIVE KOMMENTARER                                       */
/* ------------------------------------------------------ */
.comment-list {
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
}

.comment-list-message {
    margin: 0;
    padding: 14px 16px;
    background: repeating-linear-gradient(
        135deg,
        #fff 0,
        #fff 6px,
        rgba(121, 101, 125, 0.08) 6px,
        rgba(121, 101, 125, 0.08) 7px
    );
    border-left: 3px solid rgba(121, 101, 125, 0.4);
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: repeating-linear-gradient(
        135deg,
        #fff 0,
        #fff 6px,
        rgba(121, 101, 125, 0.08) 6px,
        rgba(121, 101, 125, 0.08) 7px
    );
    border-left: 3px solid rgba(121, 101, 125, 0.55);
}

.comment-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
}

.comment-body {
    min-width: 0;
    flex: 1;
}

.comment-meta {
    margin-bottom: 5px;
    font-size: 11px;
    color: #79657d;
}

.comment-name {
    font-weight: 700;
    color: #514553;
}

.comment-date {
    color: #79657d;
}

.comment-text {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comment-submit-placeholder {
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.comment-submit-placeholder:hover:not(:disabled),
.comment-submit-placeholder:focus-visible:not(:disabled) {
    background: rgba(225, 214, 229, 0.95);
    border-color: #79657d;
}

.comment-submit-placeholder:disabled {
    opacity: 0.55;
    cursor: wait;
}

.comment-form-message {
    min-height: 1.4em;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.comment-form-message.is-success {
    color: #4f6e54;
}

.comment-form-message.is-error {
    color: #8a4f58;
}

@media (max-width: 768px) {
    .comment-item {
        padding: 12px;
    }

    .comment-avatar {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
}


@media (max-width: 768px) {
    .post-image {
        border-radius: 9px;
    }

    .content {
        gap: 12px;
    }

    .content > p {
        line-height: 1.55;
    }
}


/* Flere artikelhenvisninger kan samles i én references-blok i JSON. */
.reference-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
}

.reference-list .post-box {
    margin: 0;
}


/* Kontaktfelt på Om Siden. Funktionaliteten er endnu ikke implementeret. */
.contact-placeholder[hidden] {
    display: none !important;
}

.contact-form {
    margin-top: 14px;
}

#contact-submit:disabled {
    opacity: 0.55;
    cursor: default;
}


.category-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.category-post-card {
    margin: 0;
}

.category-posts-message {
    margin: 0;
    padding: 18px;
    color: #777;
    text-align: center;
    border: 1px dashed #d0d0d0;
    border-radius: 6px;
    background: #fafafa;
}


@media (max-width: 768px) {
    .directory {
        height: 27px;
        padding: 0 18px;
    }

    .directory-inner a {
        font-size: 12px;
    }

    .directory-home svg,
    .directory-chevron {
        width: 13px;
        height: 13px;
    }
}


@media (max-width: 768px) {
    .content > p,
    .post-intro,
    .content > ul,
    .content > ol,
    .content > blockquote {
        font-size: 17px;
        line-height: 1.7;
    }
}


/* ====================================================== */
/* TYPOGRAFI OG LÆSEHIERARKI                              */
/* ====================================================== */

/* H1/H2/H3 er lidt bredere end brødtekstens 700px. */
.post-title {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    line-height: 1.14;
    letter-spacing: -0.015em;
    font-weight: 700;
}

.content > h2,
.content > h3 {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, "Times New Roman", serif;
}

.content > h2 {
    font-size: 29px;
    line-height: 1.22;
    font-weight: 700;
}

.content > h3 {
    font-size: 21px;
    line-height: 1.32;
    font-weight: 600;
}


/* ====================================================== */
/* INDHOLDSFORTEGNELSE                                    */
/* ====================================================== */

.table-of-contents h2,
.sidebar-toc h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.table-of-contents .toc-section,
.sidebar-toc-list .toc-section {
    margin-top: 10px;
    margin-bottom: 10px;
}

.table-of-contents .toc-section > a,
.sidebar-toc-list .toc-section > a {
    font-weight: 600;
}

.table-of-contents .toc-subsection,
.sidebar-toc-list .toc-subsection {
    margin-top: 6px;
    margin-bottom: 6px;
}

.table-of-contents .toc-subsection > a,
.sidebar-toc-list .toc-subsection > a {
    font-weight: 400;
    font-size: 0.94em;
}


/* ====================================================== */
/* AKTIV KATEGORI I VÆRKTØJSKASSEN                       */
/* ====================================================== */

.tool-item-link.is-active-category {
    background: rgba(0, 148, 122, 0.10);
}

.tool-item-link.is-active-category .tool-img {
    color: #00947A;
}

.tool-item-link.is-active-category p {
    color: #006d5a;
    font-weight: 400;
}


/* ====================================================== */
/* TALEBOBLE                                              */
/* ====================================================== */

.quote-box {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
}

.quote-text {
    min-width: 0;
    max-width: 680px;
}


/* ====================================================== */
/* TIL TOPPEN                                             */
/* ====================================================== */

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(0, 148, 122, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #00947A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.13);
    cursor: pointer;
    z-index: 2100;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.back-to-top[hidden] {
    display: none !important;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.16);
}

.back-to-top svg {
    width: 23px;
    height: 23px;
    stroke-width: 2;
}

@media (max-width: 768px) {
    .post-title {
        width: 100%;
        font-size: 34px;
        line-height: 1.16;
    }

    .content > h2,
    .content > h3 {
        width: 100%;
    }

    .content > h2 {
        font-size: 26px;
    }

    .content > h3 {
        font-size: 20px;
    }

    .quote-box {
        width: 100%;
    }

    .quote-text {
        max-width: none;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}


/* Titel følger igen venstrekanten sammen med dato/kategori. */
.post-title {
    width: min(100%, 780px);
    margin-left: 0;
    margin-right: 0;
}


/* ====================================================== */
/* SØGNING UNDER PROFIL                                   */
/* ====================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.site-search {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 10px;
    z-index: 30;
}

.site-search-input-wrap {
    position: relative;
}

.site-search-input-wrap svg {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #79657d;
    pointer-events: none;
}

.site-search-input {
    width: 100%;
    height: 38px;
    padding: 7px 10px 7px 34px;
    border: 1px solid #d7d3d9;
    border-radius: 5px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
}

.site-search-input:focus {
    outline: 2px solid rgba(0, 148, 122, 0.16);
    border-color: #00947A;
}

.site-search-results {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d8d8d4;
    border-top: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.11);
}

.site-search-results[hidden] {
    display: none !important;
}

.site-search-result {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-top: 1px solid #ededeb;
    color: #222;
    text-decoration: none;
}

.site-search-result:first-child {
    border-top: 0;
}

.site-search-result:hover,
.site-search-result:focus {
    background: #f5f7f5;
}

.site-search-result-category {
    color: #00947A;
    font-size: 10px;
    font-weight: 600;
}

.site-search-result strong {
    font-size: 13px;
}

.site-search-result-description {
    color: #666;
    font-size: 11px;
    line-height: 1.4;
}

.site-search-empty {
    margin: 0;
    padding: 12px;
    color: #777;
    font-size: 12px;
}


/* ====================================================== */
/* HJEMMESIDE-REFERENCE                                   */
/* ====================================================== */

.website-reference-card {
    width: min(100%, 780px);
    margin: 12px auto;
    padding: 24px;
    border: 1px solid #d7d7d3;
    border-radius: 7px;
    background: #fafbf9;
}

.website-reference-label {
    margin: 0 0 5px;
    color: #00947A;
    font: 700 11px/1.2 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.website-reference-title {
    width: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    background: none !important;
    color: #222 !important;
    font: 700 25px/1.2 Georgia, "Times New Roman", serif !important;
}

.website-reference-title::before,
.website-reference-title::after {
    display: none !important;
}

.website-reference-url {
    display: inline-block;
    margin-bottom: 16px;
    color: #006d5a;
    font-size: 13px;
}

.website-reference-description,
.website-reference-note {
    width: auto !important;
    margin: 0 0 12px !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.65;
}

.website-reference-note {
    color: #666;
    font-size: 14px;
}

.website-reference-button {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 13px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.website-reference-button:hover,
.website-reference-button:focus {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .site-search {
        order: 1;
    }

    .website-reference-card {
        padding: 18px;
    }
}


/* Direkte referencer i de tre referencekategorier */
.category-external-reference .external-reference-mark {
    color: #00947A;
    font-family: system-ui, sans-serif;
    font-weight: 400;
    white-space: nowrap;
}

.category-external-reference:hover .post-box-title {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Artikelvisninger vises diskret sammen med dato og læsetid. */
.post-date {
    min-height: 1.4em;
}


/* Separat, diskret visningstal under dato/læsetid */
.post-views {
    margin: -2px 0 5px;
    font-size: 12px;
    color: #777;
}

.post-views[hidden] {
    display: none !important;
}


/* ====================================================== */
/* ARTIKELTITEL + PDF                                     */
/* ====================================================== */

.post-title-row {
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}

.post-title-row .post-title {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.pdf-download-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 50px;
    padding: 7px 11px;
    border: 1px solid rgba(0, 148, 122, 0.42);
    border-radius: 5px;
    background: #fff;
    color: #006d5a;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.pdf-download-button[hidden] {
    display: none !important;
}

.pdf-download-button:hover:not(:disabled),
.pdf-download-button:focus-visible:not(:disabled) {
    background: rgba(0, 148, 122, 0.08);
    transform: translateY(-1px);
}

.pdf-download-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.pdf-download-button svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
}


/* ====================================================== */
/* VISNINGER PÅ SAMME METALINJE                           */
/* ====================================================== */

.post-date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

.post-views {
    display: inline;
    margin: 0;
    font-size: inherit;
    color: inherit;
}

.post-views[hidden] {
    display: none !important;
}


/* ====================================================== */
/* BILLEDER INDE I ARTIKLER                               */
/* ====================================================== */

.article-figure {
    width: var(--article-image-width, 80%);
    max-width: 100%;
    margin-top: 8px;
    margin-bottom: 22px;
}

.article-figure-center {
    margin-left: auto;
    margin-right: auto;
}

.article-figure-left {
    margin-left: 0;
    margin-right: auto;
}

.article-figure-right {
    margin-left: auto;
    margin-right: 0;
}

.article-inline-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-figure-caption {
    display: grid;
    gap: 3px;
    margin-top: 7px;
    padding: 0 2px;
    color: #666;
    font-size: 12px;
    line-height: 1.45;
}

.article-image-caption {
    color: #555;
}

.article-image-citation {
    color: #777;
    font-style: normal;
}

a.article-image-citation:hover,
a.article-image-citation:focus {
    color: #006d5a;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ====================================================== */
/* LISTER I ARTIKLER                                      */
/* ====================================================== */

.content > .article-list {
    width: min(100%, 700px);
    margin: 0 auto 1em;
    padding-left: 1.55em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
}

.content > .article-list li {
    margin: 0.32em 0;
    padding-left: 0.16em;
}

.content > ul.article-list li::marker,
.content > ol.article-list li::marker {
    color: #00947A;
}


/* ====================================================== */
/* RESPONSIVE – TABLET                                    */
/* ====================================================== */

@media (max-width: 1050px) {
    .main_layout,
    .post-page .main_layout {
        width: 100%;
        max-width: 900px;
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .right-column {
        width: min(100%, 680px);
        margin-left: auto;
        margin-right: auto;
    }

    .sidebar-toc {
        display: none;
    }

    .headline {
        grid-template-columns: repeat(2, minmax(0, 300px));
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* ====================================================== */
/* RESPONSIVE – MOBIL                                     */
/* ====================================================== */

@media (max-width: 768px) {
    .main_layout,
    .post-page .main_layout {
        padding-left: 16px;
        padding-right: 16px;
        gap: 28px;
    }

    .post-title-row {
        gap: 12px;
    }

    .pdf-download-button {
        margin-top: 44px;
        padding: 7px 9px;
    }

    .content {
        padding: clamp(14px, 4vw, 18px);
    }

    .table-of-contents {
        width: 100%;
        max-width: 100%;
    }

    .article-figure {
        width: min(100%, var(--article-image-width, 80%));
    }

    .content > .article-list {
        font-size: 17px;
        line-height: 1.7;
    }

    .directory {
        padding-left: 12px;
        padding-right: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .directory::-webkit-scrollbar {
        display: none;
    }

    .directory-inner {
        min-width: max-content;
        white-space: nowrap;
    }

    .site-search-results {
        max-height: 55vh;
    }
}

@media (max-width: 560px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .headline {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .headline .box {
        width: 100%;
        height: 120px;
    }

    .post-title-row {
        flex-wrap: wrap;
    }

    .post-title-row .post-title {
        flex-basis: calc(100% - 112px);
        font-size: 31px;
    }

    .pdf-download-button {
        margin-left: auto;
    }

    .comments-placeholder {
        padding: 16px;
    }

    .comment-preview,
    .comment-item {
        gap: 10px;
    }

    .news-pagination,
    .post-pagination {
        flex-wrap: wrap;
    }

    .pagination-status {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 380px) {
    .post-title-row .post-title {
        flex-basis: 100%;
    }

    .pdf-download-button {
        margin-left: 0;
    }

    .tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ====================================================== */
/* PDF / PRINT                                            */
/* ====================================================== */

body.is-exporting-pdf .pdf-download-button,
body.is-exporting-pdf .post-pagination,
body.is-exporting-pdf .comments-placeholder,
body.is-exporting-pdf .contact-placeholder {
    display: none !important;
}

body.is-exporting-pdf .post {
    background: #fff;
}

.content > h2,
.content > h3,
.article-figure,
.poem,
.quote-box,
.post-box {
    break-inside: avoid;
    page-break-inside: avoid;
}

@media print {
    .floral-zone,
    .banner-compact,
    .directory,
    .right-column,
    .post-pagination,
    .comments-placeholder,
    .contact-placeholder,
    .back-to-top,
    .pdf-download-button {
        display: none !important;
    }

    html,
    body {
        background: #fff;
    }

    .main_layout,
    .post-page .main_layout {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .post {
        width: 100%;
    }

    .content {
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }
}


/* ====================================================== */
/* STABIL PDF-EKSPORT                                     */
/* ====================================================== */

.pdf-export-host {
    position: fixed;
    top: 0;
    left: 0;
    width: 780px;
    max-width: 780px;
    padding: 0 10px;
    background: #fff;
    z-index: -9999;
    pointer-events: none;
}

.pdf-export-article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
}

.pdf-export-article .post-title-row,
.pdf-export-article .post-image,
.pdf-export-article .content,
.pdf-export-article .article-figure,
.pdf-export-article .quote-box,
.pdf-export-article .poem,
.pdf-export-article .post-box {
    max-width: 100%;
}

.pdf-export-article .post-title {
    width: 100%;
    max-width: 100%;
}

.pdf-export-article .content {
    width: 100%;
    margin-top: 24px;
}

.pdf-export-article .content > p,
.pdf-export-article .post-intro,
.pdf-export-article .content > ul,
.pdf-export-article .content > ol,
.pdf-export-article .content > blockquote,
.pdf-export-article .content > .article-list {
    max-width: 680px;
}

.pdf-export-article .table-of-contents {
    width: 88%;
    max-width: 680px;
}


/* ====================================================== */
/* PRINT-KNAP PÅ ARTIKELBILLEDET                          */
/* ====================================================== */

.post-title-row {
    display: block;
    margin-bottom: 10px;
}

.post-image-wrap {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin-bottom: 20px;
}

.post-image-wrap .post-image {
    margin-bottom: 0;
}

.print-page-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid rgba(0, 148, 122, 0.42);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.94);
    color: #006d5a;
    font: inherit;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.print-page-button[hidden] {
    display: none !important;
}

.print-page-button:hover,
.print-page-button:focus-visible {
    background: #fff;
    transform: translateY(-1px);
}

.print-page-button svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
}

.post-image-wrap.has-no-image {
    margin-bottom: 0;
}

/* Ingen gammel PDF-knap må påvirke layoutet. */
.pdf-download-button,
.pdf-export-host {
    display: none !important;
}


/* ====================================================== */
/* PRINT-SIDE                                             */
/* ====================================================== */

@media print {
    .print-page-button {
        display: none !important;
    }

    .post-image-wrap {
        max-width: 100%;
        margin-bottom: 16px;
    }

    .post-image {
        max-width: 100%;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .content {
        margin-top: 20px;
    }

    .table-of-contents {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 560px) {
    .print-page-button {
        top: 8px;
        right: 8px;
        min-height: 34px;
        padding: 6px 9px;
    }
}


/* ====================================================== */
/* PRINT-KNAP OVER ARTIKELBILLEDET                        */
/* ====================================================== */

.print-page-row {
    width: 100%;
    max-width: 960px;
    display: flex;
    justify-content: flex-end;
    margin: -12px 0 7px;
}

.print-page-button {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    box-shadow: none;
}

.post-image-wrap {
    margin-top: 0;
}

@media (max-width: 560px) {
    .print-page-row {
        margin-top: -10px;
        margin-bottom: 6px;
    }

    .print-page-button {
        position: static;
        top: auto;
        right: auto;
    }
}

@media print {
    .print-page-row {
        display: none !important;
    }
}


/* Print-knappen ligger på samme højde som kategori/metaområdet,
   men optager ikke ekstra lodret plads. */
.print-page-row {
    position: relative;
    height: 0;
    margin: 0;
    top: -54px;
    z-index: 4;
}

@media (max-width: 560px) {
    .print-page-row {
        height: 0;
        margin: 0;
        top: -21px;
    }
}


/* ====================================================== */
/* BILLEDGALLERI                                          */
/* ====================================================== */

.article-gallery {
    width: min(100%, 780px);
    margin: 12px auto 24px;
}

.article-gallery-title {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.3;
    color: #222;
}

.article-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 2), minmax(0, 1fr));
    gap: 12px;
}

.article-gallery-item {
    min-width: 0;
    margin: 0;
}

.article-gallery-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 7px;
}

.article-gallery-caption {
    display: grid;
    gap: 2px;
    margin-top: 6px;
    color: #666;
    font-size: 11px;
    line-height: 1.45;
}


/* ====================================================== */
/* KILDEAFSNIT                                            */
/* ====================================================== */

.article-sources {
    width: min(100%, 700px);
    margin: 28px auto 8px;
    padding: 18px 20px;
    border-top: 2px solid rgba(121, 101, 125, 0.45);
    border-bottom: 2px solid rgba(121, 101, 125, 0.45);
    background: rgba(255, 255, 255, 0.78);
}

.article-sources-title {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: #514553;
}

.article-sources-list {
    margin: 0;
    padding-left: 1.4em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.6;
}

.article-sources-list li {
    margin: 7px 0;
}

.article-sources-list a {
    color: #006d5a;
    text-underline-offset: 2px;
}

.article-source-name {
    font-weight: 600;
}

.article-source-details,
.article-source-note {
    color: #666;
}

@media (max-width: 768px) {
    .article-gallery-grid {
        grid-template-columns: repeat(min(var(--gallery-columns, 2), 2), minmax(0, 1fr));
        gap: 9px;
    }

    .article-sources {
        padding: 16px;
    }
}

@media (max-width: 520px) {
    .article-gallery-grid {
        grid-template-columns: 1fr;
    }
}


/* ====================================================== */
/* BILLEDGALLERI – CAROUSEL                               */
/* ====================================================== */

.article-gallery-carousel {
    width: min(100%, 780px);
}

.article-gallery-carousel-frame {
    width: 100%;
    outline: none;
}

.article-gallery-slides {
    width: 100%;
}

.article-gallery-slide {
    width: 100%;
    margin: 0;
}

.article-gallery-slide[hidden] {
    display: none !important;
}

.article-gallery-carousel .article-gallery-image {
    width: 100%;
    max-height: 560px;
    aspect-ratio: auto;
    object-fit: contain;
    background: #f4f4f1;
}

.article-gallery-carousel-footer {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
}

.article-gallery-arrow {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(121, 101, 125, 0.38);
    border-radius: 50%;
    background: #fff;
    color: #514553;
    font: 30px/1 Georgia, "Times New Roman", serif;
    cursor: pointer;
}

.article-gallery-arrow:hover:not(:disabled),
.article-gallery-arrow:focus-visible:not(:disabled) {
    background: rgba(121, 101, 125, 0.08);
}

.article-gallery-arrow:disabled {
    opacity: 0.28;
    cursor: default;
}

.article-gallery-status {
    text-align: center;
    color: #777;
    font-size: 11px;
}

@media (max-width: 520px) {
    .article-gallery-carousel-footer {
        grid-template-columns: 38px 1fr 38px;
    }

    .article-gallery-arrow {
        width: 34px;
        height: 34px;
        font-size: 27px;
    }
}

@media print {
    .article-gallery-carousel-footer {
        display: none !important;
    }

    .article-gallery-carousel .article-gallery-slide[hidden] {
        display: none !important;
    }
}


/* ====================================================== */
/* DOWNLOAD FIL                                           */
/* ====================================================== */

.article-download-card {
    width: min(100%, 700px);
    margin: 22px auto;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(121, 101, 125, 0.34);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.86);
}

.article-download-text {
    min-width: 0;
}

.article-download-title {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    color: #514553;
    font: 600 18px/1.3 Georgia, "Times New Roman", serif;
}

.article-download-description {
    margin: 0;
    color: #666;
    font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.article-download-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.article-download-button:hover,
.article-download-button:focus-visible {
    filter: brightness(0.94);
}

.article-download-icon {
    font-size: 18px;
    line-height: 1;
}


/* ====================================================== */
/* OPSLAGSBOKS / REKLAME                                  */
/* ====================================================== */

.article-promo-box {
    width: min(100%, 780px);
    margin: 24px auto;
    padding: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(121, 101, 125, 0.36);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 3px 12px rgba(57, 46, 66, 0.07);
}

.article-promo-box:not(:has(.article-promo-image)) {
    grid-template-columns: 1fr;
}

.article-promo-image {
    display: block;
    width: 128px;
    max-height: 180px;
    object-fit: cover;
    border-radius: 6px;
}

.article-promo-body {
    min-width: 0;
}

.article-promo-title {
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    color: #514553;
    font: 600 21px/1.3 Georgia, "Times New Roman", serif;
}

.article-promo-text {
    max-width: none !important;
    margin: 0 0 12px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.article-promo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-promo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}

.article-promo-button:hover,
.article-promo-button:focus-visible {
    filter: brightness(0.94);
}

@media (max-width: 600px) {
    .article-download-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-promo-box {
        grid-template-columns: 1fr;
    }

    .article-promo-image {
        width: min(180px, 65%);
    }
}

@media print {
    .article-download-card,
    .article-promo-box {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
    }
}


/* ====================================================== */
/* WEBSITES – SPROGGRUPPER + FAVICONS                     */
/* ====================================================== */

.website-category-group {
    width: 100%;
    margin: 0 0 24px;
}

.website-category-group:last-child {
    margin-bottom: 0;
}

.website-category-group-title {
    width: 100%;
    margin: 0 0 10px;
    padding: 7px 11px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    font: 600 19px/1.3 Georgia, "Times New Roman", serif;
}

.website-category-group-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.website-category-group .category-post-card {
    min-height: 74px;
    align-items: center;
    padding: 12px 14px;
}

.website-entry-favicon-wrap {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid #e3e3df;
    border-radius: 7px;
    background: #fff;
}

.website-entry-favicon {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.website-category-group .post-box-text {
    min-width: 0;
}

.website-category-group .post-box-title {
    font-size: 17px;
}

.website-category-group .post-box-description {
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .website-category-group .category-post-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .website-entry-favicon-wrap {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .website-entry-favicon {
        width: 25px;
        height: 25px;
    }
}


/* ====================================================== */
/* FÆLLES REFERENCE-VÆRKER – BØGER                        */
/* ====================================================== */

.reference-book-group {
    width: 100%;
    margin: 0 0 26px;
}

.reference-book-group:last-child {
    margin-bottom: 0;
}

.reference-book-group-title {
    width: 100%;
    margin: 0 0 10px;
    padding: 7px 11px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    font: 600 19px/1.3 Georgia, "Times New Roman", serif;
}

.reference-book-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.reference-book-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 118px;
    padding: 12px 14px;
    border: 1px solid #d7d7d4;
    border-radius: 7px;
    background: #fff;
}

.reference-book-cover-wrap {
    width: 82px;
    min-height: 106px;
    display: grid;
    place-items: center;
}

.reference-book-cover {
    display: block;
    width: 76px;
    max-height: 106px;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13);
}

.reference-book-cover-placeholder {
    width: 72px;
    height: 100px;
    display: grid;
    place-items: center;
    border: 1px solid #d7d4d8;
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(121, 101, 125, 0.06), rgba(0, 148, 122, 0.07)),
        #fafafa;
    color: #79657D;
}

.reference-book-cover-placeholder span {
    font-size: 31px;
    line-height: 1;
}

.reference-book-body {
    min-width: 0;
}

.reference-book-title {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    color: #222;
    font: 600 18px/1.3 Georgia, "Times New Roman", serif;
}

.reference-book-author {
    margin: 0 0 5px !important;
    max-width: none !important;
    color: #006d5a;
    font: 600 12px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.reference-book-description {
    margin: 0 !important;
    max-width: none !important;
    color: #666;
    font: 13px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.reference-book-actions {
    min-width: 112px;
    display: flex;
    justify-content: flex-end;
}

.reference-book-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 650;
}

.reference-book-buy-button:hover,
.reference-book-buy-button:focus-visible {
    filter: brightness(0.94);
}

.reference-book-group-empty {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed #d5d5d2;
    border-radius: 6px;
    background: #fafafa;
    color: #888;
    font-size: 13px;
}

@media (max-width: 650px) {
    .reference-book-card {
        grid-template-columns: 70px minmax(0, 1fr);
        align-items: start;
    }

    .reference-book-cover-wrap {
        width: 70px;
        min-height: 94px;
    }

    .reference-book-cover {
        width: 64px;
        max-height: 94px;
    }

    .reference-book-cover-placeholder {
        width: 62px;
        height: 88px;
    }

    .reference-book-actions {
        grid-column: 2;
        min-width: 0;
        justify-content: flex-start;
    }
}

@media print {
    .reference-book-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* ====================================================== */
/* REFERENCEBØGER – OFFICIEL "SE MERE" KNAP               */
/* ====================================================== */

.reference-book-card {
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
}

.reference-book-cover-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
}

.reference-book-body {
    grid-column: 2;
    grid-row: 1 / 3;
}

.reference-book-actions {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: stretch;
    justify-content: flex-end;
    min-width: 0;
    margin-top: 10px;
}

.reference-book-buy-button {
    display: none !important;
}

.reference-book-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 650;
}

.reference-book-more-button:hover,
.reference-book-more-button:focus-visible {
    filter: brightness(0.94);
}

.reference-book-more-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}


/* ====================================================== */
/* SPILLEPLADER – GRUPPER                                 */
/* ====================================================== */

.game-category-group {
    width: 100%;
    margin: 0 0 24px;
}

.game-category-group-title {
    width: 100%;
    margin: 0 0 10px;
    padding: 7px 11px;
    border-radius: 5px;
    background: #00947A;
    color: #fff;
    font: 600 19px/1.3 Georgia, "Times New Roman", serif;
}

.game-category-group-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}


/* ====================================================== */
/* OPSLAGSBOKS – KØBSKNAPPER                              */
/* ====================================================== */

.article-promo-body {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.article-promo-buttons {
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 10px;
}

.article-promo-button {
    gap: 7px;
}

.article-promo-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.9;
}

@media (max-width: 650px) {
    .reference-book-card {
        grid-template-columns: 70px minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
    }

    .reference-book-actions {
        grid-column: 2;
        grid-row: 3;
        justify-content: flex-end;
    }
}


/* ========================================================================== */
/* CATEGORY.HTML — TITEL, BESKRIVELSE OG INDHOLD                              */
/* ========================================================================== */
/*
   Alle category-relaterede layout-regler er samlet her.

   Titel:
   - venstrestillet som en normal post

   Beskrivelse:
   - står altid direkte under kategorititlen
   - den grønne streg står under beskrivelsen
   - teksten kommer fra description i posts/<kategori>.json

   Afstand til entries:
   - styres med padding-top på .category-content
*/

.category-page .category-main {
    min-width: 0;
}

.category-page .post-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    text-align: left;
    max-width: 780px;
    margin: 0;
}

.category-page .post-title-row {
    position: relative;
    display: block;
    width: 100%;
    max-width: 780px;
    margin: 0;
    padding-bottom: 14px;
}


.category-page .category-description {
    width: min(100%, 700px);
    margin: 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.65;
    color: #595959;
}

/* Beskrivelsen står nu mellem titel og den grønne streg. */
.category-page .category-description::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 14px;
    background: #00947A;
    border-radius: 999px;
}

.category-page .category-description:empty {
    display: none;
}

/* DET ER DENNE VÆRDI, DER STYRER LUFTEN FØR ENTRIES */
.category-page .category-main > .category-content {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

.category-page .category-content > .category-posts,
.category-page .category-content > .website-category-group,
.category-page .category-content > .reference-book-group,
.category-page .category-content > .game-category-group {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 560px) {
    .category-page .post-title {
        font-size: 31px;
    }

    .category-page .category-description::after {
        width: 56px;
    }

    .category-page .category-description {
        width: 100%;
        font-size: 16px;
    }
}


/* ========================================================================== */
/* CUSTOM TOOL-IKONER                                                         */
/* ========================================================================== */

.tool-img .custom-tool-icon {
    display: block;
    width: 58px;
    height: 64px;
    max-width: 90%;
    max-height: 64px;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    transition: transform 0.2s ease;
}

.tool-item:hover .tool-img .custom-tool-icon {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .tool-img .custom-tool-icon {
        width: 54px;
        height: 60px;
        max-height: 60px;
    }
}


/* Bekræftet placering af Print side-knappen. */
.print-page-row {
    top: -54px;
}


/* ========================================================================== */
/* VIDEO / YOUTUBE I OPSLAG                                                   */
/* ========================================================================== */

.article-video {
    width: min(100%, 780px);
    margin: 24px auto 28px;
}

.article-video-title {
    margin: 0 0 10px;
    color: #3f3a40;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.3;
}

.article-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    border-radius: 8px;
}

.article-video-frame iframe,
.article-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.article-video-frame video { object-fit: contain; }

.article-video-caption {
    margin: 7px 2px 0;
    color: #666;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .article-video { margin-top: 20px; margin-bottom: 24px; }
}

@media print {
    .article-video-frame { display: none !important; }
}


/* ====================================================== */
/* 4 MANUELT VALGTE FORSIDE-BOKSE                        */
/* ====================================================== */

.featured-box {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #d0d0d0;
}

.featured-box .box-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #d0d0d0;
}

.featured-box .box-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-box .box-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.05) 72%);
}

.featured-box .featured-box-text {
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 11px;
    z-index: 2;
    display: grid;
    gap: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.featured-box-category {
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.featured-box-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.15;
}

.featured-box:hover .box-img img {
    transform: scale(1.025);
}

.featured-box .box-img img {
    transition: transform 0.2s ease;
}

.featured-box-missing {
    cursor: default;
    opacity: 0.62;
}

/* Talebobler: ca. 3/4 af den tidligere desktopbredde på 780px. */
.post-page .quote-box {
    width: min(100%, 585px);
}

@media (max-width: 768px) {
    .post-page .quote-box {
        width: 100%;
    }
}


/* ========================================================================== */
/* CATEGORY — FASTGJORTE OPSLAG / LINKS                                       */
/* ========================================================================== */
.category-pinned-list {
    width: min(100%, 780px);
    margin: 0 auto 26px;
    display: grid;
    gap: 10px;
}
.category-pinned-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(0, 148, 122, 0.28);
    border-radius: 7px;
    background: rgba(0, 148, 122, 0.06);
    color: #222;
    text-decoration: none;
}
.category-pinned-card:hover { background: rgba(0, 148, 122, 0.10); }
.category-pinned-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: #00947A;
}
.category-pinned-icon svg { width: 21px; height: 21px; }
.category-pinned-text { min-width: 0; display: grid; gap: 2px; }
.category-pinned-badge { color: #007966; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.category-pinned-title { font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.category-pinned-description { color: #5b5b5b; font-size: 13px; line-height: 1.4; }
.category-pinned-arrow { color: #00947A; width: 18px; height: 18px; }

/* ========================================================================== */
/* FÆLLES DIGTNING                                                            */
/* ========================================================================== */
.community-sort {
    width: min(100%, 780px);
    margin: 0 auto 18px;
    display: flex;
    gap: 8px;
}
.community-sort a {
    padding: 7px 11px;
    border: 1px solid #d6d6d2;
    border-radius: 999px;
    color: #444;
    text-decoration: none;
    font-size: 12px;
    background: #fff;
}
.community-sort a.is-active { background: #00947A; border-color: #00947A; color: #fff; }
.community-subcategory-poems,
.community-poem-list,
.article-community-poem { width: min(100%, 780px); margin-left: auto; margin-right: auto; }
.community-poem-list { display: grid; gap: 24px; }

.community-poem-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(121, 101, 125, .24);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(57,46,66,.07);
}

/* Digtet står først i kortet. */
.community-poem-paper {
    position: relative;
    padding: 28px clamp(22px, 6vw, 54px) 30px;
    background-color: #fbfaf6;
}
.community-poem-paper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--community-paper);
    background-size: cover;
    background-position: center;
    opacity: .75;
    pointer-events: none;
}
.community-poem-paper > * { position: relative; z-index: 1; }
.community-poem-title {
    margin: 0 0 12px;
    font: 700 22px/1.2 Georgia, "Times New Roman", serif;
    color: #242224;
}
.community-poem-text {
    margin: 0;
    white-space: pre-wrap;
    font: 17px/1.75 Georgia, "Times New Roman", serif;
    color: #252225;
}
.community-poem-more {
    display: inline-block;
    margin-top: 14px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: #007966;
    cursor: pointer;
    font: 600 12px/1.4 inherit;
}

/* Placering og vurdering kommer direkte efter digtet. */
.community-poem-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 10px 13px;
    border-top: 1px solid rgba(121,101,125,.16);
    border-bottom: 1px solid rgba(121,101,125,.16);
    background: #fff;
}
.community-poem-placement {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
}
.community-placement-number {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1;
}
.community-total-points { font-size: 12px; color: #656065; }
.community-score-badges { display: inline-flex; align-items: center; gap: 3px; min-height: 20px; }
.community-score-badge { font-size: 16px; line-height: 1; }
.community-score-badge.is-en { color: #9d3e58; }

.community-point-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
.community-point-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(121,101,125,.28);
    border-radius: 999px;
    background: #fff;
    color: #3a343c;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
}
.community-point-button:hover:not(:disabled) { background: #f6f2f7; }
.community-point-button.did-point { border-color: rgba(0,148,122,.45); background: rgba(0,148,122,.07); }
.community-point-button:disabled { cursor: default; opacity: .72; }
.community-point-count { font-size: 12px; }
.community-point-plus { color: #007966; font-weight: 700; }

/* Person, dato og beskrivelse er sidst. */
.community-poem-meta {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 15px 14px;
    background: rgba(255,255,255,.96);
}
.community-poem-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #eee; }
.community-poem-meta-text { min-width: 0; display: grid; gap: 5px; }
.community-poem-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; }
.community-poem-author { font-size: 13px; }
.community-poem-date { font-size: 11px; color: #777; }
.community-poem-description {
    margin: 0;
    font: italic 13px/1.5 Georgia, "Times New Roman", serif;
    color: #625d62;
}

.community-home { margin-top: 44px; padding-top: 26px; border-top: 1px solid #e0e0dc; }
.community-poem-grid.is-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.community-poem-card.is-compact .community-poem-paper { padding: 18px 15px 20px; min-height: 190px; }
.community-poem-card.is-compact .community-poem-title { font-size: 18px; margin-bottom: 9px; }
.community-poem-card.is-compact .community-poem-text { font-size: 14px; line-height: 1.6; }
.community-poem-card.is-compact .community-poem-score-row { align-items: flex-start; flex-direction: column; padding: 8px 9px; }
.community-poem-card.is-compact .community-point-buttons { justify-content: flex-start; width: 100%; }
.community-poem-card.is-compact .community-point-button { padding: 5px 7px; font-size: 10px; }
.community-poem-card.is-compact .community-poem-meta { grid-template-columns: 30px minmax(0, 1fr); padding: 9px 10px; }
.community-poem-card.is-compact .community-poem-avatar { width: 30px; height: 30px; }
.community-poem-card.is-compact .community-poem-description { font-size: 12px; }

@media (max-width: 650px) {
    .community-poem-score-row { align-items: flex-start; flex-direction: column; }
    .community-point-buttons { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .community-poem-grid.is-compact { grid-template-columns: 1fr; }
    .community-poem-paper { padding-left: 20px; padding-right: 20px; }
}

/* ========================================================================== */
/* INDSEND DIGT                                                               */
/* ========================================================================== */
.submit-poem-main { min-width: 0; }
.submit-poem-intro { width: min(100%,700px); margin: 0 0 24px; font: 17px/1.65 Georgia,"Times New Roman",serif; }
.submit-poem-form { width: min(100%,700px); display: grid; gap: 18px; }
.submit-poem-field { display: grid; gap: 7px; }
.submit-poem-field label, .submit-poem-label { font-weight: 650; font-size: 13px; }
.submit-poem-field label span { color:#777; font-weight:400; }
.submit-poem-field input[type="text"], .submit-poem-field input:not([type]), .submit-poem-field textarea,
.submit-poem-field > input {
    width:100%; padding:10px 11px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#222; font:inherit;
}
.submit-poem-field textarea { resize: vertical; line-height:1.55; }
.profile-image-picker { display:flex; flex-wrap:wrap; gap:9px; }
.profile-image-choice { position:relative; cursor:pointer; }
.profile-image-choice input { position:absolute; opacity:0; pointer-events:none; }
.profile-image-choice img { width:50px; height:50px; object-fit:cover; border-radius:50%; border:3px solid transparent; }
.profile-image-choice input:checked + img { border-color:#00947A; }
.paper-picker { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.paper-choice { position:relative; cursor:pointer; }
.paper-choice input { position:absolute; opacity:0; pointer-events:none; }
.paper-choice span { display:block; aspect-ratio:1; background-size:cover; background-position:center; border:3px solid transparent; border-radius:5px; }
.paper-choice input:checked + span { border-color:#00947A; }
.submit-poem-consent { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; }
.submit-poem-consent input { margin-top:3px; }
.submit-poem-preview-wrap { margin-top:6px; padding-top:18px; border-top:1px solid #ddd; }
.submit-poem-preview-wrap h2 { font:700 20px/1.2 Georgia,"Times New Roman",serif; }
.submit-poem-actions { display:flex; justify-content:flex-end; }
.submit-poem-button { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:0; border-radius:6px; background:#00947A; color:white; cursor:pointer; font:inherit; }
.submit-poem-button svg { width:16px; height:16px; }
.submit-poem-button:disabled { opacity:.6; cursor:wait; }
.submit-poem-status { min-height:1.5em; margin:0; font-size:13px; color:#555; }

@media (max-width: 768px) {
    .community-poem-grid.is-compact { grid-template-columns: 1fr; }
    .paper-picker { grid-template-columns: repeat(4, 1fr); }
}

/* ========================================================================== */
/* FÆLLES DIGTNING — PREVIEW + DETALJESIDE                                    */
/* ========================================================================== */

.community-poem-card {
    display: grid;
    grid-template-rows: auto auto auto;
}

/* Alle previews har samme papirhøjde. Hele papiret er et link. */
.community-poem-paper {
    display: block;
    position: relative;
    height: 268px;
    min-height: 268px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.community-poem-paper:hover,
.community-poem-paper:focus { color: inherit; text-decoration: none; }
.community-poem-paper:focus-visible { outline: 2px solid #00947A; outline-offset: -3px; }

.community-poem-card.is-full .community-poem-paper {
    height: auto;
    min-height: 268px;
    overflow: visible;
    cursor: default;
}

.community-poem-ellipsis {
    position: absolute !important;
    left: clamp(22px, 6vw, 54px);
    bottom: 17px;
    z-index: 2;
    font: 700 22px/1 Georgia, "Times New Roman", serif;
    color: #514951;
}

/* Skjul eventuelle gamle controls fra tidligere versioner. */
.community-poem-more,
.community-total-points,
.community-point-plus { display: none !important; }

/* Placering til venstre; Elegant/Evokerende står centreret. */
.community-poem-score-row {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
    align-items: center;
    gap: 12px;
}
.community-poem-placement { grid-column: 1; justify-self: start; }
.community-point-buttons { grid-column: 2; justify-self: center; justify-content: center; }
.community-point-button { justify-content: center; }
.community-point-button.did-point,
.community-point-button.did-point:disabled {
    opacity: 1;
    border-color: rgba(0,148,122,.55);
    background: rgba(0,148,122,.16);
    color: #005f50;
}
.community-point-button:disabled:not(.did-point) { opacity: .72; }

/* Profil: navn + dato hver sin linje; beskrivelse under hele profildelen. */
.community-poem-meta { display: block; padding: 12px 15px 14px; }
.community-poem-profile {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    align-items: center;
    gap: 10px;
}
.community-poem-identity { display: grid; gap: 3px; align-items: start; }
.community-poem-author,
.community-poem-date { display: block; }
.community-poem-description { margin: 10px 0 0 48px; }

/* Forsidens kompakte previews. */
.community-poem-card.is-compact { height: 100%; }
.community-poem-card.is-compact .community-poem-paper {
    height: 210px;
    min-height: 210px;
    padding: 18px 15px 20px;
}
.community-poem-card.is-compact .community-poem-ellipsis {
    left: 15px;
    bottom: 11px;
    font-size: 19px;
}
.community-poem-card.is-compact .community-poem-score-row {
    display: grid;
    grid-template-columns: minmax(50px,1fr) auto minmax(50px,1fr);
    align-items: center;
    padding: 8px 9px;
}
.community-poem-card.is-compact .community-point-buttons { width: auto; justify-content: center; }
.community-poem-card.is-compact .community-poem-meta { display: block; padding: 9px 10px 11px; }
.community-poem-card.is-compact .community-poem-profile { grid-template-columns: 30px minmax(0,1fr); }
.community-poem-card.is-compact .community-poem-description { margin: 8px 0 0 40px; font-size: 12px; }

/* Digtets egen side. */
.community-poem-detail-main { min-width: 0; }
.community-poem-detail-intro {
    width: min(100%,700px);
    margin: 0 0 24px;
    font: 16px/1.6 Georgia,"Times New Roman",serif;
    color: #676167;
}
.community-poem-detail { width: min(100%,780px); }
.community-poem-detail .community-poem-card.is-full .community-poem-paper { padding-top: 34px; padding-bottom: 36px; }
.community-poem-detail .community-poem-text { font-size: 18px; line-height: 1.85; }

@media (max-width: 650px) {
    .community-poem-score-row,
    .community-poem-card.is-compact .community-poem-score-row {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 9px;
    }
    .community-poem-placement { grid-column: 1; justify-self: center; }
    .community-point-buttons { grid-column: 1; justify-self: center; }
}

@media (max-width: 560px) {
    .community-poem-paper { height: 250px; min-height: 250px; }
    .community-poem-card.is-compact .community-poem-paper { height: 220px; min-height: 220px; }
    .community-poem-description,
    .community-poem-card.is-compact .community-poem-description { margin-left: 0; }
}

/* ========================================================================== */
/* FORSIDEOVERSKRIFTER SOM LINKS                                              */
/* ========================================================================== */

.home-section-title-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.home-section-title-link:hover,
.home-section-title-link:focus {
    color: #007966;
    text-decoration-thickness: 2px;
}

.community-home-pagination {
    margin-top: 18px;
}


/* ========================================================================== */
/* FÆLLES DIGTNING — PLACERING, STEMMER OG HOVER                              */
/* ========================================================================== */

/*
 * Placering står til venstre.
 * Stemmeknapperne står direkte nedenunder placeringen.
 */
.community-poem-score-row,
.community-poem-card.is-compact .community-poem-score-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;
}

.community-poem-placement {
    align-self: flex-start;
}

.community-point-buttons,
.community-poem-card.is-compact .community-point-buttons {
    display: flex;
    width: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}

.community-point-button {
    min-width: 102px;
    justify-content: center;
    text-align: center;
}

.community-poem-card.is-compact .community-point-button {
    min-width: 90px;
}

/* Papiret bliver diskret fremhævet ved hover/fokus. */
.community-poem-paper {
    transition:
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

a.community-poem-paper:hover,
a.community-poem-paper:focus-visible {
    box-shadow:
        inset 0 0 0 3px rgba(0, 148, 122, 0.24),
        inset 0 0 28px rgba(255, 255, 255, 0.20);
    filter: brightness(1.035);
}


/* ========================================================================== */
/* NYE ARTIKLER — SAMLET OPSLAG                                               */
/* ========================================================================== */

.latest-articles-archive {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
}

.latest-articles-list {
    display: grid;
    border-top: 1px solid #deddda;
}

.latest-article-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 4px;
    border-bottom: 1px solid #deddda;
    color: #222;
    text-decoration: none;
}

.latest-article-row:hover,
.latest-article-row:focus {
    background: rgba(0, 148, 122, 0.045);
}

.latest-article-row-text {
    display: grid;
    gap: 4px;
}

.latest-article-row-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.3;
}

.latest-article-row-meta {
    font-size: 12px;
    color: #717171;
}

.latest-article-row svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #00947A;
}

@media (max-width: 560px) {
    .community-point-button {
        min-width: 96px;
    }

    .latest-article-row-title {
        font-size: 17px;
    }
}

/* ========================================================================== */
/* FÆLLES DIGTNING — ENS PREVIEW-HØJDE + SCORELAYOUT                          */
/* ========================================================================== */

/*
   SCORELAYOUT:
   Rank står til venstre i øverste række.
   Elegant/Evokerende står i næste række, centreret i hele kortets bredde.
*/
.community-poem-score-row,
.community-poem-card.is-compact .community-poem-score-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-items: initial !important;
    gap: 8px 10px !important;
}

.community-poem-placement,
.community-poem-card.is-compact .community-poem-placement {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
}

.community-point-buttons,
.community-poem-card.is-compact .community-point-buttons {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
}

/* ---------------- PREVIEW: FASTE HØJDER ---------------- */

/*
   Standardkort har altid præcis samme tre rækkehøjder.
   Derfor kan hverken "…" eller beskrivelsen ændre kortets totalhøjde.
*/
.community-poem-card:not(.is-full) {
    grid-template-rows: 268px 92px 118px !important;
    height: 478px !important;
    min-height: 478px !important;
    max-height: 478px !important;
    overflow: hidden;
}

.community-poem-card:not(.is-full) .community-poem-paper {
    box-sizing: border-box;
    height: 268px !important;
    min-height: 268px !important;
    max-height: 268px !important;
    overflow: hidden !important;
}

/* "…" ligger oven på papiret og fylder 0px i dokument-flowet. */
.community-poem-card:not(.is-full) .community-poem-ellipsis {
    position: absolute !important;
    left: clamp(22px, 6vw, 54px);
    bottom: 17px;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    pointer-events: none;
}

.community-poem-card:not(.is-full) .community-poem-score-row {
    box-sizing: border-box;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: 9px 13px !important;
    overflow: hidden;
}

.community-poem-card:not(.is-full) .community-poem-meta {
    box-sizing: border-box;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    overflow: hidden;
}

/*
   Beskrivelsen reserverer altid plads til 2 linjer.
   For lang tekst bliver afkortet med ellipsis.
*/
.community-poem-card:not(.is-full) .community-poem-description {
    display: -webkit-box !important;
    height: 3em !important;
    min-height: 3em !important;
    max-height: 3em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
}

.community-poem-card:not(.is-full) .community-poem-description.is-empty {
    visibility: hidden;
}

/* Forsidens kompakte previews har også faste, identiske højder. */
.community-poem-card.is-compact:not(.is-full) {
    grid-template-rows: 210px 88px 108px !important;
    height: 406px !important;
    min-height: 406px !important;
    max-height: 406px !important;
}

.community-poem-card.is-compact:not(.is-full) .community-poem-paper {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
}

.community-poem-card.is-compact:not(.is-full) .community-poem-score-row {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
}

.community-poem-card.is-compact:not(.is-full) .community-poem-meta {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
}

/* ---------------- DIGT.HTML / FULL VIEW ---------------- */

/* Full view bruger naturlig højde og viser hele titel/digt/beskrivelse. */
.community-poem-card.is-full {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto auto auto !important;
}

.community-poem-card.is-full .community-poem-paper,
.community-poem-card.is-full .community-poem-score-row,
.community-poem-card.is-full .community-poem-meta,
.community-poem-card.is-full .community-poem-description {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.community-poem-card.is-full .community-poem-description {
    display: block !important;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* Digtets titel bor nu inde på papiret. */
.community-poem-detail-main {
    padding-top: 0;
}

.community-poem-detail {
    margin-top: 0;
}

.community-poem-detail .community-poem-card.is-full .community-poem-title {
    margin-top: 0;
    margin-bottom: 18px;
}

/* Mobil: behold samme alignment, men med de tidligere papirhøjder. */
@media (max-width: 650px) {
    .community-poem-score-row,
    .community-poem-card.is-compact .community-poem-score-row {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-rows: auto auto !important;
        justify-items: initial !important;
    }

    .community-poem-placement,
    .community-poem-card.is-compact .community-poem-placement {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    .community-point-buttons,
    .community-poem-card.is-compact .community-point-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
    }
}

@media (max-width: 560px) {
    .community-poem-card:not(.is-full) {
        grid-template-rows: 250px 92px 118px !important;
        height: 460px !important;
        min-height: 460px !important;
        max-height: 460px !important;
    }

    .community-poem-card:not(.is-full) .community-poem-paper {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    .community-poem-card.is-compact:not(.is-full) {
        grid-template-rows: 220px 88px 108px !important;
        height: 416px !important;
        min-height: 416px !important;
        max-height: 416px !important;
    }

    .community-poem-card.is-compact:not(.is-full) .community-poem-paper {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }
}

/* ========================================================================== */
/* FÆLLES DIGTNING — POINTMÆRKER OG TEKSTGRÆNSER                              */
/* ========================================================================== */

.community-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
}

.community-score-badge-image {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.community-score-badge.is-en {
    color: inherit;
}

.submit-poem-limit {
    justify-self: end;
    margin-top: -2px;
    color: #777;
    font-size: 11px;
    line-height: 1.3;
}

.submit-poem-id {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================================================== */
/* FORSIDENS 4 BILLEDBOKSE                                                    */
/* ========================================================================== */
.featured-box-image-only .box-img::after {
    display: none;
}

.featured-box-image-only .featured-box-text {
    display: none;
}

.featured-box-image-only .box-img img {
    object-position: center center;
}


/* ========================================================================== */
/* COMPACT BANNER — TEXT-ONLY PNG                                             */
/* ========================================================================== */
/* Det nye scroll-banner indeholder allerede kun Rugemie.dk-teksten. */
.banner-compact-link {
    clip-path: none;
}

/* ========================================================================== */
/* TITELKORT V3 — SVG                                                         */
/* ========================================================================== */

/*
 * V3 erstatter hele den tidligere CSS-tekst-effekt.
 * SVG'en tegner konturer, gradient, bevel og glans inde i bogstaverne.
 */
.image-title-card-v3 {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

.image-title-card-v3 .image-title-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* V2-spanlag skal aldrig vises inde i V3. */
.image-title-card-v3 .image-title-line,
.image-title-card-v3 .image-title-layer {
    display: none !important;
}

.news-title-card.image-title-card-v3 {
    padding: 0 !important;
    gap: 0 !important;
}

.post-image-title-card.image-title-card-v3 {
    border-radius: 12px;
}

/* ========================================================================== */
/* TITELKORT — BILLEDFILTER                                                   */
/* ========================================================================== */

.news-image-wrap,
.post-image-wrap {
    position: relative;
    isolation: isolate;
}

.title-image-filter-light::after,
.title-image-filter-medium::after,
.title-image-filter-strong::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.title-image-filter-light > img {
    filter: saturate(.90) brightness(1.03) contrast(.96);
}

.title-image-filter-light::after {
    background: rgba(255, 255, 255, .08);
}

.title-image-filter-medium > img {
    filter: saturate(.78) brightness(1.06) contrast(.90);
}

.title-image-filter-medium::after {
    background: rgba(255, 255, 255, .16);
}

.title-image-filter-strong > img {
    filter: saturate(.64) brightness(1.10) contrast(.84);
}

.title-image-filter-strong::after {
    background: rgba(255, 255, 255, .24);
}

.post-image-wrap.title-image-filter-light::after,
.post-image-wrap.title-image-filter-medium::after,
.post-image-wrap.title-image-filter-strong::after {
    border-radius: 12px;
}

/* Lucide folder/clock på artikelkortene. */
.news-meta-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-meta-line svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    stroke-width: 1.8;
}


/* POST METADATA — LUCIDE CLOCK / FOLDER */
.post-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
}
.post-meta-line > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-width: 1.8;
}

/* ========================================================================== */
/* FORSIDEOVERSKRIFTER — NYE ARTIKLER / NYE FÆLLES DIGTE                     */
/* ========================================================================== */

.news-title {
    font-family: Arial, Helvetica, sans-serif;
}

.home-section-title-link {
    position: relative;
    display: inline-block;
    color: #007966;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.home-section-title-link::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: -9px;
    height: 1px;
    background: currentColor;
}

.home-section-title-link:hover,
.home-section-title-link:focus {
    color: #007966;
    text-decoration: none;
}

.home-section-title-link:hover::after,
.home-section-title-link:focus::after {
    height: 2px;
}

/* ========================================================================== */
/* NYE ARTIKLER — KORT BESKRIVELSE                                            */
/* ========================================================================== */

.news-description {
    display: -webkit-box;
    min-height: 2.9em;
    margin: 0 0 6px;
    overflow: hidden;
    color: #555;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ========================================================================== */
/* POST.HTML — SMALLERE, SAMLET ARTIKELKOLONNE                                */
/* ========================================================================== */

/*
 * Brødteksten er ca. 700 px bred. En artikelkolonne på 780 px giver kun
 * et roligt felt rundt om teksten i stedet for den tidligere 960 px flade.
 * Titel, metadata, print-række, titelbillede og indhold følger samme bredde.
 */
.post-page .post {
    width: 100%;
    max-width: 780px;
}

.post-page .post-image-wrap,
.post-page .post-image,
.post-page .print-page-row {
    width: 100%;
    max-width: 780px;
}

@media (min-width: 1100px) {
    .post-page .main_layout {
        max-width: 1116px;
        grid-template-columns: minmax(0, 780px) 288px;
    }
}

@media (max-width: 1050px) {
    .post-page .post {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================================================== */
/* FORSIDE — OVERSKRIFTSTREGER, META OG PAGINATION                            */
/* ========================================================================== */

/* Ca. 2/3 bredere end selve overskriftsteksten. */
.home-section-title-link::after {
    left: 50% !important;
    right: auto !important;
    width: 166% !important;
    transform: translateX(-50%);
}

/* Kategori og dato på samme linje; deres eksisterende farver bevares. */
.news-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.news-meta-row .news-category,
.news-meta-row .news-date {
    margin: 0;
}

/* Kun forsiden: grønne Forrige/Næste-knapper med hvid Arial-tekst. */
.home-page .pagination-button {
    background: #00947A;
    border-color: #00947A;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.home-page .pagination-button:hover:not(:disabled) {
    background: #007966;
    border-color: #007966;
    color: #ffffff;
}

.home-page .pagination-button:disabled {
    background: #00947A;
    border-color: #00947A;
    color: #ffffff;
    opacity: .42;
}

/* ========================================================================== */
/* FORSIDE — ENS LÆNGDE PÅ STREGERNE                                          */
/* ========================================================================== */

/* Begge overskrifter får præcis samme streglængde. */
.home-section-title-link::after {
    width: 230px !important;
    max-width: none !important;
}

/* ========================================================================== */
/* POST — DIRECTORY MED TOP- OG BUNDGRADIENT, MEN UDEN BUND-BORDER            */
/* ========================================================================== */

.post-page .directory {
    background: linear-gradient(
        to bottom,
        #dddddd 0%,
        #e5e5e5 5%,
        #eeeeee 10%,
        #eeeeee 90%,
        #e5e5e5 95%,
        #dddddd 100%
    );
    border-bottom: 0 !important;
}


/* ========================================================================== */
/* NYE ARTIKLER — ROLIGERE, MERE REDAKTIONEL KORTSTIL                         */
/* ========================================================================== */

.home-page .news-grid {
    column-gap: 20px;
    row-gap: 50px;
}

.home-page .news-image-wrap {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .09);
}

.home-page .news-img {
    border-radius: 10px;
}

.home-page .news-title-card {
    transform: scale(.88);
    transform-origin: center center;
}

.home-page .news-title-bold {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.28;
    font-weight: 700;
}

.home-page .news-description {
    min-height: 3.15em;
    margin: 0 0 10px;
    color: #555;
    font-size: 13px;
    line-height: 1.55;
}

.home-page .news-meta-row {
    gap: 13px;
}

.home-page .news-category {
    font-size: 10px;
    line-height: 1.35;
}

.home-page .news-date {
    font-size: 10.5px;
    line-height: 1.35;
}

.home-page .news-meta-line svg {
    width: 11px;
    height: 11px;
}

@media (max-width: 560px) {
    .home-page .news-grid {
        row-gap: 36px;
    }
}


/* ========================================================================== */
/* FORSIDENS 4 TOPBOKSE — TITELKORT                                           */
/* ========================================================================== */

.headline .featured-box {
    border: 2px solid rgba(0, 148, 122, .22) !important;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
    background: #eeeeee;
}

.featured-box-titlecard .box-img {
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
}

.featured-box-titlecard .box-img::after {
    background: none;
}

.featured-box-titlecard .box-img img {
    border-radius: inherit;
    object-position: center center;
}

.featured-box-titlecard .featured-title-card {
    transform: scale(.88);
    transform-origin: center center;
}

.featured-box:hover .box-img {
    transform: none;
}

.featured-box:hover .box-img img {
    transform: scale(1.025);
}


/* ========================================================================== */
/* FORSIDENS 4 TOPBOKSE — TYKKERE KANT I FARVER DER PASSER TIL BILLEDERNE    */
/* ========================================================================== */

.headline .featured-box {
    border-width: 3px !important;
    border-style: solid !important;
}

/* Fælles Digtning — varm papir/bog-tone. */
.headline .featured-box:nth-child(1) {
    border-color: #b49a7a !important;
}

/* August Digtning — solsikkeguld. */
.headline .featured-box:nth-child(2) {
    border-color: #d8a928 !important;
}

/* Artikler til Begyndere — rolig blå fra skrivebilledet. */
.headline .featured-box:nth-child(3) {
    border-color: #79aee8 !important;
}

/* Tilfældig — varm gylden/orange fra kortbilledet. */
.headline .featured-box:nth-child(4) {
    border-color: #d79a22 !important;
}

/* ========================================================================== */
/* RIGHT COLUMN — LIDT MERE AFRUNDEDE TOOL-KASSER                             */
/* ========================================================================== */

.tools {
    border-radius: 8px;
    overflow: hidden;
}

.tool-item {
    border-radius: 4px;
}


/* ========================================================================== */
/* RIGHT COLUMN — AFRUNDET PROFIL OG SØGNING                                  */
/* ========================================================================== */

.profile,
.site-search {
    border-radius: 8px;
}

.profile-name {
    margin: 0 0 8px;
    color: #222;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.profile .profile-text {
    margin-bottom: 10px;
    text-align: left;
}


/* ========================================================================== */
/* CATEGORY — INDEX-LIGNENDE ARTIKELSHOWCASE I ARTIKELKATEGORIERNE             */
/* ========================================================================== */

.category-page .category-showcase-grid {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 50px;
}

.category-page .category-showcase-card {
    min-width: 0;
}

.category-page .category-showcase-card .news-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .09);
    isolation: isolate;
}

.category-page .category-showcase-card .news-img {
    border-radius: 10px;
}

.category-page .category-showcase-card .news-title-card {
    transform: scale(.88);
    transform-origin: center center;
}

.category-page .category-showcase-card .news-title-bold {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.28;
    font-weight: 700;
}

.category-page .category-showcase-card .news-description {
    min-height: 3.15em;
    margin: 0 0 10px;
    color: #555;
    font-size: 13px;
    line-height: 1.55;
}

.category-page .category-showcase-card .news-meta-row {
    gap: 13px;
}

.category-page .category-showcase-card .news-category {
    font-size: 10px;
    line-height: 1.35;
}

.category-page .category-showcase-card .news-date {
    font-size: 10.5px;
    line-height: 1.35;
}

.category-page .category-showcase-card .news-meta-line svg {
    width: 11px;
    height: 11px;
}

.category-page .pagination-button {
    background: #00947A;
    border-color: #00947A;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.category-page .pagination-button:hover:not(.is-disabled) {
    background: #007966;
    border-color: #007966;
    color: #ffffff;
}

.category-page .pagination-button.is-disabled {
    background: #00947A;
    border-color: #00947A;
    color: #ffffff;
    opacity: .42;
}

@media (max-width: 768px) {
    .category-page .category-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }
}

@media (max-width: 560px) {
    .category-page .category-showcase-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================== */
/* NYE ARTIKLER — KUN KNAPPERNE HAR FAST LODRET PLACERING                     */
/* ========================================================================== */

/* Artiklerne beholder naturlig højde. Kun paginationen er forankret. */
.home-page .latest-posts-stage {
    position: relative;
    height: 670px;
}

.home-page .latest-posts-stage .news-title-bold {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-page .posts-pagination-fixed {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
}

@media (max-width: 560px) {
    .home-page .latest-posts-stage {
        height: auto;
    }

    .home-page .posts-pagination-fixed {
        position: static;
        margin-top: 26px;
    }
}


/* ========================================================================== */
/* FÆLLES DIGTNING — SAMME 3-KOLONNE KORT SOM PÅ FORSIDEN                     */
/* ========================================================================== */

.category-page .community-category-grid {
    width: min(100%, 780px);
    margin: 18px auto 0;
    row-gap: 22px;
}

/*
 * Basisklassen .community-poem-grid.is-compact kommer direkte fra forsiden:
 * 3 kolonner på desktop og de samme kompakte digtkort.
 */
@media (max-width: 768px) {
    .category-page .community-category-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================== */
/* FORSIDE — 4 FREMHÆVEDE TOPBOKSE                                           */
/* ========================================================================== */

/*
 * Samme lodrette afstand på desktop:
 * banner -> topbokse = 56px
 * topbokse -> hovedindhold = 56px
 */
.home-page .headline {
    grid-template-columns: repeat(4, 310px);
    justify-content: center;
    column-gap: 22px;
    row-gap: 28px;

    padding: 56px 24px 0;
    overflow: visible;
}

.home-page .main_layout {
    margin-top: 56px;
}

.home-page .headline .featured-box {
    --featured-frame: #b49a7a;
    --featured-label-text: #1F2328;

    position: relative;
    width: 310px;
    height: 170px;
    overflow: visible;

    border: 3px solid var(--featured-frame) !important;
    border-radius: 10px;
    background: #eeeeee;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
    isolation: isolate;
}

/* De fire rammefarver. Mærkerne bruger præcis samme farve. */
.home-page .headline .featured-box:nth-child(1) {
    --featured-frame: #F47F6B;
}

.home-page .headline .featured-box:nth-child(2) {
    --featured-frame: #F3C95C;
}

.home-page .headline .featured-box:nth-child(3) {
    --featured-frame: #EFA6BC;
}

.home-page .headline .featured-box:nth-child(4) {
    --featured-frame: #F49A57;
}

/* Billedet klippes kun inde i hovedrammen. */
.home-page .headline .featured-box > .box-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 7px;
}

/*
 * FREMHÆVET-mærket:
 * - går IND i billedet
 * - samme farve som kortets kant
 * - næsten dobbelt så bredt som før
 * - lavere/langstrakt proportion
 */
.home-page .headline .featured-box::before {
    content: "FREMHÆVET";
    position: absolute;
    z-index: 6;
    top: -1px;
    left: 50%;

    width: 190px;
    height: 22px;
    transform: translateX(-50%);

    display: grid;
    place-items: center;
    box-sizing: border-box;

    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - 14px) 100%,
        14px 100%
    );

    background: var(--featured-frame);
    color: var(--featured-label-text);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;

    pointer-events: none;
}

/* Lille tom markør nederst — også samme farve som kanten. */
.home-page .headline .featured-box::after {
    content: "";
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: -1px;

    width: 58px;
    height: 6px;
    transform: translateX(-50%);

    box-sizing: border-box;
    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 100%,
        0 100%
    );

    background: var(--featured-frame);
    pointer-events: none;
}

/* Tablet: samme luft over og under sektionen. */
@media (max-width: 1050px) {
    .home-page .headline {
        grid-template-columns: repeat(2, minmax(0, 300px));
        column-gap: 22px;
        row-gap: 28px;
        padding-top: 36px;
        padding-bottom: 0;
    }

    .home-page .main_layout {
        margin-top: 36px;
    }

    .home-page .headline .featured-box {
        width: 100%;
        height: 165px;
    }

    .home-page .headline .featured-box::before {
        width: 178px;
        height: 21px;
    }
}

/* Mobil: stadig samme afstand før og efter topboks-sektionen. */
@media (max-width: 560px) {
    .home-page .headline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 20px;

        padding-top: 28px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 0;
    }

    .home-page .main_layout {
        margin-top: 28px;
    }

    .home-page .headline .featured-box {
        width: 100%;
        height: 130px;
    }

    .home-page .headline .featured-box::before {
        width: min(150px, 82%);
        height: 19px;
        font-size: 7.5px;
        letter-spacing: .10em;

        clip-path: polygon(
            0 0,
            100% 0,
            calc(100% - 11px) 100%,
            11px 100%
        );
    }

    .home-page .headline .featured-box::after {
        width: 46px;
        height: 5px;
    }
}


/* ========================================================================== */
/* FORSIDE — LYSERE / BLØDERE FARVEPALETTE                                    */
/* ========================================================================== */

/*
 * Referenceudtrykket er mere rent hvidt og bruger lysere candy/pastelfarver.
 * Dette gælder kun forsiden; øvrige sider beholder deres nuværende baggrund.
 */
.home-page .news-title,
.home-page .news-title a {
    color: #008f79;
}

.home-page .news-title-bold {
    color: #202124;
}

.home-page .news-description {
    color: #4a4a4a;
}

.home-page .news-category {
    color: #009b83;
}

.home-page .news-date {
    color: #707070;
}

.home-page .news-item:hover {
    background: #fbfbfb;
}


/* ====================================================== */
/* ARTIKELBILLEDE — KREDITERING                           */
/* ====================================================== */
.post-page .post-image-credit {
    width: 100%;
    max-width: 960px;
    margin: -13px 2px 20px;
    color: #747474;
    font-size: 11px;
    line-height: 1.45;
}

.post-page .post-image-credit[hidden] {
    display: none !important;
}

.post-page .post-image-credit a {
    color: #5f6570;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-page .post-image-credit a:hover,
.post-page .post-image-credit a:focus-visible {
    color: #00947A;
}

@media print {
    .post-page .post-image-credit {
        margin-top: -10px;
        color: #555;
        font-size: 9.5pt;
    }
}


/* ========================================================================== */
/* SMART NAVIGATION — STABILT SITESHELL                                       */
/* ========================================================================== */

/* Undgå vandret "hop", når en destination får/fjerner browserens scrollbar. */
html {
    scrollbar-gutter: stable;
}

/*
 * Kun dette område skiftes ved intern navigation.
 * Banner, floral-zone og compact banner bliver stående i DOM'en.
 */
.rugemie-page-view {
    min-height: 62vh;
    view-transition-name: rugemie-page;
}

html.rugemie-is-navigating {
    cursor: progress;
}

html.rugemie-is-navigating a,
html.rugemie-is-navigating button {
    cursor: progress;
}

/* Meget diskret overgang; banneret deltager ikke i animationen. */
::view-transition-old(rugemie-page) {
    animation-duration: 110ms;
    animation-timing-function: ease-out;
}

::view-transition-new(rugemie-page) {
    animation-duration: 130ms;
    animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(rugemie-page),
    ::view-transition-new(rugemie-page) {
        animation: none;
    }
}


/* ========================================================================== */
/* TOOL CLIMBER — tool-kassens originale mål er urørte                        */
/* ========================================================================== */

.tools-shell {
    position: relative;
    width: 100%;
    min-width: 0;
}

/*
 * Climber har samme .tool-img wrapper og samme .custom-tool-icon som
 * alle andre tools. Kun wrapperens position/bredde er speciel.
 *
 * Wrapperen er 48px bred på desktop — præcis samme bredde som det
 * eksisterende .custom-tool-icon — så billedets canvas starter direkte
 * ved kassens højre kant uden noget gap.
 */
.tools-climber {
    position: absolute;
    z-index: 4;
    left: calc(100% - 5px);
    top: calc(33.333% - 35px);
    width: 58px;
    height: 70px;
    margin: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .tools-climber {
        display: none;
    }
}

/* ========================================================================== */
/* KATEGORIER — ARTIKELSHOWCASE UDEN HVID CONTAINER                          */
/* ========================================================================== */

/*
 * De almindelige artikelkategorier bruger allerede createRugemieArticleCard()
 * ligesom forsiden. Den eneste forskel, der gav den hvide flade, var den
 * generelle .content-baggrund. Derfor ændres KUN baggrunden her.
 *
 * Padding, grid, kortstørrelser, hover, border-radius og øvrig spacing
 * beholder deres eksisterende indstillinger.
 */
.category-page .category-content.category-showcase-content {
    background: transparent;
}



/* ========================================================================== */
/* ARTIKELKORT — IMAGE WRAP SAMME HØJDE SOM BILLEDET                          */
/* ========================================================================== */

.home-page .news-image-wrap,
.category-page .category-showcase-card .news-image-wrap {
    height: 150px;
}


/* ========================================================================== */
/* NYE ARTIKLER — SAMME KORTSTIL SOM INDEX, 5 RÆKKER                         */
/* ========================================================================== */

.latest-articles-archive {
    width: min(100%, 780px);
    margin-left: auto;
    margin-right: auto;
}

.latest-articles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 50px;
}

.latest-articles-card {
    min-width: 0;
}

.latest-articles-card .news-image-wrap {
    position: relative;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .09);
    isolation: isolate;
}

.latest-articles-card .news-img {
    border-radius: 10px;
}

.latest-articles-card .news-title-card {
    transform: scale(.88);
    transform-origin: center center;
}

.latest-articles-card .news-title-bold {
    margin: 0 0 7px;
    color: #202124;
    font-size: 16px;
    line-height: 1.28;
    font-weight: 700;
}

.latest-articles-card .news-description {
    min-height: 3.15em;
    margin: 0 0 10px;
    color: #4a4a4a;
    font-size: 13px;
    line-height: 1.55;
}

.latest-articles-card .news-meta-row {
    gap: 13px;
}

.latest-articles-card .news-category {
    color: #009b83;
    font-size: 10px;
    line-height: 1.35;
}

.latest-articles-card .news-date {
    color: #707070;
    font-size: 10.5px;
    line-height: 1.35;
}

.latest-articles-card .news-meta-line svg {
    width: 11px;
    height: 11px;
}

.latest-articles-card:hover {
    background: #fbfbfb;
}

@media (max-width: 768px) {
    .latest-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }
}

@media (max-width: 560px) {
    .latest-articles-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================== */
/* ARTIKELKORT — LIDT MERE LUFT MELLEM BILLEDE OG TITEL                      */
/* ========================================================================== */

.home-page .news-image-wrap,
.category-page .category-showcase-card .news-image-wrap,
.latest-articles-card .news-image-wrap {
    margin-bottom: 10px;
}