/* ==========================================================================
   Bredde-systemet — ÉN kilde til sidens bredder (KC04: header/footer-bredde,
   smallere indholdskolonne, sidebar-skabelon; statusmøde 2026-08-19).

   Tallene er hentet direkte ud af Lovable-mockuppens egen CSS
   (kc-idebank-viden.lovable.app/assets/index-*.css), ikke gættet:
     .container{width:100%;margin-inline:auto;padding-inline:2rem}
     @2xl .container{max-width:1400px}       -> --kc-page-max / --kc-page-pad
     .max-w-3xl{max-width:48rem}             -> mockuppens læsbare tekstkolonne
     .w-72{width:18rem}                      -> --kc-sidebar-w
   18rem er samtidig den bredde .material-factbox-desktop allerede bruger, så
   sidebar og faktaboks står i samme skala.

   Før dette havde sitet ingen fælles bredde: header = Bootstrap .container
   (1320px @xxl, 12px gutter), indhold = .frame-container-default (1320px, 20px
   gutter), Idébase-single = 1200px, footer = 100 % full-bleed. Fire forskellige
   kanter.
   ========================================================================== */
:root {
    --kc-page-max: 1400px;
    --kc-page-pad: 2rem;
    --kc-sidebar-w: 18rem;
    --kc-gutter: 2rem;
}

/*body {
  background-color: #c5c5b8;
}*/
body{
    display: block !important;
    outline: none !important;
}

/* --- Sidebredde: header og indholdsframes uden for .kc-page --------------- */
/* Bootstraps egen .container retunes til mockuppens bredde, ét sted, frem for at
   special-case hver bruger af den (headeren bærer "container navbar-modern-container",
   og andre blokke i layoutet bruger den også).

   !important og :not(.footer-container) er BEGGE nødvendige — målt i browser
   2026-08-21, ikke antaget. To ting slår ellers regelen:

   1. idefa_basesite (delt modul, må ikke rettes) sætter i
      Resources/Public/Scss/Theme/_basesite.scss:72
        .container:not(.footer-container){max-width:1140px !important}
      Den er både mere specifik OG !important, så en ren .container-regel taber
      uanset filrækkefølge. Selektoren her spejler basesites, så
      .footer-container beholder sin full-bleed-behandling fra samme fil.

   2. Sitets kritiske CSS i
      Configuration/TypoScript/SiteKonfirmandCenter/zzz_template82.typoscript:101
      (KU: SiteKirkenUnderviser/zzz_template84.typoscript:65) står i et INLINE
      <style> EFTER konfirmander.css og sætter .container padding 15px samt en
      fast width 750/970/1170px pr. breakpoint. Derfor nulstilles width til 100 %
      her — ellers er headeren 1170px bred uanset max-width.

   Uden dette lå headerens indholdskant på 15/24/128/405 px mod .kc-page's
   32/32/32/292 px ved 375/768/1366/1920. */
.container:not(.footer-container) {
    width: 100% !important;
    max-width: var(--kc-page-max) !important;
    padding-left: var(--kc-page-pad) !important;
    padding-right: var(--kc-page-pad) !important;
}
/* Den kritiske CSS giver også .container de gamle Bootstrap-3-clearfix-pseudo-
   elementer (`.container:before/:after{content:" ";display:table}`). I den
   moderne navbar er .container display:flex med gap:16px, så de to pseudo-
   elementer bliver STRAY FLEX ITEMS: logoet blev skubbet til x=48 i stedet for
   32, og .navbar-modern-actions 8px ud over højre kant. Clearfix er uden
   funktion i en flex-container, så den slås fra her.
   To klasser i selektoren (0,2,0) frem for !important: den kritiske CSS'
   `.container:before` er (0,1,0), og da den står inline EFTER denne fil ville en
   lige så specifik regel tabe på rækkefølge — målt. */
.container.navbar-modern-container::before,
.container.navbar-modern-container::after {
    content: none;
    display: none;
}
/* Logoet skal flugte med containerens padding-kant som i mockuppen;
   idefa_navigation_extender giver .navbar-modern-brand padding hele vejen rundt
   (nav_layout_modern.scss). Kun den vandrette nulstilles — den lodrette er der
   stadig af hensyn til klikfladen. */
.navbar-modern-brand {
    padding-left: 0;
    padding-right: 0;
}
/* Frames uden for .kc-page (colPos 8/9) skal have samme kant som resten.
   Erstatter bootstrap_package's breakpoint-trappe 540/720/960/1140/1320px med
   mockuppens ene bredde. */
.frame-container-default {
    max-width: var(--kc-page-max);
    padding-left: var(--kc-page-pad);
    padding-right: var(--kc-page-pad);
}

/* --- Indholdskolonne + sidebar (Templates/Page/Default.html) -------------- */
.kc-page {
    max-width: var(--kc-page-max);
    margin: 0 auto;
    padding-left: var(--kc-page-pad);
    padding-right: var(--kc-page-pad);
}
/* .kc-page ER bredde-autoriteten herinde, så frames indeni må ikke lægge deres
   egen max-width og padding oven i. Samme greb som .hero-banner .frame-container
   længere nede i filen.
   !important er nødvendigt fordi .container-retunen ovenfor selv må bruge
   !important (se dens kommentar) — uden det her ville en .container INDE i
   .kc-page få 1400px/2rem oven i .kc-page's egen og give præcis den dobbelte
   indrykning reglen skal forhindre. Reglen står EFTER retunen, så den vinder
   ved samme specificitet og !important. */
.kc-page .frame-group-container,
.kc-page .frame-container,
.kc-page .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.kc-page-inner {
    display: flex;
    flex-direction: column;
    gap: var(--kc-gutter);
}
/* min-width:0 er nødvendig på flex-børn: uden den kan et langt ord, en bred
   tabel eller et billede tvinge kolonnen bredere end sin andel og skubbe
   sidebaren ud af rækken. */
.kc-content,
.kc-sidebar {
    min-width: 0;
}
/* 992px = samme breakpoint som .material-body-inner bruger til sin
   faktaboks-kolonne, så de to to-kolonne-layouts skifter samtidig. */
@media screen and (min-width: 992px) {
    .kc-page-inner {
        flex-direction: row;
        align-items: flex-start;
    }
    .kc-content {
        flex: 1 1 auto;
    }
    .kc-sidebar {
        width: var(--kc-sidebar-w);
        flex-shrink: 0;
    }
}

/*
.owl-with-arrownav .owl-carousel .owl-nav.disabled {display:none !important;}
*/

.tx-dmailsubscribe input {
    margin-bottom: 15px;
    width: 100%;
}

.cookiepolicy {
    width: 100%;
}

.cookies3rdparty a, .cookiepolicy a {
    color:#fff;
}

.tx-dmailsubscribe ul {
    list-style-type: none;
    padding-left: 0;
}

#main a:link,
#main a:visited {
    color: #bf0929;
    text-decoration: none;
}

.navbar-sticky.navbar-stuck .navbar-nav .site-search {
    width: 200px !important;
}

.widget-small-title::after, body #main .widget-small-title::after {
    display: none !important;
}

footer {
    margin-top: 20px !important;
}
.footer .footer-sidebars .btn-default {
    color: #ffffff !important;
}
.backstretch > img{
  top: -40px !important;
}

#navbar #menu-main-navigation-menu{
    background-color: #C61E23 !important;
}
/*.navbar.navbar-sticky.navbar-stuck{
    background-color: #C61E23 !important;
}*/
.navbar-stuck #navbar #menu-main-navigation-menu{
    background-color: inherit !important;
}
/*.posts-box-carousel.owl-with-arrownav {
    padding-top: 40px;
}*/
/*.search-wrapper{
    padding-bottom: 40px;
}*/

#navbar-secound .navbar-nav li .sub-menu{
    z-index: 5;
}
#navbar-secound #menu-main-navigation-menu > li > a::before {
    border-left: 1px solid #ffffff;
    content: "";
    margin-right: 20px;
}
#navbar-secound #menu-main-navigation-menu li:first-child a::before {
    border: medium none;
    margin: 0;
}
#navbar-secound .navbar-nav > li > a{
    padding-left: 0;
    padding-right: 20px;
}
#navbar-secound .navbar-nav > li:first-child > a{
    padding-left: 20px;
}


.container.navbar-secound {
    padding-top: 40px;
    padding-bottom: 30px;
}
.search-wrapper.container.one-col-grid {
    padding-top: 2px !important;
}


