/* fonts */
@font-face {
    font-family: 'Konsole';
    src: url('Konsole1.0-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Konsole-WideBold';
    src: url('Konsole1.0-WideBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-stretch: expanded;
}

@font-face {
    font-family: 'Konsole-Expanded';
    src: url('Konsole1.0-ExpandedBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-stretch: expanded;
}

@font-face {
    font-family: 'Konsole-Condensed';
    src: url('Konsole1.0-CondensedBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-stretch: condensed;
}

/* variables */
:root {
    --red: #e14d2d;
    --yellow: #DBA718;
    --green: #b8c600;
    --petrol: #01a598;
    --light-blue: #64b3cd;
    --purple: #a74e95;
    --dark-gray: #616161;
    --dark-gray-alpha: #61616150;

    --yellow-bg: linear-gradient(45deg, #DBA718, #F5D76E);
    --red-bg: linear-gradient(45deg, #e14d2d, #fc7354);
    --green-bg: linear-gradient(45deg, #b8c600, #d4e157);
    --petrol-bg: linear-gradient(45deg, #01a598, #26d0ce);
    --light-blue-bg: linear-gradient(45deg, #64b3cd, #81c784);
    --purple-bg: linear-gradient(45deg, #a74e95, #ce93d8);
    --white-bg: #ffffff;
    --dark-gray-bg: #616161;
    --container-vertical-padding: 120px;
    --container-width: 1280px;
    --container-horizontal-padding: max(20px, calc((95% - var(--container-width)) / 2));
    --container-padding: var(--container-vertical-padding) var(--container-horizontal-padding);

    --gap: 32px;
    --hl2p-gap: 32px;
    --p2hl-gap: 48px;
    --header-vertical-padding: 30px;
    --header-padding: var(--header-vertical-padding) var(--container-horizontal-padding);
    --footer-padding: calc( var(--container-vertical-padding)/2) var(--container-horizontal-padding);
    --copyright-padding: 20px var(--container-horizontal-padding);

}

/* headlines */
h1, h2, h3, h4 {
    font-family: 'Konsole-Expanded';
    font-stretch: expanded;
    font-weight: bold;
    color: white;
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    font-size: 60px;
    font-family: 'Konsole-WideBold';
}

h2 {
    font-size: 40px;
    font-family: 'Konsole-WideBold';
}

h3 {
    font-size: 28px;
    font-family: 'Konsole-WideBold';
}

/* Gradient fill for strong elements inside headlines */
h1 strong, h2 strong, h3 strong, h4 strong {
    background: linear-gradient(45deg, var(--red), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Special gradient for strong elements on red backgrounds */
.red-bg h1 strong, .red-bg h2 strong, .red-bg h3 strong, .red-bg h4 strong {
    background: linear-gradient(45deg, var(--purple), var(--dark-gray));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Add spacing between headlines and paragraphs, but not in flex layouts */
h1 + p, h2 + p, h3 + p, h4 + p {
    padding-top: var(--hl2p-gap);
}

h1 + h1, h1 + h2, h1 + h3, h1 + h4,
h2 + h1, h2 + h2, h2 + h3, h2 + h4,
h3 + h1, h3 + h2, h3 + h3, h3 + h4,
h4 + h1, h4 + h2, h4 + h3, h4 + h4 {
    padding-top: var(--p2hl-gap);
}

p + h1, p + h2, p + h3, p + h4 {
    padding-top: var(--p2hl-gap);
}

h1 + ul, h2 + ul, h3 + ul, h4 + ul {
    padding-top: var(--p2hl-gap);
}

/* Add spacing between paragraphs/headlines and column divs */
p + .two-column, p + .three-column,
h1 + .two-column, h1 + .three-column,
h2 + .two-column, h2 + .three-column,
h3 + .two-column, h3 + .three-column,
h4 + .two-column, h4 + .three-column {
    padding-top: var(--p2hl-gap);
    /* padding-bottom: var(--p2hl-gap);  */
}

/* Add spacing between headlines and grid components */
h1 + .two-column-grid, h1 + .three-column-grid,
h2 + .two-column-grid, h2 + .three-column-grid,
h3 + .two-column-grid, h3 + .three-column-grid,
h4 + .two-column-grid, h4 + .three-column-grid {
    padding-top: var(--p2hl-gap);
}

/* Add spacing between paragraphs and grid components */
p + .two-column-grid, p + .three-column-grid {
    padding-top: var(--p2hl-gap);
}


/* Add spacing for h2 + h1 in two-column layouts */
.two-column h2 + h1, .two-column h1 + p {
    padding-top: var(--hl2p-gap);
}

/* default tags */
body {
    background-color: #ddd;
    padding:0;
    margin:0;
}

.skip-link {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translate(-50%, -150%);
    background-color: #fff;
    color: #000;
    padding: 12px 24px;
    font-family: 'Konsole';
    font-size: 18px;
    line-height: 1.5;
    text-decoration: none;
    border: 2px solid var(--purple);
    z-index: 1002;
    transition: transform 0.3s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translate(-50%, 0);
}

header {
    background-color: transparent;
    padding: var(--header-padding);
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.scrolled {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header a {
    text-decoration: none;
    display: block;
    line-height: 0;
}

header .logo {
    display: block;
    width: 180px;
    height: auto;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
    transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

header.scrolled .logo {
    -webkit-filter: none;
    filter: none;
}

/* Header styles when menu is open */
header.menu-open {
    background-color: transparent !important;
    box-shadow: none !important;
}

header.menu-open .logo {
    -webkit-filter: brightness(0) invert(1) !important;
    filter: brightness(0) invert(1) !important;
}

header.menu-open .burger-menu span {
    background-color: white !important;
}

/* Burger menu button */
.burger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 1001;
    margin-top: 0;
}

.burger-menu span {
    width: 24px;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease;
    border-radius: 2px;
}

header.scrolled .burger-menu span {
    background-color: var(--purple);
}

/* Menu overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-content {
    background-color: transparent;
    padding: 60px 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.menu-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 20px;
}

.close-menu {
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: white;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.close-menu:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-navigation {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.menu-navigation a {
    color: white;
    text-decoration: none;
    font-family: 'Konsole-WideBold';
    font-size: 24px;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.menu-navigation a:hover {
    color: var(--yellow);
}

.menu-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.menu-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: 'Konsole';
    font-size: 14px;
    transition: color 0.3s ease;
}

.menu-footer a:hover {
    color: white;
}

footer {
    background-color: var(--dark-gray);
    padding: var(--footer-padding);
    box-sizing: border-box;
    color: white;
    font-family: 'Konsole';
    line-height: 2;    
}

footer h3 {
    font-family: 'Konsole-WideBold';
    font-size: 24px;
    color: white;
    margin-top: 0;
}

footer a {
    color: white;
}

footer ul {
    padding: var(--gap)0 0 0 ;
    margin: 0;
    list-style: none;
}

footer li {
    list-style: none;
    /* margin-bottom: 12px; */
}

footer li:last-child {
    margin-bottom: 0;
}

footer.copyright {
    background-color: #222;
    padding: var(--copyright-padding);
    text-align: center;
}

footer svg {
    fill: white;
    width: 240px;
    height: auto;
}

blockquote p {
    font-family: 'Konsole-Expanded';
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: normal;
    color: var(--red);
    margin-bottom: 0;
    font-style: italic;
}

blockquote footer {
    font-family: 'Konsole-WideBold';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
    background-color: transparent;
    padding: 0;
    text-align: right;
    margin-top: var(--p2hl-gap);
    color: var(--red);
}

/* sections */
section {
    padding: var(--container-padding);
    box-sizing: border-box;
}

a {
    color: var(--purple);
    text-decoration: none;
    /* font-weight: bold; */
}

a:hover,
a:focus {
    color: var(--yellow);
    text-decoration: underline;
}

.stage a {
    color: white;
}

.stage a:hover,
.stage a:focus {
    color: var(--yellow);
}
 .stage.bg-image h1, .stage.bg-image h2, .stage.bg-image h3, .stage.bg-image h4 {
    /* 1. Make it inline so it wraps tight to text */
  display: inline;
  
  /* 2. Style the background */
  background-color: var(--purple);
  /* color: black !important; */
  
  /* 3. Add your padding */
  padding: 10px;
  
  /* 4. THE MAGIC PART */
  /* Apply padding/bg to every line fragment independently */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  
  /* 5. Adjust spacing so lines don't overlap */
  line-height: 1.4; /* Adjust based on font size */
}

.stage .cta-button {
    background: var(--yellow) linear-gradient(to right, var(--yellow), var(--red));
}

 .stage.bg-image :is(h1, h2, h3, h4) + :is(h1, h2, h3, h4)::before {
   content: "";
   display: block;
   margin-top: 1.5rem;
 }

section ul, section ol {
    margin: 0;
    padding-left: 0;
}

section ul {
    list-style: none;
}

section ul li,
section ol li {
    font-family: 'Konsole';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
    color: inherit;
    padding-left: 26px;
    position: relative;
}

section ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    top: 6px;
}

section ol {
    counter-reset: section-counter;
}

section ol li {
    counter-increment: section-counter;
}

section ol li::before {
    content: counter(section-counter) ".";
    position: absolute;
    left: 0;
    color: inherit;
    font-size: 20px;
}

.two-column {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
}

.two-column > * {
    flex: 1;
}

.three-column {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.three-column > * {
    flex: 1;
}

/* Grid components */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Image sizing in two-column layouts */
.two-column img {
    max-width: 50%;
    height: auto;
    object-fit: cover;
}

/* Image sizing in grid layouts */
.two-column-grid img,
.three-column-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Add spacing between images and headlines in grid layouts */
.two-column-grid img + h1, .two-column-grid img + h2, .two-column-grid img + h3, .two-column-grid img + h4,
.three-column-grid img + h1, .three-column-grid img + h2, .three-column-grid img + h3, .three-column-grid img + h4 {
    padding-top: var(--hl2p-gap);
}

/* Responsive behavior */
@media (max-width: 768px) {
    /* Switch to condensed font on mobile for better readability */
    h1, h2, h3, h4 {
        font-family: 'Konsole-Condensed';
        font-stretch: condensed;
    }
    
    /* Reduce container padding on mobile */
    :root {
        --container-vertical-padding: 60px;
    }
    
    /* Reduce logo size on mobile */
    header svg {
        width: 160px;
    }
    
    /* Reduce paragraph font size on mobile */
    .red-bg p, .yellow-bg p, .green-bg p, .petrol-bg p, .light-blue-bg p, .purple-bg p, .dark-gray-bg p,
    .white-bg p {
        font-size: 18px;
    }
    
    /* Flex column layouts - stack vertically on mobile */
    .two-column,
    .three-column {
        flex-direction: column;
    }
    
    /* Ensure boxes expand to full width on mobile */
    .two-column > *,
    .three-column > * {
        width: 100%;
        flex: none;
    }
    
    /* Ensure colored boxes specifically expand to full width */
    .red-box, .light-blue-box, .green-box, .petrol-box, .purple-box, .dark-gray-box, .yellow-box {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Add padding to parent containers to accommodate box shadows */
    .two-column,
    .three-column {
        box-sizing: border-box;
    }
    
    /* Grid layouts - single column on mobile */
    .two-column-grid,
    .three-column-grid {
        grid-template-columns: 1fr;
    }
    
    /* Mobile menu adjustments */
    .menu-content {
        padding: 40px 20px;
        width: 95%;
        max-height: 90vh;
    }
    
    .menu-navigation a {
        font-size: 20px;
    }
    
    .burger-menu {
        width: 35px;
        height: 35px;
    }
    
    .burger-menu span {
        width: 20px;
        height: 2px;
    }

    blockquote p {
        margin: 0;
        font-size: 24px !important;
    }

    blockquote footer {
        font-size: 16px;
    }

    .stage {
        padding-top: 120px;
    }
    
    /* Keep stage-box within stage on mobile */
    .stage-box {
        transform: none;
        bottom: 20px;
        left: 20px;
        right: 20px;
        max-width: none;
        width: auto;
    }

    /* footer links spaced further apart */
    footer a {
        display: block;
        margin-bottom: 16px;
        background-color: #666;
        padding: 4px 8px 4px 16px
    }

    /* footer links spaced further apart */
    footer.copyright a {
        display: inline;
        margin-bottom: 16px;
        background-color: transparent;
        padding: 0px
    }

    .cta-button {
        margin: 16px 0 !important;
    }
}

.yellow-bg {
    background: var(--yellow-bg);
}

.red-bg {
    background: var(--red-bg);
}

.green-bg {
    background: var(--green-bg);
}

.petrol-bg {
    background: var(--petrol-bg);
}

.light-blue-bg {
    background: var(--light-blue-bg);
}

.purple-bg {
    background: var(--purple-bg);
}

.white-bg {
    background: var(--white-bg);
}

.dark-gray-bg {
    background: var(--dark-gray-bg);
}

.red-bg p, .red-bg li,
.yellow-bg p, .yellow-bg li,
.green-bg p, .green-bg li,
.petrol-bg p, .petrol-bg li,
.light-blue-bg p, .light-blue-bg li,
.purple-bg p, .purple-bg li,
.dark-gray-bg p, .dark-gray-bg li {
    color: white;
    font-family: 'Konsole';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
}

.white-bg p,
.white-bg li {
    color: black;
    font-family: 'Konsole';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
}

.white-bg h1, .white-bg h2, .white-bg h3, .white-bg h4 {
    color: black;
}

.red-box, .light-blue-box, .green-box, .petrol-box, .purple-box, .dark-gray-box, .yellow-box {
    background-color: var(--red);
    padding: var(--gap);
    color:white;
    font-family: 'Konsole-Expanded';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
    box-shadow: -10px 10px 0 rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
}

.light-blue-box {
    background-color: var(--light-blue);
}

.green-box {
    background-color: var(--green);
}

.petrol-box {
    background-color: var(--petrol);
}

.purple-box {
    background-color: var(--purple);
}

.dark-gray-box {
    background-color: var(--dark-gray);
}

.yellow-box {
    background-color: var(--yellow);
}

.color-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.color-box h1, .color-box h2, .color-box h3, .color-box h4 {
    padding: calc( var(--p2hl-gap) / 4) 0 0 0;
    color: white;
    font-family: 'Konsole-Expanded';
}

.color-box p {
    padding: calc( var(--p2hl-gap) / 4) 0 0 0;
    color: white;
}

/* shadow for boxes on white background */
.white-bg .red-box, .white-bg .light-blue-box, .white-bg .green-box, 
.white-bg .petrol-box, .white-bg .purple-box, .white-bg .dark-gray-box, 
.white-bg .yellow-box {
    box-shadow: -10px 10px 0 var(--dark-gray-alpha);
}


.stage {
    min-height: 50vh;
    position: relative;
}

.stage.stage--compact {
    min-height: 200px;
    box-sizing: border-box;
    padding-bottom: calc( var(--container-vertical-padding) / 2);
}

.stage-box {
    position: absolute;
    bottom: 0;
    left: max(20px, calc((95% - var(--container-width)) / 2));
    transform: translateY(50%);
    z-index: 10;
    max-width: 400px;
    width: 100%;
    box-shadow: -10px 10px 0 var(--dark-gray-alpha);
}


/* Background image sections */
.bg-image {
    background-image: var(--bg-image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; 
    display: flex;
    align-items: center;
}

.stage .stage-content {
    padding: var(--container-padding);
    box-sizing: border-box;
    max-width: var(--container-width);
    margin: 0;
}

.bg-image h1,
.bg-image p {
    color: white;
}

.stage .stage-content p {
    font-family: 'Konsole';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
}

/* Button styles */
button {
    font-family: 'Konsole';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
    padding: 16px 48px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    margin-top: var(--p2hl-gap);
}

button {
    background: var(--light-blue) linear-gradient(to right, var(--green), var(--light-blue)); 
}

button:hover {
    transform: translateY(-2px);    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: black;
}

/* CTA link styled as button */
.cta-button {
    font-family: 'Konsole-Expanded';
    font-size: 20px;
    line-height: 1.5;
    font-weight: normal;
    padding: 16px 48px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    margin-top: var(--p2hl-gap);
    background: var(--light-blue) linear-gradient(to right, var(--purple), var(--red));
    color: white;
}

.cta-button:hover,
.cta-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: black;
    text-decoration: none;
}

.red-bg .cta-button {
    background: var(--green) linear-gradient(to right, var(--green), var(--light-blue));
}


/* Newsletter form styles */
.newsletter-form {
    max-width: 640px;
    margin-top: var(--p2hl-gap);
}

.newsletter-form .form-group {
    margin-bottom: var(--gap);
}

.newsletter-form label {
    display: block;
    font-family: 'Konsole';
    font-size: 16px;
    color: inherit;
    margin-bottom: 8px;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"],
.newsletter-form input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 2px solid var(--dark-gray-alpha);
    background: #fff;
    color: #000;
    font-family: 'Konsole';
    font-size: 18px;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(167, 78, 149, 0.15);
}

.newsletter-form .checkbox-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.newsletter-form .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.newsletter-form button.yellow {
    margin-top: 4px;
}