.section-with-triangle {
    position: relative;
}

.section-with-triangle::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 4vw;  /* <- Responsive Höhe */
    background-image: url('/templates/yootheme_bildungsforum/images/hg_pfeil.svg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

.section-with-triangle2 {
    position: relative;
}

.section-with-triangle2::before {
    content: '';
    position: absolute;
    left: 0;
	top: -4vw;
    width: 100%;
    height: 4vw;  /* <- Responsive Höhe */
    background-image: url('/templates/yootheme_bildungsforum/images/hg_pfeil_oben.svg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 999;
}

.section-with-triangle2::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 4vw;  /* <- Responsive Höhe */
    background-image: url('/templates/yootheme_bildungsforum/images/hg_pfeil_unten.svg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}



/* ============================================ */




/* ============================================
   FARBEN - CSS Variablen
   ============================================ */
:root {
    --color-blue: #0056a4;
    --color-black: #000000;
    --font-sans: 'Source Sans Variable', sans-serif;
}

.uk-navbar-nav > li > a {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(15px, 1.8vw, 24px) !important;
    color: #8b8c8d !important;
    margin: 0 !important;	
}

.uk-navbar-nav > li > a .uk-icon svg circle,
.uk-navbar-nav > li > a .uk-icon svg path {
    stroke-width: 2 !important;
}

a.uk-accordion-title {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(15px, 1.8vw, 24px) !important;
    color: #000000 !important;
    margin: 0 !important;	
}

.uk-panel a {
    font-size: clamp(14px, 1.1vw, 18px) !important;
    font-weight: 500 !important;
    color: var(--color-blue) !important;
}

.el-item { padding: 5px 10px 5px 10px; }

/* ============================================
   HEADLINE 1
   ============================================ */
.tm-page h1,
h1,
.h1 {
    font-family: var(--font-sans) !important;
    font-weight: 900 !important;
    font-size: clamp(48px, 5.5vw, 96px) !important;
    line-height: 1.05 !important;
    letter-spacing: 2% !important;
    color: var(--color-black) !important;
    margin: 0 !important;
}

/* ============================================
   HEADLINE 2
   ============================================ */
.tm-page h2,
h2,
.h2 {
    font-family: var(--font-sans) !important;
    font-weight: 900 !important;
    font-size: clamp(36px, 4vw, 72px) !important;
    line-height: 1.05 !important;
    letter-spacing: 2% !important;
    color: var(--color-blue) !important;
    margin: 0 !important;
}

/* ============================================
   HEADLINE 3
   ============================================ */
.tm-page h3,
h3,
.h3 {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(20px, 1.8vw, 32px) !important;
    line-height: 1.3 !important;
    letter-spacing: 2% !important;
    color: var(--color-blue) !important;
    margin: 0 !important;
}

/* ============================================
   EINLEITUNG 1
   ============================================ */
.intro-1 {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 3.2vw, 38px) !important;
    line-height: 1.5 !important;
    color: var(--color-blue) !important;
    margin: 0 !important;
}

/* ============================================
   EINLEITUNG 2
   ============================================ */
.intro-2 {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(20px, 2.8vw, 32px) !important;
    line-height: 1.45 !important;
    color: var(--color-blue) !important;
    margin: 0 !important;
}

/* ============================================
   BODY TEXT
   ============================================ */
p,
.body-text {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.3vw, 20px) !important;
    line-height: 1.7 !important;
    color: var(--color-black) !important;
    margin: 0 !important;
}

/* Auszeichnung im Text (bold) */
p strong, .body-text strong, strong {
    font-weight: 600 !important;
}

/* ============================================
   BLICKFANG
   ============================================ */
.highlight {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: clamp(34px, 5vw, 68px) !important;
    line-height: 1.1 !important;
    color: var(--color-blue) !important;
    margin: 0 !important;
}

/* ============================================
   LINK
   ============================================ */
a,
.link {
    font-family: var(--font-sans) !important;
    font-weight: 900 !important;
    font-size: clamp(14px, 1.8vw, 26px) !important;
    letter-spacing: 3% !important;
    color: var(--color-blue) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

a:hover,
.link:hover {
    color: #003d7a !important;
}

a.uk-button-primary { color: #ffffff !important; }
a:hover.uk-button-primary { color: var(--color-blue) !important; }

.uk-slidenav-previous { margin-left:-20px; }


.uk-button .uk-icon svg polyline {
    stroke-width: 3.05;
}