.navbar-nav > li > strong {
    font-size: 13px;
    padding: 15px 14px 16px 18px;
}
/*#navbar-secound .navbar-nav > li > strong {
    line-height: 3.40;
}*/
.navbar-stuck .navbar-nav > li > strong {
    padding-bottom: 15px;
    padding-top: 14px;
    text-transform: uppercase;
}
#navbar #menu-main-navigation-menu .menu-item strong{
    line-height: 4.60;
}
#navbar-secound .navbar-nav > li {
    color: #fff;
}
#navbar-secound .navbar-nav > li a {
    color: #fff;
}
#navbar-secound .navbar-nav .menu-first{
    color: #000;
}
/*#navbar-secound #menu-main-navigation-menu {
    padding: 12px 0;
}*/
#navbar-secound .navbar-nav > li > a {
    font-size: 12px;
    /*padding: 0 14px 0 18px;*/
}
/*#navbar-secound .navbar-nav > li:hover a {
    background-color: inherit !important;
    color: #000;
    border-color: #fff;
}*/
/*#navbar-secound #menu-main-navigation-menu li a {
    border-left: 1px solid #fff;
}*/
#navbar-secound .navbar-nav > li:first-child a{
    color: #000;
    border-left: none !important;
}
#menu-main-navigation-menu .sitelogo a.navbar-logo:hover{
    background-color: transparent !important;
    cursor: default !important;
}

#navbar-secound #menu-main-navigation-menu li:hover > a{
    background-color: #cccccc !important;
}
.sub-menu{
    padding: 0px;
}
@media (min-width: 992px){
    .navbar-secound{
        display: block;
    }
    #navbar-secound{
        display: block;
    }
    .navbar-stuck #navbar{
        margin-top: -61px;
    }
    .navbar-stuck .container.top-bar{
        opacity: 0;
    }
/*}
@media (min-width: 767px){*/
    .navbar-stuck .navbar-logo{
      position: inherit !important;
      line-height: 0 !important;
    }
    .navbar-stuck .navbar-nav {
        padding-left: 0 !important;
    }
    /*.has-nav-menu .container > .navbar-header {
        margin-bottom: -37px;
    }*/
    #navbar{
        /*margin-top: -18px;*/
        padding-bottom: 0px;
    }
    .navbar-top{
        margin-bottom: 0;
    }
    .navbar-bn{
        position: relative;
        z-index: 2;
    }
    .container.no-padding{
        padding: 0 !important;
    }
    /*.navbar-stuck .container.top-bar{
        opacity: 0;
    }*/
    .navbar-nav > li > a {
        line-height: 2.45;
    }
    .navbar-stuck:not(.sticky-logo-disabled) .navbar-logo{
        line-height: 2.45;
        height: 61px;
    }
    .navbar-nav > li.search > .btn .fa.fa-search{
        line-height: 2.3;
    }
    .navbar-stuck .navbar-nav > li.search > .btn{
        height: 61px;
    }
    .navbar-secound{
        /*padding-top: 40px;*/
    }
    #navbar-secound{
        padding: 0;
    }
    #navbar-secound #menu-main-navigation-menu li.search{
        display: none;
    }
    #navbar-secound .navbar-nav > li > a{
        line-height: 1.45;
    }
    #navbar #menu-main-navigation-menu .menu-item{
        display: none;
    }
    .navbar-stuck #navbar #menu-main-navigation-menu .menu-item{
        display: block;
    }
    #page-wrapper>.container:nth-of-type(1){
        padding-top: 0;
        margin-top: 0;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .navbar-nav > li > a {
        line-height: 3.45;
    }
    .navbar-stuck .navbar-nav > li > a {
        line-height: 2.55;
    }
    .navbar-nav > li.search > .btn .fa.fa-search{
        line-height: 2.95;
    }
    .navbar-stuck .navbar-nav > li.search > .btn .fa.fa-search{
        line-height: 2.55;
    }
}
@media (min-width: 768px) and (max-width: 991px){
    #navbar-secound{
        display: none;
    }
    .navbar-secound{
        display: none;
    }
    .navbar-header{
        display: block;
    }
    .navbar-stuck .sitelogo .navbar-logo{
        display: block !important;
    }
    .navbar-stuck #navbar{
        /*margin-top: -62px;*/
        margin-top: 0;
    }
    .navbar-nav > li > a {
        line-height: 3.3;
    }
    .navbar-stuck .navbar-nav > li > a {
        line-height: 2.3;
    }
    .navbar-nav > li.search > .btn .fa.fa-search{
        line-height: 2.9;
    }
    .navbar-stuck .navbar-nav > li.search > .btn .fa.fa-search{
        line-height: 2.3;
    }
    #navbar-secound .menu-item{
        float: left;
    }
    #navbar-secound .navbar-nav > li > a {
        font-size: 12px;
        /*padding: 0 14px 0 18px;*/
    }
    #navbar-secound{
        margin: 0;
    }

}
@media (max-width: 767px){
    .navbar-header{
        display: block;
    }
    .sitelogo{
        display: none !important;
    }
    #sidebar{
        margin: 0;
    }
    #sidebar .sidebar-inner {
        margin: 0 auto !important;
        width: auto;
    }
    .navbar-secound{
        display: none;
    }
    .navbar-wrapper {
         margin: 0 !important;
    }
}

.texticon-content {
    padding-left: 7px;
    padding-top: 16px;
}

.sidebar-inner .sidebar-widget .widget-title::after{
    height: 0;
}
.sidebar-inner .sidebar-widget .widget-title .title{
  font-size: 24px;
}

.one-col-grid .sidebar-widget .widget-title::after{
        height: 0;
}
.one-col-grid .sidebar-widget .widget-title .title{
    font-size: 36px;
    margin-bottom: 22px;
}
.one-col-grid .col-md-12 {
    padding: 0;
}

#c4795 {
    font-size: 16px;
}

aside.sidebar-sticky .sidebar-widget .widget-title{
  margin-bottom: 0;
}

.image-center{
  text-align: center;
}
/*.navbar-bn.visible-lg.visible-md {
    position: absolute;
    right: 0;
    top: -45px;
}*/
/*.image-center.image-above .row{
  margin: 0;
}*/
.one-col-grid .image-center.image-above .row{
    margin-left: -15px;
    margin-right: -15px;
}




/*--------------------------------------------
              Swiper slider
--------------------------------------------*/

/*
 mh@idefa.dk fixes the 6->1->6 topic blink on desktop with out destroying other platforms
 DO NOT CHANGE THIS WITH OUT CONSULTING ME
*/
.swiper-main-wrappee  .swiper-container .swiper-wrapper .swiper-slide {

    width: 155px;
    margin-right: 30px;
}

.swiper-container {
    width: 95%;
    height: 60px;
    margin: 20px auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;


    /*background: #fff;*/

    /* Center slide text vertically */
    /*display: -webkit-box;
    display: -ms-flexbox;*/
    /*display: -webkit-flex;
    display: flex;*/
    /*-webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}
.search-wrapper{
    background-color: #c61e23 !important;
    z-index: 5;
}
.search-wrapper .swiper-slide .title{
    font-size: 14px;
    color: #fff;
}
.search-wrapper > h2 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 5px;
}
.search-wrapper > hr{
    margin: 5px 0;
}
.swiper-button-next{
    background-image: url("../Baggrund/next.png") !important;
    right: 0 !important;
}
.swiper-button-prev{
    background-image: url("../Baggrund/prev.png") !important;
    left: 0 !important;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    opacity: 1 !important;
}
.swiper-button-next, .swiper-button-prev{
    background-size: 20px 34px !important;
    margin-top: -32px !important;
}
.swiper-main-wrappee{
    position: relative;
}
.extra-search .side-navigation-mobile .caret.reverse-arrow {
    transform: rotate(180deg);
}
.side-navigation-mobile{
    font-size: 18px;
    color: #fff !important;
}
.side-navigation-mobile .caret{
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px dashed;
    color: #ffd79a;
    display: inline-block;
    font-size: 41px !important;
    height: 0;
    vertical-align: middle;
    width: 0;
}
.extra-search .nav.nav-sidebar {
    color: #ffffff;
}
.extra-search .nav.nav-sidebar h2{
    font-size: 15px;
    margin-bottom: 5px;
    margin-left: 17px;
}
.extra-search .nav.nav-sidebar .field > span {
    font-size: 13px;
}
@media (min-width: 768px) and (max-width: 991px){
    .search-wrapper.container{
        background: #c61e23 !important;
    }
}
/*--------------------------------------------
              Swiper slider
--------------------------------------------*/


/*--------------------------------------------
              Search box
--------------------------------------------*/
.search{
    display: none !important;
}
.site-search {
    padding-top: 14px;
    width: 65%;
}
.search-btn:hover{
    background-color: transparent !important;
}
.search-btn {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("/fileadmin/Arkiv/Logo/search.png");
    background-repeat: no-repeat;
    background-size: cover;
    border: medium none;
    height: 45px;
    padding: 0;
    width: 76px;
}
.input-group-btn{
    padding-left: 10px;
}
.navbar-stuck #menu-main-navigation-menu .site-search{
    width: auto;
    float: right;
}
@media (max-width: 767px){
    .navbar-stuck #menu-main-navigation-menu .site-search{
        width: inherit;
        float: left;
    }
}
/*--------------------------------------------
              Search box
--------------------------------------------*/

