/* NULSTILLING AF STANDARD STYLING */
/* Fjerner margin og padding på alle elementer og sikrer, at "box-sizing" inkluderer padding og border i elementers samlede bredde og højde. */
* {
    margin: 0;
    padding: 0px; /* "px" er overflødig, når værdien er 0, men det påvirker ikke funktionaliteten. */
    box-sizing: border-box;
}

/* GENERELLE STILINDSTILLINGER */
/* Definerer styling for body: skrifttype, baggrundsfarve med en lineær gradient og standard tekstfarve. */
body {
    font-family: 'Jockey One', sans-serif; /* Vælger en unik skrifttype med en fallback sans-serif. */
    background: linear-gradient(to bottom, #a9b4df, #848484 ,#6c6c6c); /* Baggrund med gradient fra lys gråblå til mørk grå. */
    color: #5e4795; /* Standard tekstfarve i en lilla nuance. */
    margin: 0;
    padding: 0;
}

header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background: #a9b4df;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15rem;
    z-index: 99;
}

/* Klasse til fremhævet tekst */
/* Gør teksten hvid, når denne klasse anvendes. */
.highlight {
    color: white;
}

/* STYLE FOR HOVEDINDHOLD */
/* Centrerer hovedindhold horisontalt og fjerner standard padding. */
main {
    padding: 0px; /* Igen er "px" overflødig ved 0. */
    text-align: center; /* Centrerer alt indhold i "main" horisontalt. */
}

/* STIL FOR LOGO */
/* Definerer styling for containeren, der indeholder logoet. */
.logo-container {
    text-align: right; /* Justerer indholdet til højre. */
    padding: 20px; /* Giver en 20px polstring rundt om containeren. */
    position: right;
}

/* STIL FOR LOGOBILLEDE */
/* Tilpasser størrelsen og udseendet af logo-billedet. */
.logo-img {
    width: 10%; /* Sætter billedets bredde til 10% af dets container. */
    max-height: 100px; /* Begrænser højden til maksimalt 100px. */
    object-fit: cover; /* Sikrer, at billedet dækker sit område uden at forvrænge proportionerne. */
}

/* STYLING AF LOGO-BILLEDE */
/* Placering af logoet øverst til venstre med en fast afstand */
.logo-img {
    position: absolute; /* Gør det muligt at placere elementet præcist */
    top: 20px; /* 20px fra toppen af sin container */
    left: 20px; /* 20px fra venstre side af sin container */
    max-height: 100px; /* Sikrer, at logoets højde ikke overstiger 100px */
}

/* STYLING AF BANNER-BILLEDE */
/* Justerer bannerbilledets bredde */
.banner-img {
    width: 40%; /* Billedet fylder halvdelen af sin container */
    /* Overvej at centrere billedet eller gøre det responsivt, hvis skærmstørrelsen varierer */
}

.banner-img img{
    width: 100%; 
}

/* STYLING AF BILLEDET UNDER NAVBAR */
/* Sikrer korrekt størrelse og håndtering af billeder */
.image {
    width: 100%; /* Containeren fylder hele bredden */
    overflow: hidden; /* Forhindrer, at overskydende indhold vises */
}

.image img {
    width: 100%; /* Billedet skaleres til at fylde containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
    display: block; /* Fjerner unødvendig mellemrum under billedet */
    object-fit: cover; /* Sikrer, at billedet fylder sin container uden at forvrænge */
    max-width: 100%; /* Sikrer, at billedet ikke bliver større end sin container */
}

/* STYLING AF KONCERT-OVERSIGT */
/* Container til billetkøb med centrering og visuel stil */
.billet-køb {
    margin-top: 30px; /* Afstand fra toppen */
    width: 30%; /* Containeren fylder 30% af bredden */
    height: 100%; /* Fylder hele den tilgængelige højde */
    overflow: hidden; /* Forhindrer overskydende indhold i at bryde containeren */
    position: absolute; /* Muliggør præcis placering */
    background-color: #a9b4df; /* Lys blå baggrundsfarve */
    padding: 3rem 0rem; /* Lodret padding (3rem), ingen vandret padding */
    border-radius: 8px; /* Runde hjørner med en radius på 8px */
    margin: -10rem 0 0 2.5rem; /* Negativ margin skubber containeren opad */
    display: flex; /* Gør containeren til en flexbox */
    flex-direction: column; /* Indholdet arrangeres i en lodret kolonne */
    justify-content: space-around; /* Placerer indhold jævnt med mellemrum */
}

/* STYLING AF "ANNE-ROEM" CONTAINER */
/* Sikrer, at containeren fylder hele bredden af sin parent og tilpasser højden automatisk */
.anne-roem {
    width: 100%; /* Bredden fylder 100% af sin parent */
    height: auto; /* Højden justeres automatisk i forhold til indholdet */
}

/* STYLING AF BILLEDER INDE I "ANNE-ROEM" */
/* Gør billeder inde i containeren responsive og fylder hele containerens bredde */
.anne-roem img {
    width: 100%; /* Billedet skaleres til at fylde hele bredden af containeren */
}

/* STYLING AF "BUY-TICKET" KNAP */
/* Designet til at ligne en klikbar knap med baggrundsfarve, afrundede hjørner og centrering */
.buy-ticket {
    display: inline-block; /* Gør elementet til en blok med inline-egenskaber (tillader padding og margin) */
    background-color: #5e4795; /* Lilla baggrundsfarve */
    color: white; /* Hvid tekstfarve */
    padding: 15px 25px; /* Tilføjer polstring (top/bund: 15px, venstre/højre: 25px) */
    text-decoration: none; /* Fjerner understregning fra links */
    font-weight: bold; /* Gør teksten fed */
    border-radius: 5px; /* Afrunder hjørnerne med 5px */
    margin: 1rem; /* Tilføjer mellemrum rundt om elementet */
    font-size: 1.9rem; /* Sætter skriftstørrelsen til 1.9 rem */
}

/* HOVER-EFFEKT FOR "BUY-TICKET" KNAP */
/* Ændrer baggrundsfarven, når musen holdes over knappen */
.buy-ticket:hover {
    background-color: #3d3570; /* Mørkere lilla baggrundsfarve ved hover */
}

/* STYLING AF "NEXT-EVENT" TEKST */
/* Gør teksten fed og sætter skriftstørrelse, samt indrykker med padding */
.next-event {
    font-size: 1.7rem; /* Skriftstørrelse på 1.7 rem */
    font-weight: bold; /* Gør teksten fed */
    display: flex; /* Gør elementet til en flex-container */
    padding-left: 1rem; /* Tilføjer indrykning på venstre side */
}