/*---------------------------------------------
                TT_News
---------------------------------------------*/
.news-latest-wrapper .post-details h2 {
    /*min-height: 40px;*/
    min-height: 52px;
}

.news-latest-wrapper .post-details {
    min-height: 215px;
}

.news-letest .post-image{
    position: relative;
}
.news-letest .post-image:before{
    display: block;
    content: "";
    width: 100%;
    padding-top: 68.25%;
}
.news-letest .post-image a{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/*---------------------------------------------
                TT_News
---------------------------------------------*/

.news-latest-wrapper .news-letest{
    min-height: 323px !important
}
.form-control, .sidebar-widget select, .footer-widget select{
    border: none;
}
@media (max-width: 1199px) and (min-width: 992px){
    .news-latest-wrapper .news-letest{
        min-height: 306px !important
    }
}

.navbar-sticky.navbar-stuck .navbar-nav .site-search{
    width: 200px !important;
}

@media (min-width: 1300px){
    .navbar-stuck .navbar-logo .logo-img img{
      max-width: none !important;
    }
}

.navbar-top-left a{float: left; margin-right: 20px; font-weight: bold;}
.navbar-top-left a:after{content: "|"; margin-left: 20px;}
.navbar-top-left a:last-child:after{
    content=""; display: none;
}

/*@media (min-width: 767px) and (max-width: 1024px) and (orientation:landscape){
    nav.navbar{
        position: relative !important;
    }
}*/

.sub-menu .sub-menu:before{content:""; height: 30px; display: block; margin-top: -30px;}
.sub-menu .sub-menu:after{content:""; height: 30px; display: block; margin-bottom: -30px;}

.form-control.tx-indexedsearch-searchbox-sword{margin-top: 5px;}
@media screen and (max-width: 1200px)
{
    .posts-box-carousel .item-overlay .inner{top: 0;}
}
 .form-control.tx-indexedsearch-searchbox-sword.mobile{display: none;}
 .ideMobile{display: none;}
@media screen and (max-width: 992px)
{
    .posts-box-carousel{padding-top: 20px;}
    .posts-box-carousel .top_title{font-size: 25px;}
    .posts-box-carousel .image_description{font-size: 12px; padding-bottom: 10px;}
    .posts-box-carousel .post-summary .post-title{font-size: 14px;}
    .posts-box-carousel .post-summary{width: 100%;}
    .search-wrapper, .search-wrapper.container.one-col-grid{padding-top: 20px !important;}
    .search-wrapper input[type=text]{ margin-left: 5px;}
    .navbar-top-left{margin-left: 150px;}
    .navbar-logo{height: auto; line-height: 28px; font-size: 28px;}
    .form-control.tx-indexedsearch-searchbox-sword.mobile{display: block; margin-left: 0;}

    .emne.back_button{top: 129px; margin-left: 15px;}

}

@media screen and (max-width: 1024px)
{
    .ideMobile{display: block;}
}

@media screen and (max-width: 750px)
{
    .posts-box-carousel .image_description{padding-bottom: 10px;}
}

@media screen and (max-width: 707px)
{
    .posts-box-carousel .item-overlay .inner{top: -20px;}
}

@media screen and (max-width: 657px)
{
    .posts-box-carousel .item-overlay{display: block !important; position: static !important; width: 100% !important;}
    .posts-box-carousel .item-overlay .inner{clear: both !important; position: static !important; width: 100% !important;}
}

@media screen and (max-width: 615px)
{
    .navbar-top-left{margin-left: 0;}
}

/* #sidebar .frame.default{padding-bottom: 20px;} */

@media screen and (max-width: 744px)
{
}

.container.top-bar{min-height: 0 !important;}

@media screen and (max-width: 1024px)
{
  #tx-indexedsearch-searchbox-sword{display: block;}
  .emne.back_button{top: 70px;}
}

.text_icon img{width: 64px !important; height: 64px !important; max-width: none !important;}

@media screen and (max-width: 1200px)
{
    .text_icon .title {padding-left: 16px;}
    .text_icon .col-md-6{width: 64px; float: left;}
}

@media screen and (max-width: 992px)
{

    .text_icon .col-md-6:first-child{width: 64px; float: left;}
    .text_icon .col-md-6:last-child{width: 200px; float: left; margin-left:27px;}
    .text_icon .col-md-6 .title{text-align: left; padding-left: 0; margin-left: 20px;}
    .emne.back_button{top: 129px;}
}


@media screen and (max-width: 400px)
{

    .text_icon .col-md-6:first-child{width: 64px; float: left;}
    .text_icon .col-md-6:last-child{width: 150px; float: left; margin-left:27px;}
    .text_icon .col-md-6 .title{text-align: left; padding-left: 0; margin-left: 20px;}
}

.post-content .widget-title, .post-content .title, .post-content .frame {margin-bottom: 0 !important;}
#main h1, .sidebar-widget h1, #sidebar .sidebar-widget .widget-title .title{font-size: 28px !important; font-weight: normal; color: #000;}
body #main h2 {font-size:18px !important;}
.post-summary .post-image>a{background: none !important;}

@media screen and (max-width: 850px)
{
    .flyout-menu{height: 40px !important; padding-top: 0px !important;}
    .flyout-menu-wrapper{top: 366px !important;}
    .flyout-menu-wrapper .texticon-content{display: none !important;}
}


.embed-responsive {margin-bottom: 20px !important;}

/*---------------------------------------------
                TX_CAL
---------------------------------------------*/


.tx-cal-controller .list-view dt {
    font-weight: normal;
    padding-top: 15px;

}

.tx-cal-controller .list-view a {
  font-weight:bold;

}

/*---------------------------------------------
                ZOOPIM
---------------------------------------------*/

@media screen and (min-width: 700px)
{
.zopim {
margin-right: 35px !important;
}
}

.news-list3-item h1{color: #bf0929 !important;}
.sidebar-widget .widget-title:after{display: none !important; background-color: transparent; width: 0; height: 0; }


.carousel-full{margin-bottom: -6px !important;}
.row-primary{padding-top: 5px !important;}

.parellex-image .container{margin-bottom: -290px !important;}
.parellex-image .vm-wrapper{top: -200px !important;}

.btn-primary{color: #fff !important;}
.btn-default{background-color: #fff !important; color: #bf0929 !important;}

.owl-item .backstretch img{top: 0 !important; left: 0 !important;}

.texticon-icon{padding-right: 0 !important;}


.container.top-bar{background-image: url("/fileadmin/Arkiv/Logo/topwatermark.png"); background-position: top right -145px; background-repeat: no-repeat;}

.mini .wyy-sc-ad img{margin-right: 85px;}
.konfirmand .wyy-sc-ad img{margin-right: 85px;}
.behov .wyy-sc-ad img{margin-right: 85px;}


#sidebar .embed-responsive.embed-responsive-16by9 .embed-responsive-item{padding: 0 !important;}

.hideafter{display: none !important;}



#page-wrapper .embed-responsive.embed-responsive-16by9 .embed-responsive-item{padding-right: 0 !important; padding-left: 0 !important;}
#page-footer{background: transparent !important;}

.modal_box{margin: 92px auto 10px auto !important; height: 85% !important;}

.news-list3-item, .list3-subdiv, .list2-subdiv{border-top: none !important;}
.news-list3-item{padding-top: 0 !important;}

.sundaywheel{background-color: transparent !important; border: none !important;}
.sundaywheel h3{color: #000 !important;}

.shop_desc .price{clear: both;}

.tx-fluidshop{padding-bottom: 30px;}
.tx-fluidshop .row{padding-left: 15px;}
.tx-fluidshop .form-control{border: 1px solid #d2d2d2 !important;}
.tx-fluidshop .form-group{clear: both;}

.post-summary p{
    color: #000 !important;
}

.post-summary p a{
    color: #bf0929;
}

#sidebar h1, #sidebar h2{
    font-size: 24px;
    color: #000;
    line-height: 26.4px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}

#sidebar .post-summary{margin-bottom: 0;}

#sidebar #main h1, #sidebar .sidebar-widget h1, #sidebar .sidebar-widget .widget-title .title{
    font-size: 24px !important;
    color: #000 !important;
    line-height: 26.4px !important;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}

#main h1 a:link, h1 #main a:visited{
    color: #000 !important;
}


/* KONF MAT REMAKE */

.tx-konfmat-extended .materiale.konf .row .value p, .tx-konfmat-extended .materiale.konf .row .value{
    font-size: 16px !important;
    margin: 0 0 10px;
    line-height: 1.8;
}

.tx-konfmat-extended .materiale.needs .row .value p, .tx-konfmat-extended .materiale.needs .row .value{
    font-size: 16px !important;
    margin: 0 0 10px;
    line-height: 1.8;
}

.image-center .row .col-md-12{
    padding-left: 0;
    padding-right: 0;
/*    margin: 0 9px;*/
}

.footer .texticon-type-square .glyphicon, .footer .texticon-type-circle .glyphicon{
    line-height: 2em;
    height: 2em;
    width: 2em;
}

#c4790 img{
    margin-left: 15px;
}



body.mini .konfirmand_small, body.mini .behov_small{
    display: none !important;
}

body.konfirmand .mini_small, body.konfirmand .behov_small{
    display: none !important;
}

body.behov .mini_small, body.behov .konfirmand_small{
    display: none !important;
}

/* ESCAPE ROOM */
.escape_template{
    background-color: transparent !important;
    background: transparent !important;
    padding-bottom: 45px;
}

.escape_template h1{
    width: 100%;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #C61E23;
    color: #fff;
    margin-top: 15px !important;
}
.escape_template .input_container{
    float: left;
    padding-bottom: 30px;
    padding-right: 15px;
    width: 23.7%;
}



.escape_fields .input_container input{
    width: 100%;
    border: 1px solid #ccc;
}

.escape_template .success_link{
    height: 98px;
    width: 5%;
    float: left;
    line-height: 83px;
    text-align: right;
}
.escape_template .success_link:hover{
    opacity: 0.6;
}

.escape_template .success_link .btn{
    border: none !important;
    color: #fff !important;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

.wrong, .correct{
    width: 100%;
}

.escape_template > #main > .escape_fields .image-center .col-md-12{
    margin: 0 15px 0 0;
}

.escape_fields h1{
    margin-top: 0 !important;
}

.wrong p, .correct p{
    margin: 0 !important;
    color: #bf0929 !important;
}

.correct a{
    width: 100%;
    height: 100%;
    display: block;
    padding: 3px 11px !important;
}

.correct{
    padding: 0 !important;
}

.wrong-answer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}

.correct-answer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    display: none;
}


.set-font, .set-font span, .set-font p, .set-font h1, .set-font h2, .set-font h3, .set-font h4, .set-font h5{
    font-family: 'Shadows Into Light', cursive;
    font-size: 18px;
}

.escape_template h4 {
    font-family: 'Shadows Into Light', cursive;
    font-size: 18px;
  background-color: unset !important;
}

@media screen and (min-width: 992px){
.textpic{
    padding-left: 0;
}
}

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6{
    margin-bottom: 5px;
}


.extra-search .breadcrumbs .crumb {
    background: white;
    display: inline;
    border-radius: 5px;
    padding: 3px;
    margin: 0 2px;
    border: 1px solid black;
    vertical-align:middle;
    font-size: 14px;
}
.extra-search .breadcrumbs .crumb span.fa{
    color:red;
    font-size:13px;
    padding-left:3px;
}

.search_line {
    margin-bottom: 5px;
}

/* RETTELSER IFT OVERSKRIFTER OG LINKS */
#main h1 a:link, #main h1 a:visited, #main h2 a:link, #main h2 a:visited, #main h3 a:link, #main h3 a:visited, a h1, h1 a, .news-list3-item h1, h1{
    color: #000 !important;
}

#main .post-summary .post-title, h1{
    font-weight: normal !important;
}

  
/* #page-wrapper a:link, #page-wrapper a:visited{
    color: #bf0929;
} */

/* font-size er fjernet her (KC04, 2026-08-21): den låste h1 til 28px på ALLE
   viewports med !important og satte dermed typografi-skalaen
   `h1,.h1{1.5rem}` / `@768 {1.875rem}` ud af kraft. Målt konsekvens før
   fjernelsen: h1 = 28px overalt, mens h2.card-title skalerer 24→30px, så h1 var
   MINDRE end h2 fra 768px og op — omvendt hierarki. Efter: h1 = 24px mobil /
   30px fra 768px, som mockuppens .section-heading.
   Bemærk at søsterreglen på linje ~810 (`#main h1, .sidebar-widget h1, …`) er
   død markup-mæssigt: hverken id="main" eller .sidebar-widget findes i den
   nuværende skabelon (vores sidebar er .kc-sidebar). */
body h1{
    margin-bottom: 12px !important;
}

.salme_soegning{
    clear: both;
}

#salme_string{
    float: left;
    border: 1px solid #ccc;
    height: 45px;
}

#salme_button{
    float: left;
    height: 45px;
    background-color: #29726c !important;
    border-color: #29726c !important;
}

.navbar-stuck li.site-search{
    display: none;
}

@media screen and (max-width: 1024px){
    .sitelogo{
        min-height: 45px;
    }

    .sitelogo .big-logo{
        display: none;
    }

    li.site-search{
        display: none;
    }
}



.sidebar-inner p a:link, .sidebar-inner p a:visited{
    color: #bf0929;
}

@media screen and (min-width: 993px) and(max-width: 1200px){
    .has-nav-menu .container>.navbar-header{
        display: block !important;
        margin-bottom: 0 !important;
    }
}

@media screen and (max-width: 370px){
    .navbar-top-left{display: none !important;}
}

.navbar-header{
    min-height: 0 !important;
}

.categori .back_button{
    top: 62px;
}

@media screen and (max-width: 992px){
    .navbar-wrapper{
        min-height: 100px;
    }

    .container > .navbar-header{
        height: 90px !important;
    }
}

@media screen and (max-width: 768px){
    .navbar-wrapper{
        min-height: 100px;
    }

    .container > .navbar-header{
        height: 90px !important;
    }
}

@media screen and (min-width: 1024px){
    #menu-main-navigation-menu .menu-item{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #menu-main-navigation-menu .menu-item a{
        line-height: 2.45;
    }
}

.frame-type-menu_pages ul li, .navbar-top-menu li{
    width: 100%;
    clear: both;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    padding: 8px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: inherit;
    z-index: 1;
}

.frame-type-menu_pages ul li:before, .navbar-top-menu li:before{
    position: absolute;
    left: -20px;
    top: 0;
    font-size: 22px;
    color: #010101;
    content: "\203a";
    display: block;
}

.owl-nav.disabled, body .owl-with-arrownav .owl-carousel .owl-nav{
    display: none !important;
}

.owl-carousel.noarrow .owl-nav{
    display: none !important;
}

/* ==========================================================================
   Hero-banner (colPos 3, "Slider"-kolonnen) — carousel_fullscreen content element
   1:1 port af Lovable-designet kc-idebank-viden, Index.tsx "Dynamic Hero Banner":
   <section class="relative w-full h-64 md:h-80 bg-muted overflow-hidden">
   Scoped til .hero-banner så det ikke rammer bootstrap_package's carousel-fullscreen
   andre steder på sitet.
   ========================================================================== */
/* bootstrap_package's Frame/Index.html hardcodes class="frame-container frame-container-default"
   regardless of the element's configured frame_layout (a latent bug — the SCSS supports
   frame-container-full/large/medium/small, but the Fluid template never emits those classes
   dynamically). frame-container-default caps width at the bootstrap container breakpoints and
   centers via margin:auto, which is exactly why the banner is 1600px-max and centered — not
   full-bleed. Overriding here instead of patching the shared bootstrap_package template. */