/* STYLING AF "EVENT-LISTE" */
/* En kolonnebaseret liste med venstrejusteret indhold og øget linjeafstand */
.event-liste {
    display: flex; /* Gør elementet til en flex-container */
    padding-left: 1rem; /* Indrykning til venstre */
    flex-direction: column; /* Arrangerer børnene i en lodret kolonne */
    align-items: flex-start; /* Venstrejusterer alt indhold i containeren */
    line-height: 2rem; /* Sætter linjehøjden til 2 rem */
    list-style: none; /* Fjerner punkttegn fra listeelementer */
    font-size: 1.4rem; /* Skriftstørrelse på 1.4 rem */
}

/* STYLING AF "EVENT-NAME" */
/* Venstrejusterer og definerer skriftstørrelsen for eventnavne */
.event-name {
    display: flex; /* Gør elementet til en flex-container */
    padding-left: 1rem; /* Indrykning til venstre */
    font-size: 1.5rem; /* Skriftstørrelse på 1.5 rem */
}

/* STYLING AF "SE-ALLE-TIDER" LINK */
/* Justerer layout, tilføjer afstand og fjerner understregning fra linket */
.se-alle-tider {
    display: flex; /* Gør elementet til en flex-container */
    padding-left: 1rem; /* Indrykning til venstre */
    padding-top: 0.5rem; /* Lidt afstand ovenfra */
    font-size: 1.5rem; /* Skriftstørrelse på 1.5 rem */
    text-decoration: none; /* Fjerner understregning fra linket */
}

/* ARTIKLER OG KAMPAGNER */
/* Styling af "femy-quote" container */
/* Bruges til at centrere og give margin til citat-sektionen */
.femy-quote {
    margin-top: 40px; /* Afstand fra toppen */
    margin-left: 36%; /* Flytter containeren 36% fra venstre side */
}

/* Styling af billeder inde i "femy-quote" */
/* Gør billeder responsive og tilføjer afrundede hjørner */
.femy-quote img {
    max-width: 90%; /* Sikrer, at billedet ikke overskrider 90% af containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
    margin-top: 0.5rem; /* Lidt afstand fra toppen */
    margin-right: -0.6rem; /* Flytter billedet en smule mod højre */
    border-radius: 8px; /* Afrunder billedets hjørner med 8px */
}

/* Styling af overskrifter i "femy-quote" */
/* Tilføjer størrelse, afstand og farve til overskriften */
.femy-quote h2 {
    font-size: 1.6rem; /* Skriftstørrelse på 1.6 rem */
    margin-top: 1rem; /* Afstand over overskriften */
    color: white; /* Hvid tekstfarve */
}

/* Styling af links i "femy-interview" */
/* Justerer farve, størrelse og fjerner understregning */
.femy-interview {
    color: #5e4795; /* Lilla tekstfarve */
    text-decoration: none; /* Fjerner understregning fra links */
    font-size: 1.5rem; /* Skriftstørrelse på 1.5 rem */
}

/* Hover-effekt for "femy-interview" */
/* Ændrer farven ved hover */
.femy-interview:hover {
    color: #3d3570; /* Mørkere lilla farve, når musen holdes over */
}


/* STYLING AF "FRIVILLIG-TILMELDING" SEKTION */

/* Styling af den overordnede frivillig-tilmelding container */
/* Flexbox-layout med baggrundsfarve */
.frivillig-tilmelding {
    display: flex; /* Flexbox layout */
    background-color: #a9b4df; /* Lys blå baggrundsfarve */
}

/* Styling af artikler inde i "frivillig-tilmelding" */
/* Centrerer indhold både vertikalt og horisontalt i en kolonne */
.frivillig-tilmelding article {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Arrangerer indhold i en lodret kolonne */
    align-items: center; /* Centrerer indhold horisontalt */
    justify-content: center; /* Centrerer indhold vertikalt */
    width: 50%; /* Artiklen fylder halvdelen af containerens bredde */
}

/* Styling af den overordnede donation-container */
.donation {
    display: flex; /* Aktiverer fleksibel layout */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
    border-radius: 8px; /* Runder hjørnerne på containeren */
}

/* Styling af article-elementet inden i donation-sektionen */
.donation article {
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børneelementer vertikalt */
    align-items: center; /* Centrerer børneelementerne horisontalt */
    justify-content: center; /* Centrerer børneelementerne vertikalt */
    width: 50%; /* Sætter bredden af article til 50% af containerens bredde */
}

/* Styling af article-elementet inden i medie-kampagne-sektionen */
.medie-kampagne article {
    padding: 0.7rem; /* Tilføjer padding inde i article */
}

/* Styling af teksten i kampagne-tekst1-klassen */
.kampagne-tekst1 {
    font-size: 1.4rem; /* Sætter skriftstørrelsen for teksten */
}

/* Styling af kampagne-knappen */
.kampagne-button {
    background-color: #594891; /* Sætter en mørk lilla baggrundsfarve */
    color: white; /* Sætter tekstfarven til hvid */
    font-size: 1.1rem; /* Sætter skriftstørrelsen for knapteksten */
    padding: 0.1rem 2.8rem; /* Tilføjer padding i knappen (top/bund: 0.1rem, venstre/højre: 2.8rem) */
    margin-top: 1.3rem; /* Tilføjer margin i toppen af knappen for at skabe plads over knappen */
    font-family: 'Jockey One', sans-serif; /* Sætter skrifttypen til 'Jockey One' med fallback til sans-serif */
    border-radius: 8px; /* Runder hjørnerne af knappen */
    border: none; /* Fjerner standardkantlinjen fra knappen */
    cursor: pointer; /* Ændrer musemarkøren til en pegefinger, når man holder musen over knappen, hvilket indikerer at den er klikbar */
}