.hero-banner .frame {
    margin: 0;
    padding: 0;
}

/* MaterialCategory/Pages.html's hero-banner is the OPPOSITE nesting of the above: this one
   sits INSIDE a normal content element (frame wraps .hero-banner, not the other way round),
   since the real hero-banner above lives directly in Page/Default.html outside #page-wrapper
   with no Frame wrap at all. Full chain here is
   .frame.frame-type-konfirmand_materialcategorypages > .frame-group-container >
   .frame-group-inner > .frame-container.frame-container-default > .frame-inner > .hero-banner.
   frame-type-<CType> is a stable, TYPO3-generated class per content type, so this targets only
   this plugin's own frame without touching any other content element.
   The gap under the menu is bootstrap_package's OWN .frame rule: `padding-top: var(--frame-spacing)`
   — a SEPARATE variable from the outer margin, so the "frame-space-before-none" backend option
   (which only zeroes --frame-outer-spacing-before, i.e. the margin) does nothing to it. Confirmed
   in bootstrap5-theme.css; margin/padding:0 here overrides both unconditionally.
   Width comes from .frame-container-default's max-width+centering (no vertical spacing there,
   confirmed) — broken out to full viewport width with the standard 100vw/negative-margin
   technique rather than trying to zero max-width on a class shared by other content elements. */
.frame-type-konfirmand_materialcategorypages {
    margin: 0;
    padding: 0;
}
.frame-type-konfirmand_materialcategorypages .hero-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
}
.hero-banner .frame-group-container,
.hero-banner .frame-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.hero-banner .carousel-fullscreen {
    position: relative;
    width: 100%;
    background-color: hsl(40, 15%, 94%);
    overflow: hidden;
}
.hero-banner .carousel-fullscreen .item,
.hero-banner .carousel-fullscreen .carousel-item {
    height: 256px !important;
}
@media screen and (min-width: 768px) {
    .hero-banner .carousel-fullscreen .item,
    .hero-banner .carousel-fullscreen .carousel-item {
        height: 320px !important;
    }
}

/* bootstrap_package's egen positionerings-/størrelsesregel for .carousel-backgroundimage(-container)
   er scoped ".carousel .carousel-backgroundimage" (kræver en forfader med den RENE ".carousel"-
   klasse, ikke bare ".carousel-fullscreen") — se bootstrap5-theme.css. Rigtige carousel_fullscreen-
   elementer får den klasse fra bootstrap_package's egen outer wrapper; steder der genbruger denne
   visning uden den fulde bootstrap-carousel-markup (fx MaterialCategory/Pages.html's statiske
   "hero" — ingen grund til bootstrap's carousel-JS for ét enkelt billede) får ellers et
   .carousel-backgroundimage med højde 0, så selve billedet aldrig får noget areal at tegnes i
   (kun vores egen ::after-gradient nedenfor viser noget, fordi DEN er positioneret ift.
   .carousel-fullscreen, ikke ift. denne boks). Gentager derfor reglen her, scoped til
   .hero-banner, så det virker uafhængigt af om ".carousel"-klassen er til stede.
   (Fundet 2026-08-18 efter at billedet viste sig som usynligt, kun gradienten var synlig.) */
.hero-banner .carousel-fullscreen .carousel-backgroundimage-container,
.hero-banner .carousel-fullscreen .carousel-backgroundimage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
}
.hero-banner .carousel-fullscreen .carousel-backgroundimage-container {
    overflow: hidden;
}

/* Mørk gradient nederst -> transparent foroven (Lovable: bg-gradient-to-t from-black/60 to-transparent) */
.hero-banner .carousel-fullscreen .carousel-backgroundimage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}

/* Tekstblok nederst til venstre (Lovable: absolute bottom-0 left-0 right-0 p-6 md:p-10).
   max-width sættes IKKE her — bootstrap_package's egen _carousel.scss giver
   .carousel-content-inner samme maks-bredde (og centrering) som sidens øvrige
   indhold (container-max-widths), så baggrunden er fuld bredde men teksten
   følger resten af sidens indholdsbredde.

   .carousel-content/.carousel-content-inner's EGEN display:flex/height:100%-regel er,
   ligesom .carousel-backgroundimage ovenfor, scoped ".carousel .carousel-content..." i
   bootstrap_package — kræver den rene ".carousel"-klasse. Rigtige carousel_fullscreen-
   elementer (forsidens hero-banner) har den fra bootstrap_package's egen outer wrapper,
   så det virker fint der; MaterialCategory/Pages.html's statiske ét-billede-"hero" har
   den ikke, så uden height:100%/display:flex her endte titel+underoverskrift med at
   rendere øverst i boksen (uden for den mørke gradient, som kun er mørk forneden) —
   hvid tekst blev derfor usynlig oven på et lyst billede. Gentaget her ligesom
   backgroundimage-fixet, virker uafhængigt af ".carousel"-klassen. */
.hero-banner .carousel-fullscreen .carousel-content {
    position: relative;
    height: 100%;
}
.hero-banner .carousel-fullscreen .carousel-content-inner {
    display: flex;
    height: 100%;
    align-items: flex-end;
    padding: 1.5rem;
}
@media screen and (min-width: 768px) {
    .hero-banner .carousel-fullscreen .carousel-content-inner {
        padding: 2.5rem;
    }
}

/* call_to_action-boksen (og text_and_image-varianten) skal være transparent, ikke en solid boks */
.hero-banner .carousel-fullscreen .carousel-box {
    background: transparent;
    padding: 0;
    max-width: 36rem;
    color: #fff;
}

/* idefa_basesite's _headers.scss tvinger .carousel .carousel-item h1-h5 til store,
   hardcodede rem-værdier med !important (levn fra den gamle "store hero-carousel"-stil).
   Skal matches med !important her for at vinde — almindelig specificitet er ligegyldig
   over for !important, uanset hvor scoped/specifik vores egen selector er. */
.hero-banner .carousel-fullscreen .carousel-header,
.hero-banner .carousel-fullscreen .carousel-item-header {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem !important;
    margin-bottom: .5rem;
}
@media screen and (min-width: 768px) {
    .hero-banner .carousel-fullscreen .carousel-header,
    .hero-banner .carousel-fullscreen .carousel-item-header {
        font-size: 1.875rem !important;
    }
}

.hero-banner .carousel-fullscreen .carousel-subheader,
.hero-banner .carousel-fullscreen .carousel-item-subheader {
    color: rgba(255, 255, 255, .9);
    font-weight: 400;
    font-size: 1rem !important;
    max-width: 36rem;
    margin-bottom: .75rem;
}
@media screen and (min-width: 768px) {
    .hero-banner .carousel-fullscreen .carousel-subheader,
    .hero-banner .carousel-fullscreen .carousel-item-subheader {
        font-size: 1.125rem !important;
    }
}

.hero-banner .carousel-fullscreen .carousel-item-bodytext {
    color: rgba(255, 255, 255, .9);
}

/* "Læs mere"-knap, matcher Lovable's Button variant="secondary" size="sm" (bg-secondary
   text-secondary-foreground). !important da remake2022.css's globale .btn-primary-regel
   (indlæses efter denne fil) ellers vinder på baggrundsfarven. Pil til højre efter
   teksten, matcher Lovable's <ChevronRight> ikon. */
.hero-banner .carousel-fullscreen .carousel-item-button.btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background-color: hsl(35, 30%, 92%) !important;
    border-color: hsl(35, 30%, 92%) !important;
    color: hsl(220, 15%, 25%) !important;
    font-size: .875rem;
    padding: .375rem .75rem;
}
.hero-banner .carousel-fullscreen .carousel-item-button.btn:hover {
    background-color: hsl(35, 30%, 86%) !important;
    border-color: hsl(35, 30%, 86%) !important;
    color: hsl(220, 15%, 25%) !important;
}
.hero-banner .carousel-fullscreen .carousel-item-button.btn::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sideom-billedet i "text_and_image"-typen findes ikke i Lovable-designet — skjul det.
   Skift content-typen til "Call to action" i backend for at få en knap som i designet. */
.hero-banner .carousel-fullscreen .carousel-image {
    display: none !important;
}

/* ==========================================================================
   Netto OT — Lovable-designets egen font-family (kc-idebank-viden,
   tailwind.config.ts: fontFamily.heading/body begge 'Netto OT', system-ui,
   -apple-system, sans-serif). Lovable-preview'en loader den ALDRIG rigtigt
   selv (index.html henter kun Google-fonten "Source Serif 4", som end ikke
   bruges nogen steder i CSS'en) — 'Netto OT' falder i praksis tilbage til
   system-ui overalt i selve designet. Men det ER sidens egen rigtige,
   licenserede brand-font, bare aldrig koblet til et @font-face — webfont.css
   (bootstrap_package's egen font-bundling) er tom lige nu. Kobler den rigtigt
   til her i stedet for at nøjes med den uindfriede fallback-kæde Lovable selv
   endte med.

   Filerne ligger i extensionen (../fonts/, samme mønster som font-awesome.min.css
   i denne mappe), IKKE i fileadmin. Flyttet hertil 2026-08-21 (drj): de lå i
   fileadmin/templates/fonts/, hvor en redaktør kan flytte eller slette dem — og
   så forsvinder brand-fonten på hele sitet. Originalerne er bevidst efterladt i
   fileadmin (kundens eget indhold; intet andet peger på dem i dag, men det er
   ikke vores at rydde op i). Navnene er normaliseret undervejs:
   NETTOOTL.TTF → NettoOT-Light, NETTOOT_.TTF → NettoOT-Regular, Bold uændret.

   Kun .ttf — ingen .woff/.woff2. Universelt understøttet, bare ~45 kB pr. vægt i
   stedet for ~20. Bevidst valg (drj, 2026-08-21): der findes ingen woff2-konverter
   på serveren, og vi installerer ikke en for det. Konvertér hvis/når der bliver
   adgang til et værktøj.
   ========================================================================== */
@font-face {
    font-family: 'Netto OT';
    src: url('../fonts/NettoOT-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Netto OT';
    src: url('../fonts/NettoOT-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Netto OT';
    src: url('../fonts/NettoOT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Typografi-skala — 1:1 med Lovable-designet kc-idebank-viden.
   bootstrap_package/idefa_basesite sætter ingen egne $h1-h6-font-size-variabler
   noget sted i dette projekt, så overskrifterne har kørt på ren Bootstrap 5
   default-skala (h1=40px, h2=32px, h3=28px, h4=24px …) — markant større end
   Lovable-designets kompakte skala (h1/h2 24-30px, h3 16-18px, h4 14-16px).
   Kilde: src/index.css (.section-heading/.section-subheading) + gennemgang af
   Index.tsx, Om.tsx, Viden.tsx for den faktiske brugte type-skala.
   Sidewide, IKKE scoped til .hero-banner (overskrifter/brødtekst overalt).
   ========================================================================== */
h1, .h1 {
    font-size: 1.5rem;
    /* !important nødvendigt: "#main .post-summary .post-title, h1{font-weight: normal !important;}"
       (linje 988, en ældre "RETTELSER"-regel) sætter bar h1 til normal med !important —
       samme specificitet som denne regel, men indlæst FØR denne, så uden !important her
       ville den ældre regel vinde alligevel. */
    font-weight: 700 !important;
    line-height: 1.2;
}
h2, .h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}
h3, .h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}
h4, .h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}
h5, .h5,
h6, .h6 {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}
@media screen and (min-width: 768px) {
    h1, .h1 {
        font-size: 1.875rem;
    }
    h2, .h2 {
        font-size: 1.5rem;
    }
}

/* Lovable-designets --background (index.css :root), samme token al sidens øvrige
   farver allerede er bygget på. !important nødvendigt: remake2022.css sætter
   body{background-color:#c5c5b8} og loader EFTER konfirmander.css. Samme grund
   til !important på font-family — bootstrap_package's kompilerede tema sætter
   body{font-family:var(--bs-font-sans-serif)} ("Source Sans Pro"). Overskrifter
   (h1-h6) sætter ingen egen font-family noget sted i dette projekt, så de arver
   Netto OT herfra uden videre. */
body {
    font-size: 1rem;
    line-height: 1.625;
    background-color: hsl(40, 30%, 97%) !important;
    font-family: 'Netto OT', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
.lead {
    font-size: 1.125rem;
}

/* ==========================================================================
   Forside-søgesektion — erstatter "Emne-søgning" (konfirmand_materialcategorylist).
   1:1 port af Lovable-designet kc-idebank-viden, Index.tsx "Search with quick filters":
   <section class="container mx-auto px-4 pt-10 pb-10">
     <div class="flex flex-col items-center max-w-2xl mx-auto gap-3">
       <SearchBar large /> + 3 checkbokse
   ========================================================================== */
.hero-search-section {
    padding: 2.5rem 1rem;
}
.hero-search-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 42rem;
    margin: 0 auto;
    gap: .75rem;
}
.hero-search-form {
    display: flex;
    gap: .5rem;
    width: 100%;
}
.hero-search-input-wrapper {
    position: relative;
    flex: 1 1 auto;
}
.hero-search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: hsl(220, 10%, 45%);
    pointer-events: none;
}
.hero-search-input.form-control {
    width: 100%;
    height: 3rem;
    padding-left: 2.5rem;
    font-size: 1rem;
    border-radius: .5rem;
    border: 1px solid hsl(35, 18%, 87%);
}
.hero-search-submit.btn {
    height: 3rem;
    padding: 0 1.5rem;
    border-radius: .5rem;
    font-size: 1rem;
    background-color: hsl(358, 74%, 45%) !important;
    border-color: hsl(358, 74%, 45%) !important;
    color: #fff !important;
    flex-shrink: 0;
}
.hero-search-submit.btn:hover {
    background-color: hsl(358, 74%, 38%) !important;
    border-color: hsl(358, 74%, 38%) !important;
}
.hero-search-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.5rem;
}
.hero-search-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 400;
    color: hsl(220, 10%, 45%);
    cursor: pointer;
    margin-bottom: 0;
}
.hero-search-filter input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: hsl(358, 74%, 45%);
}

/* ==========================================================================
   Footer (Page/Default.html <footer class="site-footer">) — baseret på
   Lovable-designet kc-idebank-viden, Layout.tsx footer (border-top, dæmpet
   baggrund, container), men som ÉN samlet kolonne (aftalt med drj) i stedet
   for Lovables to-zone-layout. Indholdet redigeres i backend via ÉN samlet
   "Footer"-kolonne (colPos 10) — se Default.html og
   Sets/Konfirmand/PageTsConfig/BackendLayouts/DefaultFooter.tsconfig.
   ========================================================================== */
.site-footer {
    border-top: 1px solid hsl(35, 18%, 87%);
    background-color: hsla(35, 18%, 87%, .3);
}
/* Bredden kommer nu fra bredde-systemet i toppen af filen (--kc-page-*), så
   footeren flugter med header og indhold. Var width:100% + padding 2rem 30px,
   dvs. full-bleed — den mest synlige af de fire uens kanter. */
.site-footer-inner {
    max-width: var(--kc-page-max);
    margin: 0 auto;
    padding: 2rem var(--kc-page-pad);
    display: flex;
    font-size: .875rem;
    color: hsl(220, 10%, 45%);
}
.site-footer-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
}

/* ==========================================================================
   Nyhedskort (EXT:news List/Item.html override, se setup.typoscript
   plugin.tx_news.view.partialRootPaths.20) — 1:1 port af Lovable-designet
   kc-idebank-viden, Index.tsx "News + CTA card":
   <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
     <article class="bg-card rounded-lg border overflow-hidden ...">
   ========================================================================== */