/* NYHEDSBREV */
.nyhedsbrev-container {
    background: linear-gradient(to bottom, #a9b4df, #848484 ,#a9b4df); /* Sætter en baggrund med en gradient, der går fra lys lilla til grå og tilbage til lys lilla */
    padding: 2rem; /* Tilføjer padding omkring indholdet i containeren */
    margin-top: 2rem; /* Tilføjer margin øverst for at skabe afstand fra elementet over */
}

.nyhedsbrev-tekst h2 {
    font-size: 2rem; /* Sætter skriftstørrelsen på overskriften til 2rem */
}

.nyhedsbrev-tekst p {
    font-size: 1.5rem; /* Sætter skriftstørrelsen på paragrafen til 1.5rem */
}

form input[type="email"] {
    padding: 10px; /* Tilføjer padding inde i inputfeltet */
    border-radius: 5px; /* Runder hjørnerne af inputfeltet */
    border: 1px solid #5e4795; /* Sætter en lilla kant rundt om inputfeltet */
    font-size: 16px; /* Sætter skriftstørrelsen i inputfeltet */
    margin-right: 10px; /* Tilføjer margin til højre for at skabe afstand til knappen */
}

form button {
    background-color: #5e4795; /* Sætter baggrundsfarven på knappen til lilla */
    color: white; /* Sætter tekstfarven på knappen til hvid */
    padding: 10px 20px; /* Tilføjer padding inde i knappen (top/bund: 10px, venstre/højre: 20px) */
    border: none; /* Fjerner standardkanten på knappen */
    border-radius: 5px; /* Runder hjørnerne af knappen */
    cursor: pointer; /* Ændrer musemarkøren til en pegefinger, når man holder musen over knappen */
}

form button:hover {
    background-color: #3d3570; /* Ændrer baggrundsfarven på knappen, når man holder musen over den */
}

.email-submit {
    padding: 1.6rem; /* Tilføjer padding omkring submit-knappen */
}

/* SPONSOR-OVERSIGT */
.sponsor-container {
    display: flex; /* Aktiverer fleksibel layout */
    justify-content: center; /* Centrerer sponsorene horisontalt */
    gap: 4rem; /* Tilføjer afstand (gap) mellem sponsorerne */
    margin-top: 1rem; /* Tilføjer margin øverst for at skabe afstand fra elementet over */
    margin-left: 1rem; /* Tilføjer margin til venstre */
    margin-right: 1rem; /* Tilføjer margin til højre */
    padding: 1.6rem; /* Tilføjer padding omkring containeren */
}

.sponsor-container img {
    max-width: 90%; /* Sætter den maksimale bredde på billederne til 90% af containerens bredde */
    height: 90px; /* Sætter højden på billederne til 90px */
    margin: 0; /* Fjerner margin omkring billederne */
}

/* ARTIKLER OG KAMPAGNER */
/* Stil for citat-sektionen i artikler */
.femy-quote {
    margin-top: 0; /* Fjerner top-marginen for at undgå ekstra plads ovenfor */
    margin-left: 0; /* Fjerner venstre-marginen */
    padding-left: 26rem;
}

/* Stil for billeder i femy-quote-sektionen */
.femy-quote img {
    max-width: 90%; /* Sætter den maksimale bredde på billedet til 90% af forælderen */
    height: auto; /* Bevarer billedets proportioner ved at justere højden automatisk */
    margin-top: 4rem; /* Tilføjer margin øverst for at give plads over billedet */
    margin-right: -3.5rem; /* Tilføjer en lille negativ margin til højre for at justere placeringen */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

/* Stil for overskriften (h2) i femy-quote-sektionen */
.femy-quote h2 {
    font-size: 24px; /* Sætter skriftstørrelsen til 24px */
    margin-top: 20px; /* Tilføjer margin øverst for at give plads mellem overskriften og andre elementer */
    color: white; /* Sætter farven på overskriften til hvid */
}

/* Stil for linket i femy-interview-sektionen */
.femy-interview {
    color: #5e4795; /* Sætter tekstfarven til en mørk lilla */
    text-decoration: none; /* Fjerner understregning fra linket */
}

/* Stil for linket, når der er hover-effekt */
.femy-interview:hover {
    color: #3d3570; /* Ændrer linkets farve til en mørkere lilla, når musen er over det */
}

/* KAMPAGNER FORSIDE */
/* Stil for alle kampagner container */
.alle-kampagner {
    display: flex; /* Bruger flexbox for at arrangere elementerne horisontalt */
    flex-direction: row; /* Arrangerer indholdet i en kolonne */
    overflow: hidden; /* Skjuler indhold, der strækker sig ud over containeren */
    margin-top: 5rem; /* Tilføjer margin øverst på containeren */
    padding: 2.5rem; /* Tilføjer padding omkring containeren for at give lidt plads */
    gap: 2rem; /* Skaber et mellemrum på 15% mellem hvert element i containeren */
}

/* Stil for kampagne-sektioner 1-2 og 3 */
.kampagne1-2,
.kampagne3 {
    display: flex; /* Bruger flexbox til at arrangere elementerne */
    flex-direction: column; /* Arrangerer indholdet vertikalt */
    width: 100%; /* Sætter bredden til 100% af forælderen */
    gap: 2rem; /* Tilføjer mellemrum mellem hvert element */
    justify-content: space-between; /* Fordeler elementerne jævnt med plads imellem dem */
    margin-top: 1rem; /* Tilføjer margin øverst for at adskille sektionerne */
}


/* Medie-kampagne sektion */
.medie-kampagne {
    display: flex; /* Bruger flexbox for at arrangere elementer i horisontal retning */
    background-color: #a9b4df; /* Sætter baggrundsfarven til en lyseblå-lilla */
    border-radius: 8px; /* Runder hjørnerne af containeren */
    align-content: center; /* Centrerer indholdet vertikalt */
    align-items: center; /* Centrerer indholdet på tværs af akse (horisontalt) */
    justify-content: flex-start; /* Justerer indholdet til at starte fra venstre */
    flex-direction: column;
}

/* Artikel-indhold i medie-kampagne sektion */
.medie-kampagne article {
    padding: 0.7rem; /* Tilføjer padding på 0.7rem rundt om indholdet */
    display: flex; /* Bruger flexbox til at arrangere indholdet i artiklen */
    flex-direction: column; /* Arrangerer indholdet vertikalt */
    align-content: center; /* Centrerer indholdet i forhold til containeren */
    justify-content: center; /* Centrerer indholdet vertikalt */
    align-items: center; /* Centrerer indholdet horisontalt */
    margin-left: 1.2rem; /* Tilføjer margin til venstre for at skabe lidt afstand mellem elementerne */
}
 
/* Stil for kampagne 1-2 sektion */
.kampagne1-2 article {
    border-radius: 8px; /* Runder hjørnerne af artiklen */
    height: 45%; /* Sætter højden på artiklen til 16rem */
    width: 100%;
    display: flex;
    align-items: center;
}

/* Stil for første billede i kampagnen */
.kampagne-billede1 {
    width: 50%; /* Sætter bredden til 50% af forælderen */
    height: 100%; /* Sætter højden til 16rem */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

/* Stil for andet billede i kampagnen */
.kampagne-billede2 {
    width: 50%; /* Sætter bredden til 50% af forælderen */
    height: 100%; /* Sætter højden til 16rem */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

/* Stil for tredje billede i kampagnen */
.kampagne-billede3 {
    width: 100%; /* Sætter bredden til 50% af forælderen */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

/* Frivillig tilmelding sektion */
.frivillig-tilmelding {
    display: flex; /* Bruger flexbox til at arrangere elementerne horisontalt */
    background-color: #a9b4df; /* Sætter baggrundsfarven til en lyseblå-lilla */
}

/* Artikel-indhold i frivillig tilmelding sektion */
.frivillig-tilmelding article {
    display: flex; /* Bruger flexbox til at arrangere indholdet */
    flex-direction: column; /* Arrangerer indholdet vertikalt */
    align-items: center; /* Centrerer indholdet horisontalt */
    justify-content: center; /* Centrerer indholdet vertikalt */
    width: 50%; /* Sætter bredden af artiklen til 50% af forælderen */
}

/* Donation-sektionen */
.donation {
    display: flex; /* Bruger flexbox til at layout'e elementerne horisontalt */
    background-color: #a9b4df; /* Sætter baggrundsfarven til en lys lilla */
    border-radius: 8px; /* Runder hjørnerne af containeren */
}

/* Artikel-indhold i donation-sektionen */
.donation article {
    display: flex; /* Bruger flexbox til at arrangere indholdet i artiklen */
    flex-direction: column; /* Arrangerer indholdet vertikalt */
    align-items: center; /* Centrerer indholdet horisontalt */
    justify-content: center; /* Centrerer indholdet vertikalt */
    width: 50%; /* Sætter bredden af artiklen til 50% af forælderen */
}

/* Stil for medie-kampagne artikel */
.medie-kampagne article {
    padding: 0.7rem; /* Tilføjer padding på 0.7rem omkring artiklen */
}

/* Stil for tekst i kampagne-sektionen */
.kampagne-tekst1 {
    font-size: 1.4rem; /* Sætter skriftstørrelsen på teksten i kampagnen til 1.4rem */
}

/* Stil for knappen i kampagnen */
.kampagne-button {
    background-color: #594891; /* Sætter baggrundsfarven på knappen til en mørk lilla */
    color: white; /* Sætter tekstfarven på knappen til hvid */
    font-size: 1.1rem; /* Sætter skriftstørrelsen på knappen til 1.1rem */
    padding: 0.1rem 2.8rem; /* Tilføjer padding på top/bund og venstre/højre for at gøre knappen større */
    margin-top: 1.3rem; /* Tilføjer margin øverst på knappen */
    font-family: 'Jockey One', sans-serif; /* Bruger skrifttypen 'Jockey One' til teksten på knappen */
    border-radius: 8px; /* Runder hjørnerne af knappen */
    border: none; /* Fjerner kantlinjen fra knappen */
    cursor: pointer; /* Ændrer musemarkøren til en hånd, når man holder musen over knappen */
}

/* NYHEDSBREV - Container for nyhedsbrev */
.nyhedsbrev-container {
    background: linear-gradient(to bottom, #a9b4df, #848484, #a9b4df); /* Opretter en baggrundsfarve med en gradient fra top til bund */
    padding: 2rem; /* Lægger polstring omkring containeren */
    margin-top: 2rem; /* Lægger afstand øverst på containeren */
    width: 100%; /* Gør containeren bred nok til at fylde hele bredden */
}

/* NYHEDSBREV - Overskrift */
.nyhedsbrev-tekst h2 {
    font-size: 2rem; /* Sætter skriftstørrelsen for overskriften i nyhedsbrevet */
}

/* NYHEDSBREV - Tekstindstillinger */
.nyhedsbrev-tekst h2 {
    font-size: 2rem; /* Sætter skriftstørrelsen for overskriften i nyhedsbrevet */
}

.nyhedsbrev-tekst p {
    font-size: 1.5rem; /* Sætter skriftstørrelsen for brødteksten i nyhedsbrevet */
}

/* Formular inputfelt for email */
form input[type="email"] {
    padding: 10px; /* Lægger polstring omkring inputfeltet */
    border-radius: 5px; /* Rundede hjørner på inputfeltet */
    border: 1px solid #5e4795; /* Lægger en kant med farven #5e4795 */
    font-size: 16px; /* Sætter skriftstørrelsen for teksten i inputfeltet */
    margin-right: 10px; /* Lægger afstand til højre for inputfeltet */
}

/* Knap til at sende formularen */
form button {
    background-color: #5e4795; /* Sætter baggrundsfarven på knappen */
    color: white; /* Sætter tekstfarven på knappen til hvid */
    padding: 10px 20px; /* Lægger polstring omkring knappen */
    border: none; /* Fjern kantlinje */
    border-radius: 5px; /* Rundede hjørner på knappen */
    cursor: pointer; /* Ændrer musens markør til en hånd, når den er over knappen */
}

/* Hover-effekt for knappen */
form button:hover {
    background-color: #3d3570; /* Ændrer baggrundsfarven, når musen er over knappen */
}

/* Klassen for email-submit-knap */
.email-submit {
    padding: 1.6rem; /* Lægger ekstra polstring omkring submit-knappen */
}

/* SPONSOR-OVERSIGT */
.sponsor-container {
    display: flex; /* Gør sponsor-containeren til et flex-container */
    justify-content: center; /* Centrerer indholdet horisontalt */
    padding: 1.6rem; /* Giver indvendig afstand på 1.6rem omkring containerens indhold */
    flex-direction: row; /* Lægger indholdet i en kolonne (vertikalt) */
    align-items: center; /* Centrerer indholdet på tværs af containerens hovedakse */
    gap: 4rem; /* Der er ingen afstand mellem børnene i containeren */
}

.sponsor-container img {
    max-width: 90%; /* Billedets bredde kan være op til 90% af containerens bredde */
    height: 90px; /* Billedets højde sættes til 90px */
    margin: 0; /* Fjern eventuelle marginer omkring billedet */
}


/* RESPONSIVE DESIGN */

/* Dette gør teksten i event-liste mindre på skærme med en maksimal bredde på 1030px */
@media (max-width: 1030px) {
    .event-liste {
        font-size: 0.8rem; /* Mindsker font-størrelsen i event-liste sektionen */
    }
}

/* MOBIL: Stilændringer for skærme med en maksimal bredde på 600px (mobiloptimering) */
@media (max-width: 600px) {

    /* Gør hovedindholdet fleksibelt, så det arrangeres vertikalt */
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Justerer placeringen af billede-sektionen for Anne Roem */
    .anne-roem {
        position: relative; /* Ændrer positionen af sektionen til relativ */
    }

    /* Justerer margin for billet-køb-sektionen på mobil */
    .billet-køb {
        margin: 0; /* Fjerner marginen for at tilpasse layoutet */
    }

    /* STYLE FOR HOVEDINDHOLD: fjerner padding og centrerer tekst */
    main {
        padding: 0px; /* Fjerner padding */
        text-align: center; /* Centrerer teksten */
    }

    /* STIL FOR LOGO: Justerer logoets container på mobil */
    .logo-container {
        text-align: right; /* Justerer logoet til højre */
        padding: 20px; /* Tilføjer padding omkring logoet */
        position: right; /* Gør containeren relativ i forhold til siden */
    }

    /* Justering af logo-billedet */
    .logo-img {
        width: 10%; /* Sætter logo-bredden til 10% af containeren */
        max-height: 100px; /* Maksimal højde af logoet */
        object-fit: cover; /* Sørger for at billedet dækker containeren uden at blive forvrænget */
    }

    /* Logoet placeres absolut, så det forbliver på samme sted på siden */
    .logo-img {
        position: absolute;
        top: 20px;
        left: 20px;
        max-height: 100px;
    }

    /* Bannerbilledet skjules på mobil */
    .banner-img {
        display: none;
    }

    /* STYLE AF BILLEDET UNDER NAVBAR: Billederne tilpasser sig skærmstørrelsen */
    .image {
        width: 100%; /* Billedet fylder 100% af containerens bredde */
        overflow: hidden; /* Skjuler overflow, hvis billedet er for stort */
    }
    
    .image img {
        width: 100%; /* Billedet tilpasses containerens bredde */
        height: auto; /* Bevarer proportionerne */
        display: block; /* Gør billedet til et blok-element */
        object-fit: cover; /* Gør, at billedet dækker hele containeren */
        max-width: 100%; /* Hindrer at billedet bliver større end containeren */
    }

    /* Første sektion: Justering for responsiv visning */
    .førstesektion {
        display: flex;
        flex-direction: column; /* Arrangerer indholdet vertikalt */
        align-items: center; /* Centrerer elementerne horisontalt */
    }

    /* KONCERT-OVERSIGT: Tilpasning af billet-sektionen til mobil */
    .billet-køb {
        width: 66%; /* Gør billetten 66% bred på skærme med mindre bredde */
        height: 36rem; /* Sætter højde på billet-sektionen */
        background-color: #a9b4df; /* Baggrundsfarve */
        padding: 0.1rem 0rem; /* Tilføjer minimal padding */
        border-radius: 8px; /* Runder hjørnerne */
        margin: -3rem 0 0 0rem; /* Skubber billetten opad */
        display: flex; /* Brug flexbox til layout */
        flex-direction: column; /* Arranger elementerne i en kolonne */
        justify-content: space-around; /* Fordeler pladsen jævnt i sektionen */
        position: relative; /* Gør sektionen relativ i forhold til dens position */
    }

    /* Anne Roem billedsektion */
    .anne-roem {
        width: 100%; /* Billedet tager 100% af containerens bredde */
        height: auto; /* Højden justeres automatisk for at bevare proportioner */
    }

    /* Billede i Anne Roem sektionen */
    .anne-roem img {
        width: 100%; /* Billedet fylder hele containeren */
    }

    /* Knap til at købe billet */
    .buy-ticket {
        display: inline-block; /* Gør knappen inline, så den kan tilpasse sig indholdet */
        background-color: #5e4795; /* Lilla baggrundsfarve */
        color: white; /* Hvid tekst */
        padding: 0.9rem 0rem; /* Padding til knappen */
        text-decoration: none; /* Fjerner underline */
        font-weight: bold; /* Gør teksten fed */
        border-radius: 5px; /* Runde hjørner på knappen */
        margin: 1rem; /* Mellemrum omkring knappen */
        font-size: 1.4rem; /* Ændrer font-størrelsen */
    }

    /* Hover-effekt for knappen */
    .buy-ticket:hover {
        background-color: #3d3570; /* Skifter baggrundsfarve til mørkere lilla ved hover */
    }

    /* Tekst for næste event */
    .next-event {
        font-size: 1.7rem; /* Større skriftstørrelse */
        font-weight: bold; /* Fed tekst */
        display: flex; /* Flexbox for at justere layoutet */
        padding-left: 1rem; /* Lidt plads til venstre */
    }

    /* Eventliste tilpasning */
    .event-liste {
        display: flex; /* Flexbox for at arrangere listepunkterne */
        padding-left: 1rem; /* Lidt plads til venstre */
        flex-direction: column; /* Arranger eventerne vertikalt */
        align-items: flex-start; /* Justerer eventerne til venstre */
        line-height: 2rem; /* Giver lidt ekstra linjeafstand */
        list-style: none; /* Fjerner punkttegn fra listen */
        font-size: 1.1rem; /* Sætter font-størrelsen */
    }

    /* Stil for eventnavnet */
    .event-name {
        display: flex; /* Flexbox for at arrangere eventnavnene */
        padding-left: 1rem; /* Lidt plads til venstre */
        font-size: 1.2rem; /* Større skriftstørrelse */
    }

    /* Se alle tider link */
    .se-alle-tider {
        display: flex; /* Flexbox til at arrangere linket */
        padding-left: 1rem; /* Lidt plads til venstre */
        padding-top: 0.5rem; /* Lidt ekstra plads til toppen */
        font-size: 1.1rem; /* Lidt mindre skriftstørrelse */
        text-decoration: none; /* Fjerner underline */
    }

    .medie-kampagne article {
        padding-left: 5rem;
    }

    /* KAMPAGNER FORSIDE */
.alle-kampagner {
    display: flex; /* Aktiverer fleksibel layout for kampagnerne */
    flex-direction: column; /* Arrangerer kampagnerne vertikalt */
    overflow: hidden; /* Skjuler eventuelt overskydende indhold */
    margin-top: 2rem; /* Tilføjer margin øverst */
    padding: 2.5rem; /* Tilføjer padding omkring containeren */
    gap: 15%; /* Tilføjer afstand mellem elementerne */
    align-items: center;
}

.kampagne1-2,
.kampagne3 {
    display: flex; /* Aktiverer fleksibel layout for kampagnerne */
    flex-direction: column; /* Arrangerer kampagnerne vertikalt */
    width: 100%; /* Sætter bredden til 100% af containerens bredde */
    gap: 2rem; /* Tilføjer afstand mellem kampagnerne */
    justify-content: space-between; /* Fordeler kampagnerne jævnt */
    margin-top: 1rem; /* Tilføjer margin øverst */
}


/* MEDIE-KAMPAGNE */
.medie-kampagne {
    display: flex; /* Aktiverer fleksibel layout på containeren */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
    border-radius: 8px; /* Runder hjørnerne af containeren */
    align-content: center; /* Centrerer indholdet vertikalt, hvis der er flere rækker */
    align-items: center; /* Centrerer indholdet horisontalt i containeren */
    justify-content: flex-start; /* Justerer indholdet mod starten af containeren (venstre side) */
    flex-direction: row;
}

.medie-kampagne article {
    padding: 0.7rem; /* Tilføjer padding omkring indholdet i article */
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børneelementer vertikalt */
    align-content: center; /* Centrerer indholdet vertikalt inden i article */
    justify-content: center; /* Centrerer indholdet vertikalt inde i article */
    align-items: center; /* Centrerer indholdet horisontalt inde i article */
    margin-left: 0; /* Tilføjer margin til venstre for at skabe afstand til andre elementer */
    padding-left: 2rem;
}

.kampagne1-2 article {
    border-radius: 8px; /* Runder hjørnerne af article */
    height: 16rem; /* Sætter højden af article til 16rem */
}

/* KAMPAGNE-BILLEDE STYLES */
.kampagne-billede1 {
    width: 50%; /* Sætter bredden på billedet til 50% af containerens bredde */
    height: 16rem; /* Sætter højden på billedet til 16rem */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

.kampagne-billede2 {
    width: 50%; /* Sætter bredden på billedet til 50% af containerens bredde */
    height: 16rem; /* Sætter højden på billedet til 16rem */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

.kampagne-billede3 {
    width: 50%; /* Sætter bredden på billedet til 50% af containerens bredde */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

/* FRIVILLIG TILMELDING */
.frivillig-tilmelding {
    display: flex; /* Aktiverer fleksibel layout på frivillig tilmelding container */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
}

.frivillig-tilmelding article {
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børnelementer vertikalt */
    align-items: center; /* Centrerer børneelementer horisontalt */
    justify-content: center; /* Centrerer børneelementer vertikalt */
    width: 50%; /* Sætter bredden af article til 50% af containerens bredde */
}

/* DONATION */
.donation {
    display: flex; /* Aktiverer fleksibel layout på donation container */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
    border-radius: 8px; /* Runder hjørnerne af donation containeren */
}

.donation article {
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børneelementer vertikalt */
    align-items: center; /* Centrerer børneelementer horisontalt */
    justify-content: center; /* Centrerer børneelementer vertikalt */
    width: 50%; /* Sætter bredden af article til 50% af containerens bredde */
}

/* KAMPAGNE-TEKST */
.kampagne-tekst1 {
    font-size: 1.4rem; /* Sætter skriftstørrelsen til 1.4rem for kampagne teksten */
}

/* KAMPAGNE-BUTTON */
.kampagne-button {
    background-color: #594891; /* Sætter baggrundsfarven på knappen til en mørk lilla */
    color: white; /* Sætter tekstfarven på knappen til hvid */
    font-size: 1.1rem; /* Sætter skriftstørrelsen på knappen til 1.1rem */
    padding: 0.1rem 2.8rem; /* Tilføjer padding inde i knappen (top/bund: 0.1rem, venstre/højre: 2.8rem) */
    margin-top: 1.3rem; /* Tilføjer margin øverst på knappen for at skabe afstand til elementet over */
    font-family: 'Jockey One', sans-serif; /* Sætter skrifttypen til 'Jockey One' med fallback til sans-serif */
    border-radius: 8px; /* Runder hjørnerne af knappen */
    border: none; /* Fjerner standardkanten på knappen */
    cursor: pointer; /* Ændrer musemarkøren til en pegefinger, når man holder musen over knappen */
}

    .femy-quote {
        padding-left: 0rem;
    }
}

/* TABLET */ 
@media (min-width: 601px) and (max-width: 991px) {
    /* STYLE FOR HOVEDINDHOLD */
    main {
        padding: 0px; /* Fjerner eventuel indvendig afstand fra 'main' containeren */
        text-align: center; /* Centrerer teksten i 'main' containeren */
    }

/* STIL FOR LOGO */
.logo-container {
    text-align: right; /* Teksten og indholdet i logo-containeren bliver justeret til højre */
    padding: 20px; /* Indvendig afstand på 20px omkring indholdet i containeren */
    position: right; /* Denne egenskab er dog ugyldig. "right" kan ikke bruges som værdi for position */
}

.logo-img {
    width: 10%; /* Sætter bredden på logoet til 10% af containerens bredde */
    max-height: 100px; /* Sætter den maksimale højde på logoet til 100px */
    object-fit: cover; /* Gør, at billedet dækker hele området uden at forvrænge det, beskærer eventuelt billedet */
}

.logo-img {
    position: absolute; /* Sætter logoet i en absolut position i forhold til den nærmeste positionerede forælder */
    top: 20px; /* Afstand fra toppen af containeren */
    left: 20px; /* Afstand fra venstre side af containeren */
    max-height: 100px; /* Sætter den maksimale højde på logoet til 100px */
}

.banner-img {
    display: none; /* Skjuler bannerbilledet (det vil ikke blive vist på siden) */
}

/* STYLE AF BILLEDET UNDER NAVBAR */
.image {
    width: 100%; /* Billedets container fylder 100% af bredden på dens forældrecontainer */
    overflow: hidden; /* Skjuler eventuelt overskydende billede, der ikke passer til containeren */
}
  
.image img {
    width: 100%; /* Gør billedet bredt nok til at fylde hele containeren */
    height: auto; /* Bevarer billedets proportioner ved at justere højden automatisk */
    display: block; /* Fjerner eventuel unødvendig afstand under billedet (standard for billeder er inline) */
    object-fit: cover; /* Billedet tilpasses containeren, mens det dækker hele arealet uden at forvrænge billedet */
    max-width: 100%; /* Hindrer billedet i at blive større end containerens bredde */
}

/* Første sektion: Flexbox for responsiv visning */
.førstesektion {
    display: flex; /* Brug flexbox til layout */
    flex-direction: column; /* Arranger elementerne vertikalt i en kolonne */
    align-items: center; /* Centrerer alle elementer horisontalt inden for containeren */
}

/* KONCERT-OVERSIGT */
.billet-køb {
    width: 66%; /* Sætter bredden af billet-køb containeren til 66% af dens forælder */
    height: 45rem; /* Sætter højden af billet-køb containeren til 36rem */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
    padding: 0.1rem 0rem; /* Tilføjer lidt padding på top/bund, men ingen på venstre/højre */
    border-radius: 8px; /* Runder hjørnerne af containeren */
    margin: -3rem 0 0 0rem; /* Tilføjer negativ margin øverst for at flytte containeren opad */
    display: flex; /* Aktiverer fleksibel layout */
    flex-direction: column; /* Arrangerer børneelementer vertikalt */
    justify-content: space-around; /* Fordeler elementerne jævnt med plads mellem dem */
    position: relative; /* Sætter positionen til relativ for eventuelle efterfølgende absolutte positioneringer */
}

.anne-roem {
    width: 100%; /* Sætter bredden af billedcontaineren til 100% af dens forælder */
    height: auto; /* Sætter højden automatisk baseret på billedets proportioner */
}

.anne-roem img {
    width: 100%; /* Gør billedet responsivt ved at sætte bredden til 100% af containerens bredde */
}

.buy-ticket {
    display: inline-block; /* Gør knappen til et inline element, der opfører sig som et blok-element */
    background-color: #5e4795; /* Sætter baggrundsfarven på knappen til lilla */
    color: white; /* Sætter tekstfarven til hvid */
    padding: 0.9rem 0rem; /* Tilføjer padding på top/bund, men ingen til venstre/højre */
    text-decoration: none; /* Fjerner understregning på linket */
    font-weight: bold; /* Gør teksten fed */
    border-radius: 5px; /* Runder hjørnerne af knappen */
    margin: 1rem; /* Tilføjer margin omkring knappen */
    font-size: 1.4rem; /* Sætter skriftstørrelsen til 1.4rem */
}

.buy-ticket:hover {
    background-color: #3d3570; /* Ændrer baggrundsfarven på knappen, når musen er over den */
}

.next-event {
    font-size: 1.4rem; /* Sætter skriftstørrelsen på næste event til 1.4rem */
    font-weight: bold; /* Gør teksten fed */
    display: flex; /* Aktiverer fleksibel layout for at justere elementerne */
    padding-left: 1.2rem; /* Tilføjer padding til venstre */
}

.event-liste {
    display: flex; /* Aktiverer fleksibel layout */
    padding-left: 1rem; /* Tilføjer padding til venstre */
    flex-direction: column; /* Arrangerer eventerne vertikalt */
    align-items: flex-start; /* Justerer elementerne til venstre */
    line-height: 2rem; /* Øger linjeafstanden for læsbarhed */
    list-style: none; /* Fjerner punkttegn fra listen */
    font-size: 1.1rem; /* Sætter skriftstørrelsen til 1.1rem */
}

.event-name {
    display: flex; /* Aktiverer fleksibel layout */
    padding-left: 1rem; /* Tilføjer padding til venstre */
    font-size: 1rem; /* Sætter skriftstørrelsen på eventnavnet til 1rem */
}

.se-alle-tider {
    display: flex; /* Aktiverer fleksibel layout */
    padding-left: 1rem; /* Tilføjer padding til venstre */
    padding-top: 0.5rem; /* Tilføjer padding øverst for at skabe lidt afstand */
    font-size: 1.1rem; /* Sætter skriftstørrelsen til 1.1rem */
    text-decoration: none; /* Fjerner understregning på linket */
}

/* ARTIKLER OG KAMPAGNER */
.femy-quote {
    margin-top: 0; /* Fjerner margin øverst */
    margin-left: 0; /* Fjerner margin til venstre */
    padding-left: 0;
}

.femy-quote img {
    max-width: 90%; /* Sætter den maksimale bredde af billedet til 90% af containerens bredde */
    height: auto; /* Sætter højden automatisk for at bevare proportionerne */
    margin-top: 4rem; /* Tilføjer margin øverst for at skabe afstand fra elementet over */
    margin-right: -0.6rem; /* Tilføjer negativ margin til højre for at justere placeringen af billedet */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

.femy-quote h2 {
    font-size: 24px; /* Sætter skriftstørrelsen på overskriften til 24px */
    margin-top: 20px; /* Tilføjer margin øverst for at skabe afstand fra elementet over */
    color: white; /* Sætter tekstfarven til hvid */
}

.femy-interview {
    color: #5e4795; /* Sætter tekstfarven til lilla */
    text-decoration: none; /* Fjerner understregning på linket */
}

.femy-interview:hover {
    color: #3d3570; /* Ændrer tekstfarven til mørkere lilla, når musen er over linket */
}

/* KAMPAGNER FORSIDE */
.alle-kampagner {
    display: flex; /* Aktiverer fleksibel layout for kampagnerne */
    flex-direction: column; /* Arrangerer kampagnerne vertikalt */
    overflow: hidden; /* Skjuler eventuelt overskydende indhold */
    margin-top: 2rem; /* Tilføjer margin øverst */
    padding: 2.5rem; /* Tilføjer padding omkring containeren */
    gap: 15%; /* Tilføjer afstand mellem elementerne */
    align-items: center;
}

.kampagne1-2,
.kampagne3 {
    display: flex; /* Aktiverer fleksibel layout for kampagnerne */
    flex-direction: column; /* Arrangerer kampagnerne vertikalt */
    width: 100%; /* Sætter bredden til 100% af containerens bredde */
    gap: 2rem; /* Tilføjer afstand mellem kampagnerne */
    justify-content: space-between; /* Fordeler kampagnerne jævnt */
    margin-top: 1rem; /* Tilføjer margin øverst */
}



/* MEDIE-KAMPAGNE */
.medie-kampagne {
    display: flex; /* Aktiverer fleksibel layout på containeren */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
    border-radius: 8px; /* Runder hjørnerne af containeren */
    align-content: center; /* Centrerer indholdet vertikalt, hvis der er flere rækker */
    align-items: center; /* Centrerer indholdet horisontalt i containeren */
    justify-content: flex-start; /* Justerer indholdet mod starten af containeren (venstre side) */
    flex-direction: row;
}

.medie-kampagne article {
    padding: 0.7rem; /* Tilføjer padding omkring indholdet i article */
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børneelementer vertikalt */
    align-content: center; /* Centrerer indholdet vertikalt inden i article */
    justify-content: center; /* Centrerer indholdet vertikalt inde i article */
    align-items: center; /* Centrerer indholdet horisontalt inde i article */
    margin-left: 0; /* Tilføjer margin til venstre for at skabe afstand til andre elementer */
    padding-left: 7rem;
}

.kampagne1-2 article {
    border-radius: 8px; /* Runder hjørnerne af article */
    height: 16rem; /* Sætter højden af article til 16rem */
}

/* KAMPAGNE-BILLEDE STYLES */
.kampagne-billede1 {
    width: 50%; /* Sætter bredden på billedet til 50% af containerens bredde */
    height: 16rem; /* Sætter højden på billedet til 16rem */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

.kampagne-billede2 {
    width: 50%; /* Sætter bredden på billedet til 50% af containerens bredde */
    height: 16rem; /* Sætter højden på billedet til 16rem */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

.kampagne-billede3 {
    width: 50%; /* Sætter bredden på billedet til 50% af containerens bredde */
    border-radius: 8px; /* Runder hjørnerne af billedet */
}

/* FRIVILLIG TILMELDING */
.frivillig-tilmelding {
    display: flex; /* Aktiverer fleksibel layout på frivillig tilmelding container */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
}

.frivillig-tilmelding article {
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børnelementer vertikalt */
    align-items: center; /* Centrerer børneelementer horisontalt */
    justify-content: center; /* Centrerer børneelementer vertikalt */
    width: 50%; /* Sætter bredden af article til 50% af containerens bredde */
}

/* DONATION */
.donation {
    display: flex; /* Aktiverer fleksibel layout på donation container */
    background-color: #a9b4df; /* Sætter en lys lilla baggrundsfarve */
    border-radius: 8px; /* Runder hjørnerne af donation containeren */
}

.donation article {
    display: flex; /* Aktiverer fleksibel layout inde i article */
    flex-direction: column; /* Arrangerer børneelementer vertikalt */
    align-items: center; /* Centrerer børneelementer horisontalt */
    justify-content: center; /* Centrerer børneelementer vertikalt */
    width: 50%; /* Sætter bredden af article til 50% af containerens bredde */
}

/* KAMPAGNE-TEKST */
.kampagne-tekst1 {
    font-size: 1.4rem; /* Sætter skriftstørrelsen til 1.4rem for kampagne teksten */
}

/* KAMPAGNE-BUTTON */
.kampagne-button {
    background-color: #594891; /* Sætter baggrundsfarven på knappen til en mørk lilla */
    color: white; /* Sætter tekstfarven på knappen til hvid */
    font-size: 1.1rem; /* Sætter skriftstørrelsen på knappen til 1.1rem */
    padding: 0.1rem 2.8rem; /* Tilføjer padding inde i knappen (top/bund: 0.1rem, venstre/højre: 2.8rem) */
    margin-top: 1.3rem; /* Tilføjer margin øverst på knappen for at skabe afstand til elementet over */
    font-family: 'Jockey One', sans-serif; /* Sætter skrifttypen til 'Jockey One' med fallback til sans-serif */
    border-radius: 8px; /* Runder hjørnerne af knappen */
    border: none; /* Fjerner standardkanten på knappen */
    cursor: pointer; /* Ændrer musemarkøren til en pegefinger, når man holder musen over knappen */
}

/* NYHEDSBREV */
.nyhedsbrev-container {
    background: linear-gradient(to bottom, #a9b4df, #848484 ,#a9b4df); /* Sætter en baggrund med en gradient fra lys lilla til grå og tilbage til lys lilla */
    padding: 2rem; /* Tilføjer padding omkring indholdet i containeren */
    margin-top: 2rem; /* Tilføjer margin øverst for at skabe afstand fra elementet over */
    width: 100%; /* Sætter bredden til 100% af containerens bredde */
}

.nyhedsbrev-tekst h2 {
    font-size: 2rem; /* Sætter skriftstørrelsen på overskriften til 2rem */
}

.nyhedsbrev-tekst p {
    font-size: 1.5rem; /* Sætter skriftstørrelsen på paragrafen til 1.5rem */
}

form input[type="email"] {
    padding: 10px; /* Tilføjer padding inde i inputfeltet */
    border-radius: 5px; /* Runder hjørnerne af inputfeltet */
    border: 1px solid #5e4795; /* Sætter en lilla kant rundt om inputfeltet */
    font-size: 16px; /* Sætter skriftstørrelsen i inputfeltet */
    margin-right: 10px; /* Tilføjer margin til højre for at skabe afstand til knappen */
}

form button {
    background-color: #5e4795; /* Sætter baggrundsfarven på knappen til lilla */
    color: white; /* Sætter tekstfarven på knappen til hvid */
    padding: 10px 20px; /* Tilføjer padding inde i knappen (top/bund: 10px, venstre/højre: 20px) */
    border: none; /* Fjerner standardkanten på knappen */
    border-radius: 5px; /* Runder hjørnerne af knappen */
    cursor: pointer; /* Ændrer musemarkøren til en pegefinger, når man holder musen over knappen */
}

form button:hover {
    background-color: #3d3570; /* Ændrer baggrundsfarven på knappen, når man holder musen over den */
}

.email-submit {
    padding: 1.6rem; /* Tilføjer padding omkring submit-knappen */
}

/* SPONSOR-OVERSIGT */
.sponsor-container {
    display: flex; /* Aktiverer fleksibel layout */
    justify-content: center; /* Centrerer sponsorene horisontalt */
    padding: 1.6rem; /* Tilføjer padding omkring containeren */
    flex-direction: column; /* Arrangerer sponsorene vertikalt i containeren */
    align-items: center; /* Centrerer sponsorene horisontalt */
    gap: 0px; /* Fjerner afstand mellem sponsorene */
}

.sponsor-container img {
    max-width: 90%; /* Sætter den maksimale bredde på billederne til 90% af containerens bredde */
    height: 90px; /* Sætter højden på billederne til 90px */
    margin: 0; /* Fjerner margin omkring billederne */
}
 }