.news-list-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media screen and (min-width: 576px) {
    .news-list-view {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width: 992px) {
    .news-list-view {
        grid-template-columns: repeat(4, 1fr);
    }
}

.news-card {
    display: block;
    background-color: #fff;
    border: 1px solid hsl(35, 18%, 87%);
    border-radius: .5rem;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.news-card:hover,
.news-card:focus {
    border-color: hsla(358, 74%, 45%, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-decoration: none;
}
.news-card-image {
    aspect-ratio: 16 / 9;
    background-color: hsl(40, 15%, 94%);
    overflow: hidden;
}
.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.news-card:hover .news-card-image img {
    transform: scale(1.05);
}
.news-card-content {
    padding: 1rem;
}
.news-card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: hsl(220, 15%, 18%);
    margin-bottom: .375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card:hover .news-card-title {
    color: hsl(358, 74%, 45%);
}
.news-card-summary {
    font-size: .875rem;
    color: hsl(220, 10%, 45%);
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: hsl(358, 74%, 45%);
}
.news-card-more::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-footer-column .contentcontainer
{
    width: 100%;
}

.site-footer-column .contentcontainer > div:first-child{
    text-align: left;
}

.site-footer-column .contentcontainer > div:last-child{
    text-align: right;
}

/* ==========================================================================
   Materiale-singleview (Material/Show.html) — 1:1 port af Lovable-designet
   kc-idebank-viden, src/pages/IdeDetail.tsx:
   <div class="w-full h-48 md:h-72 bg-muted overflow-hidden">  (hero)
   <div class="flex flex-col lg:flex-row gap-8">                (main + fact-box)
   <div class="fact-box"> … (samme klasser som .section-heading/.fact-box i
   src/index.css — se @layer components deri).
   Erstatter det tidligere konfmat.css-design (.materiale.konf/.minikonf/…,
   farvekodet efter targetgroup) — de regler er nu ubrugte, men konfmat.css
   er ikke rørt/ryddet op i denne omgang.
   ========================================================================== */
.material-hero {
    width: 100%;
    height: 12rem;
    background-color: hsl(40, 15%, 94%);
    overflow: hidden;
}
.material-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (min-width: 768px) {
    .material-hero {
        height: 18rem;
    }
}

/* Bredden er overtaget af .kc-page (bredde-systemet i toppen af filen), som nu
   omslutter alt colPos 0-indhold — inkl. dette plugin. Egen max-width/vandret
   padding her ville lægge sig oven i .kc-page's og give dobbelt indrykning, så
   kun den lodrette padding er tilbage. Singlevisningen står på
   nosidebar_page_ids (uid 1163): den har allerede sin egen faktaboks-kolonne,
   og en sidebar ved siden af ville give tre kolonner. */
.material-body {
    padding: 2rem 0;
}
.material-body-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media screen and (min-width: 992px) {
    .material-body-inner {
        flex-direction: row;
    }
}

.material-main {
    flex: 1 1 auto;
    max-width: 48rem;
    min-width: 0;
}

.material-title {
    margin-bottom: .75rem;
}

.material-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
}
.material-btn-accent,
.material-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: .5rem;
    line-height: 1.25;
    text-decoration: none;
}
.material-btn-accent {
    background-color: hsl(28, 75%, 42%) !important;
    border-color: hsl(28, 75%, 42%) !important;
    color: #fff !important;
}
.material-btn-accent:hover {
    background-color: hsl(28, 75%, 36%) !important;
    border-color: hsl(28, 75%, 36%) !important;
}
.material-btn-outline {
    background-color: transparent !important;
    border: 1px solid hsl(35, 18%, 87%) !important;
    color: hsl(220, 15%, 18%) !important;
}
.material-btn-outline:hover {
    background-color: hsl(40, 15%, 94%) !important;
    text-decoration: none;
}
.material-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid hsl(35, 18%, 87%);
    background-color: transparent;
    cursor: pointer;
}
.material-btn-icon:hover {
    background-color: hsl(40, 15%, 94%);
}
.material-share {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.material-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    vertical-align: -2px;
}

.material-separator {
    border: none;
    border-top: 1px solid hsl(35, 18%, 87%);
    margin: 0 0 2rem;
}

.material-factbox-mobile {
    margin-bottom: 2rem;
}
.material-factbox-desktop {
    width: 18rem;
    flex-shrink: 0;
}
.material-factbox-sticky {
    position: sticky;
    top: 6rem;
}

.material-section {
    margin-bottom: 2rem;
}
.material-section h2 {
    margin-bottom: .75rem;
}
.material-prose p {
    margin-bottom: .75rem;
}
.material-prose ul,
.material-prose ol {
    margin-bottom: .75rem;
    padding-left: 1.25rem;
}
.material-prose li {
    margin-bottom: .25rem;
}
.material-prose > *:last-child {
    margin-bottom: 0;
}

.fact-box {
    background-color: hsl(35, 30%, 92%);
    border-radius: .5rem;
    padding: 1.25rem;
}
.fact-box h3 {
    margin-bottom: .75rem;
}
.fact-box-rows {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.fact-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    font-size: .875rem;
}
.fact-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
    color: hsl(220, 15%, 25%);
    flex-shrink: 0;
}
.fact-value {
    color: hsl(220, 10%, 45%);
    text-align: right;
}
.fact-tags {
    border-top: 1px solid hsla(220, 15%, 25%, .12);
    padding-top: .75rem;
}
.fact-label-small {
    font-size: .75rem;
    font-weight: 600;
    color: hsl(220, 15%, 25%);
}
.fact-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .375rem;
}

.idea-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 500;
    padding: .125rem .625rem;
    border-radius: 999px;
    border: 1px solid hsl(35, 18%, 87%);
    color: hsl(220, 15%, 18%);
    background-color: transparent;
}
.idea-badge-secondary {
    background-color: hsl(0, 0%, 100%);
    border-color: hsl(35, 18%, 87%);
}

.material-related {
    margin-top: 3rem;
}
.material-related h2 {
    margin-bottom: 1rem;
}

.idea-card {
    display: block;
    height: 100%;
    background-color: #fff;
    border: 1px solid hsl(35, 18%, 87%);
    border-radius: .5rem;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.idea-card:hover,
.idea-card:focus {
    border-color: hsla(358, 74%, 45%, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-decoration: none;
}
.idea-card-image {
    aspect-ratio: 16 / 9;
    background-color: hsl(40, 15%, 94%);
    overflow: hidden;
}
.idea-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.idea-card:hover .idea-card-image img {
    transform: scale(1.05);
}
.idea-card-content {
    padding: 1rem;
}
.idea-card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: hsl(220, 15%, 18%);
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Den arvede line-height 1.1 + overflow:hidden klipper toppen af Å-ringen (Netto OT) */
    line-height: 1.4;
}
.idea-card:hover .idea-card-title {
    color: hsl(358, 74%, 45%);
}
.idea-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.idea-badge .material-icon {
    width: .75rem;
    height: .75rem;
}

/* ==========================================================================
   Material/LimitedList.html ("Materiale: Liste (max antal)") — 1:1 port af
   Lovable-designet kc-idebank-viden, IdeBank.tsx's resultat-grid (kun kortene;
   filter/søge-UI'et giver ikke mening på en allerede maks-antal-afgrænset liste).
   ========================================================================== */
.idea-grid-meta {
    font-size: .875rem;
    color: hsl(220, 10%, 45%);
    margin-bottom: 1rem;
}
.idea-grid-empty {
    text-align: center;
    color: hsl(220, 10%, 45%);
    padding: 3rem 0;
}
.idea-card-summary {
    font-size: .875rem;
    color: hsl(220, 10%, 45%);
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Eget søgefelt i LimitedList.html (lib.materiallistsearchbox) — 1:1 port af
   IdeBank.tsx's egen <SearchBar large />, genbruger .hero-search-*-klasserne. */
.idea-search-row {
    max-width: 42rem;
    margin: 0 auto 2rem;
}

/* Filter-sidebar — 1:1 port af FilterPanel.tsx (kun visuelt, se kommentar i
   LimitedList.html — checkboksene er endnu ikke koblet til reel filtrering). */
.idea-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.idea-filters {
    width: 15rem;
    flex-shrink: 0;
}
.idea-results {
    flex: 1 1 auto;
    min-width: 0;
}
@media screen and (max-width: 991px) {
    .idea-layout {
        flex-direction: column;
    }
    .idea-filters {
        width: 100%;
    }
}
.idea-filters-title {
    margin-bottom: 1rem;
}
.idea-filter-group {
    margin-bottom: 1.5rem;
}
.idea-filter-group:last-child {
    margin-bottom: 0;
}
.idea-filter-group h4 {
    font-size: .875rem;
    font-weight: 600;
    color: hsl(220, 15%, 18%);
    margin-bottom: .5rem;
}
.idea-filter-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 400;
    color: hsl(220, 10%, 45%);
    cursor: pointer;
    margin-bottom: .375rem;
}
.idea-filter-checkbox:last-child {
    margin-bottom: 0;
}
.idea-filter-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: hsl(358, 74%, 45%);
    flex-shrink: 0;
}

/* ==========================================================================
   MaterialCategory/Showcase.html ("Faglig inspiration") og MaterialCategory/Pages.html
   (temaets detaljeside) — 1:1 port af Lovable-designet kc-idebank-viden, Viden.tsx +
   ThemeCard.tsx + VidenTema.tsx's "cards"-gitter. .theme-card er den ulinkede variant
   (Showcase.html — kortene linker ikke nogen steder endnu, aftalt med drj);
   .theme-card-link tilføjer hover/link-styling til den samme komponent, brugt hvor
   kortet RENT FAKTISK linker til en rigtig side (Pages.html).
   ========================================================================== */
.theme-card {
    background-color: #fff;
    border: 1px solid hsl(35, 18%, 87%);
    border-radius: .5rem;
    overflow: hidden;
    height: 100%;
}
.theme-card-image {
    aspect-ratio: 16 / 9;
    background-color: hsl(40, 15%, 94%);
    overflow: hidden;
}
.theme-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.theme-card-content {
    padding: 1.25rem;
}
.theme-card-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: hsl(220, 15%, 18%);
    margin-bottom: .5rem;
}
.theme-card-description {
    font-size: .875rem;
    color: hsl(220, 10%, 45%);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
.theme-card-link {
    display: block;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-card-link:hover,
.theme-card-link:focus {
    border-color: hsla(358, 74%, 45%, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-decoration: none;
}
.theme-card-link:hover .theme-card-image img {
    transform: scale(1.05);
}
.theme-card-link:hover .theme-card-title {
    color: hsl(358, 74%, 45%);
}
/* ThemeCard.tsx's røde "Udforsk tema"-CTA (text-primary + ChevronRight,
   group-hover:translate-x-0.5) — kun vist på linkede kort (showCta i
   ShowcaseCardContent.html-partialen), se kommentar i Showcase.html. */
.theme-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: hsl(358, 74%, 45%);
}
.theme-card-cta .material-icon {
    transition: transform .15s ease;
}
.theme-card-link:hover .theme-card-cta .material-icon {
    transform: translateX(2px);
}

/* MaterialCategory/Pages.html — hero via .material-hero (genbrugt fra Material/Show.html,
   1:1 samme "w-full h-48 md:h-72 bg-muted overflow-hidden"-mønster som VidenTema.tsx). */
.category-detail {
    max-width: 48rem;
    padding: 2rem 1rem;
}
.category-detail-title {
    margin-bottom: 1rem;
}
.category-detail-intro {
    font-size: 1.125rem;
    color: hsl(220, 10%, 45%);
    margin-bottom: 2rem;
}

/* Flad liste af "artikel"-rows (VidenTema.tsx's article-row inde i "sections") — brugt af
   Pages.html i stedet for .theme-card-gitteret, se kommentar i selve templaten. */
.category-page-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.category-page-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid hsl(35, 18%, 87%);
    background-color: #fff;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.category-page-row:hover,
.category-page-row:focus {
    border-color: hsla(358, 74%, 45%, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-decoration: none;
}
.category-page-row .material-icon:first-child {
    width: 1.25rem;
    height: 1.25rem;
    color: hsl(358, 74%, 45%);
    flex-shrink: 0;
    margin-top: .125rem;
}
.category-page-row .material-icon:last-child {
    margin-left: auto;
    color: hsl(220, 10%, 45%);
    flex-shrink: 0;
    margin-top: .125rem;
}
.category-page-row-text {
    flex: 1 1 auto;
    min-width: 0;
}
.category-page-row-text h4 {
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: hsl(220, 15%, 18%);
    margin-bottom: .125rem;
}
.category-page-row-text p {
    font-size: .75rem;
    color: hsl(220, 10%, 45%);
    margin-bottom: 0;
}
.theme-grid-empty {
    text-align: center;
    color: hsl(220, 10%, 45%);
    padding: 3rem 0;
}

/* ==========================================================================
   Card Group (bootstrap_package/idefa_bootstrap_card_extender) — to fejl fundet i det
   KOMPILEREDE theme_lts11_bs5-*.css-bundle (en ældre bootstrap_package-tema-variant, ikke
   noget vi selv har skrevet eller kan røre direkte — det er en delt extension). Rettet her
   i stedet, da konfirmander.css indlæses efter alle bootstrap_package-tema-bundlerne.

   1) .card-group-element{gap:0} — et levn i den samme fil EFTER den rigtige
      .card-group-element{gap:var(--cardgroup-gap)}-regel, overskriver den (samme
      specificitet, senere regel vinder), så INTET card_group med 2+ kolonner får
      mellemrum mellem kortene (fx /kurser med card-group-element-columns-3). Forsiden
      viser det ikke, fordi den instans dér kun har 1 kolonne (intet mellemrum at vise).
   2) .card a:not(.btn){color:#577760} (samme bundle) har HØJERE specificitet
      (0,2,1: klasse+element+:not(klasse)) end Lovable-layoutenes egne
      ".card-layout-13/14 .card-more"-regler (0,2,0: to klasser), så "Læs mere"-linket
      bliver grønt i stedet for rødt uanset indlæsningsrækkefølge. Rettet med en 3-klasses
      selector (0,3,0), som vinder uden !important. Layout 15 har intet .card-more-link,
      ikke berørt af denne fejl.
   ========================================================================== */
.card-group-element {
    gap: var(--cardgroup-gap);
}

/* bootstrap_package's .contentcontainer (grid-wrapper om stablede indholdselementer i en
   kolonne, --contentcontainer-gap) er 40px som standard — sat til 20px her, sidewide. */
.contentcontainer {
    gap: 20px;
}
.card-layout-13 .card .card-more,
.card-layout-14 .card .card-more {
    color: hsl(358, 74%, 45%);
}

/* ==========================================================================
   Print — Material/Show.html's "Print" knap kalder window.print(), som bruger
   browserens native print-dialog og dermed DENNE @media print, ikke en separat
   skabelon. .no-print/.print-full-width bruges allerede i Show.html (1:1 fra
   Lovable-designets IdeDetail.tsx), men var ikke defineret nogen steder før nu
   — så print viste hele siden (nav, hero-banner, hero-search, footer, knapper,
   "Relaterede idéer") uden nogen oprydning overhovedet.
   #page-header/.hero-banner/.hero-search-section/.site-footer er global
   sidelayout (Page/Default.html), så det skjules her for print på ALLE sider,
   ikke kun materiale-singleview.
   ========================================================================== */
@media print {
    #page-header,
    .hero-banner,
    .hero-search-section,
    .site-footer,
    .offcanvas,
    .no-print {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        line-height: 1.5;
    }

    .print-full-width {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* NB: bredde-systemets .kc-page/.kc-content/.kc-sidebar nulstilles til print i
       print.css (KC05) — den er sitets print-autoritet og er samtidig det ark
       Dompdf-pipelinen renderer, så reglerne skal ligge dér for at ramme både
       papir og PDF. Læg dem ikke her. */

    a {
        text-decoration: none;
        color: #000;
    }

    .material-body {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .material-body-inner {
        display: block !important;
    }
    .material-main {
        max-width: 100% !important;
    }

    /* Fact-boxen findes to gange i markup'et (mobil-blok + sticky desktop-aside),
       styret af Bootstrap d-lg-none/d-none-d-lg-block — upålideligt ved print
       (print-viewportbredden varierer på tværs af browsere/printere), så vi
       tvinger entydigt KUN desktop-instansen frem i stedet for at stole på dem. */
    .material-factbox-mobile {
        display: none !important;
    }
    .material-factbox-desktop {
        display: block !important;
        width: 100% !important;
        margin-bottom: 14pt;
    }
    .material-factbox-sticky {
        position: static !important;
    }

    h1, .material-title { font-size: 20pt; margin-bottom: 8pt; }
    h2 { font-size: 14pt; margin-bottom: 6pt; }
    h3 { font-size: 12pt; margin-bottom: 4pt; }

    .material-section {
        break-inside: avoid;
        margin-bottom: 14pt;
    }

    .fact-box {
        border: 1px solid #ccc;
        background: none;
        padding: 12pt;
        break-inside: avoid;
    }
}

/* Ikon- og tekstboks (Content Block: idefa-konfirmand/icontextbox) */
.icon-text-box {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.icon-text-box-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.icon-text-box-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: hsl(358, 74%, 45%);
}

.icon-text-box-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icon-text-box-title {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
}

.icon-text-box-text {
    color: hsl(0, 0%, 35%);
}

.icon-text-box-text p {
    margin: 0 0 0.25rem;
}

.icon-text-box-text a {
    color: inherit;
}