/* pt-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/pt-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/pt-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/pt-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Fonts/pt-sans-v17-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../Fonts/pt-sans-v17-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../Fonts/pt-sans-v17-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../Fonts/pt-sans-v17-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/pt-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/pt-sans-v17-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Fonts/pt-sans-v17-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../Fonts/pt-sans-v17-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../Fonts/pt-sans-v17-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/pt-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/pt-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/pt-sans-v17-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Fonts/pt-sans-v17-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../Fonts/pt-sans-v17-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../Fonts/pt-sans-v17-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../Fonts/pt-sans-v17-latin-700italic.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/pt-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/pt-sans-v17-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Fonts/pt-sans-v17-latin-700italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../Fonts/pt-sans-v17-latin-700italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../Fonts/pt-sans-v17-latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

:root {
  --lightgreen: #C6D64F;
  --darkgreen: #004B3A;
  --orange: #F39220;
  --red: #D50505;

  /* Fallback wegen Tippfehler */
  --fontNormal: 400;
  --fontNortmal: 400; /* alt */
  --fontBold: 700;

  /* ===== TYPO (mobile-optimiert: <576px) ===== */
  --fs-base: 1rem;          --lh-base: 1.6;

  --fs-h1: 2.75rem;         --lh-h1: 1.25;
  --fs-lead: 1.25rem;       --lh-lead: 1.4;

  --fs-header-acc: 0.875rem;
  --fs-footer-span: 1rem;

  --fs-login-h3: 1.375rem;  --lh-login-h3: 1.25;
  --fs-button: 0.938rem;    --lh-button: 1.2;
  --fs-label: 0.938rem;     --lh-label: 1.2;
  --fs-input: 1rem;         --lh-input: 1.4;
}



/* ====== Globale Zuordnung ====== */
html, body{
  margin: 0;
  padding: 0;
  font-family: 'PT Sans';
  font-weight: var(--fontNormal, var(--fontNortmal));
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

b{
  font-family: 'PT Sans';
  font-weight: var(--fontBold);
}

i{
  font-family: 'PT Sans';
  font-style: italic;
}

/* ====== Layout / bestehende Styles ====== */

#backgroundimage{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1145px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

header, main, footer{
  position: relative;
}

header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

header .logoarea{
  width: 100%;

  /*width: max-content;*/
  padding: 1.25rem 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--darkgreen);
}

header .logoarea img{
  width: 190px;
}

header .accountarea{
  width: 100%;
  justify-content: space-between;

  /*width: max-content;*/
  height: fit-content;
  min-height: 60px;
  padding-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-evenly;*/
  align-items: center;
  background-color: var(--darkgreen);
  border-bottom-left-radius: 1rem;
}

header .accountarea :not(img){
  margin: 0 2rem;
  font-size: var(--fs-header-acc);
  line-height: 1.2;
}

header .accountarea a#myaccount{
  color: var(--lightgreen);
  text-decoration: none;
  display: flex;
  font-weight: var(--fontBold);
  width: 100%;
  margin-top: 1rem;
}

header .accountarea a#logout{
  background-color: var(--lightgreen);
  color: var(--darkgreen);
  display: flex;
  font-weight: var(--fontBold);
  width: 100%;
  margin-top: 1rem;
}










main{
  min-height: 100vh;
}

main #headtext{
  margin-top: 10rem;
  background-image: url(../Images/shadow_headtext.png);
  background-repeat: no-repeat;
  background-position: center;
}

main #headtext h1{
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fontBold);
  hyphens: auto;
}

main #headtext p.lead{
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fontBold);
}

/* === Footer: Mobile-first (xs < 576px) === */
footer{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* volle Breite nutzen */
  justify-content: flex-end;
  min-height: 220px;             /* statt fixer Höhe */
  padding-top: 1.25rem;          /* Platz für die Headline */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* besserer Overlay-Ansatz als großer box-shadow: */
}
footer::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,75,58,.8);
  pointer-events:none;
}
footer > * { position: relative; } /* Inhalt über Overlay */

footer span{
  color: #fff;
  text-align: center;
  margin: 0 1rem 1rem 1rem;       /* kompakt auf Mobile */
  font-size: var(--fs-footer-span);
  line-height: 1.2;
  font-weight: var(--fontBold);
}

footer nav{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lightgreen);
  padding: .75rem 1rem;           /* auto-Höhe auf Mobile */
  margin: 0;
}

footer nav ul{
  display: flex;
  flex-wrap: wrap;                /* Links dürfen umbrechen */
  justify-content: center;
  gap: .75rem 1rem;               /* Zeilen- und Spaltenabstand */
  padding: 0;
  margin: 0;
  list-style: none;
}

footer nav ul li a{
  display: inline-block;
  padding: .25rem .25rem;         /* Touch-Ziel vergrößern */
  color: var(--darkgreen);
  text-decoration: none;
  font-weight: var(--fontBold);
}

/* ===== Login Wrapper: Mobile-first ===== */

#loginwrapper{
  width: 100%;
  max-width: 875px;
  min-height: 500px;
  margin: 0 auto;
  border-radius: .5rem;
  overflow: hidden; /* saubere Rundung für Top-Band */
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Info-Band oben */
#loginwrapper > div{
  background-color: var(--lightgreen);
  color: var(--darkgreen);
  text-align: center;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Formular-Padding (überschreibt .p-5 aus dem Markup, mobile kompakt) */
#loginwrapper form{
  padding: 1rem !important;
}

/* Überschrift */
#loginwrapper h3{
  color: var(--darkgreen);
  font-size: var(--fs-login-h3);
  line-height: var(--lh-login-h3);
  font-weight: var(--fontBold);
  margin-bottom: 1.5rem !important; /* kompakter auf mobile */
}

/* Grid-Fixes: Spalten untereinander auf Mobile */
#loginwrapper .row{
  row-gap: 1rem; /* vertikaler Abstand zwischen Feldern */
}
#loginwrapper .row > [class*="col-"]{
  width: 100%;         /* col-6 wird auf xs/SM zu 100% */
  flex: 0 0 100%;
}

/* Labels & Pflichtsternchen */
#loginwrapper label{
  color: #004B3A;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  margin-bottom: .25rem;
}
#loginwrapper label i{
  font-size: var(--fs-label);
  font-weight: var(--fontBold);
  color: #FF0000;
  font-style: normal;
}

/* Inputs */
#loginwrapper .form-control{
  font-size: var(--fs-input);
  line-height: var(--lh-input);
  color: #004B3A;
  border-color: #7B8058;
  padding: .7rem;
  border-radius: .5rem;
}
#loginwrapper .form-control:focus{
  border-color: var(--darkgreen);
  box-shadow: 0 0 0 .2rem rgba(0,75,58,.15);
  outline: 0;
}

/* Button */
#loginwrapper .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;                 /* volle Breite auf mobile */
  background-color: var(--lightgreen);
  color: var(--darkgreen);
  font-weight: var(--fontBold);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  padding: .8rem 1rem !important;
  border: 0;
  border-radius: .5rem;
}
#loginwrapper .btn:hover{
  filter: brightness(0.98);
}
#loginwrapper .btn:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(0,75,58,.2);
  outline: 0;
}

/* Typografie – falls global nicht gesetzt */
#loginwrapper, #loginwrapper *{
  font-family: 'PT Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


#loginwrapper .forgotpw,
#loginwrapper .backtologin{
  color: var(--darkgreen);
}

#loginwrapper ul.typo3-messages {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}


/* >=576px */
@media (min-width: 576px) {
  :root {
    --fs-base: 1rem;        --lh-base: 1.55;

    --fs-h1: 3.25rem;       --lh-h1: 1.2;
    --fs-lead: 1.5rem;      --lh-lead: 1.35;

    --fs-header-acc: 0.938rem;
    --fs-footer-span: 1.125rem;

    --fs-login-h3: 1.5rem;  --lh-login-h3: 1.25;
    --fs-button: 1rem;      --lh-button: 1.2;
    --fs-label: 1rem;       --lh-label: 1.2;
    --fs-input: 1rem;       --lh-input: 1.4;
  }


  /* FOOTER */
  footer{
    min-height: 230px;
    padding-top: 1.5rem;
  }
  footer span{
    margin: 0 2rem 1rem 2rem;
  }
  footer nav{
    padding: .75rem 2rem;
  }
  footer nav ul{
    gap: .75rem 1.25rem;
  }

  /* Loginwrapper */
    #loginwrapper form{ 
        padding: 1.25rem !important; 
    }
    #loginwrapper h3{ 
        margin-bottom: 1.75rem !important; 
    }


    /* Header */
    header .accountarea span{
        width: 100%;
    }

    header .accountarea a#myaccount{
        width: max-content;
    }

    header .accountarea a#logout{
        width: max-content;
    }

}

/* >=768px */
@media (min-width: 768px) {
  :root {
    --fs-base: 1rem;        --lh-base: 1.5;

    --fs-h1: 3.5rem;        --lh-h1: 1.2;
    --fs-lead: 1.5rem;      --lh-lead: 1.35;

    --fs-header-acc: 0.938rem;
    --fs-footer-span: 1.125rem;

    --fs-login-h3: 1.5rem;  --lh-login-h3: 1.25;
    --fs-button: 1rem;      --lh-button: 1.2;
    --fs-label: 1rem;       --lh-label: 1.2;
  }


  /* FOOTER */
  footer{
    min-height: 240px;
    padding-top: 1.75rem;
  }
  footer span{
    margin: 0 3rem 1.25rem 3rem;
    text-align: center;           /* noch zentriert auf MD */
  }
  footer nav{
    padding: .75rem 3rem;
  }
  footer nav ul{
    gap: 1rem 1.5rem;
  }

  /* Loginwrapper */
  #loginwrapper form{ 
    padding: 2rem !important; 
 }
  #loginwrapper .row > .col-6{
    width: 50%;
    flex: 0 0 50%;
  }
  #loginwrapper .btn{ 
    width: auto; 
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

    /* Header */
    header .accountarea{
        padding-bottom: 0;
    }

    header .accountarea span{
        width: max-content;
    }

    header .accountarea a#myaccount{
        margin-top: 0;
    }

    header .accountarea a#logout{
        margin-top: 0;
    }


}

/* >=992px (leicht reduziert ggü. XL-Desktop) */
@media (min-width: 992px) {
  :root {
    --fs-base: 1rem;        --lh-base: 1.5;

    --fs-h1: 5rem;          --lh-h1: 1.1;
    --fs-lead: 1.875rem;    --lh-lead: 1.3;

    --fs-header-acc: 1rem;
    --fs-footer-span: 1.25rem;

    --fs-login-h3: 1.75rem; --lh-login-h3: 1.25;
    --fs-button: 1.125rem;  --lh-button: 1.2;
    --fs-label: 1.125rem;   --lh-label: 1.2;
  }


  /* FOOTER */
  footer{
    min-height: 245px;
  }
  footer span{
    margin-bottom: 2rem;
    margin-right: 4.5rem;         /* etwas kompakter als XL */
    margin-left: 0;
    text-align: right;
    align-self: flex-end;         /* rechtsbündig platzieren */
  }
  footer nav{
    justify-content: flex-end;
    width: fit-content;
    margin-left: auto;
    padding: 0 4.5rem;            /* statt 6.25rem auf XL */
    height: 56px;                 /* leichte Fixhöhe */
  }
  footer nav ul{
    flex-wrap: nowrap;            /* keine Umbrüche mehr */
    gap: 1.5rem;
  }

  /* Loginwrapper */
  #loginwrapper form{ 
    padding: 2.5rem 3rem !important; 
  }
  #loginwrapper h3{ 
    margin-bottom: 2rem !important; 
  }

  /* Header */
  header .logoarea{
    width: max-content;
  }

  header .accountarea{
    width: max-content;
    justify-content: space-evenly;
  }

  header .accountarea span{
        max-width: 299px;
  }

}

/* >=1200px (Standardgröße = ursprüngliche Desktop-Werte) */
@media (min-width: 1200px) {
  :root {
    --fs-base: 1rem;        --lh-base: 1.5;

    --fs-h1: 6.25rem;       --lh-h1: 1.05;
    --fs-lead: 2.188rem;    --lh-lead: 1.25;

    --fs-header-acc: 1.125rem;
    --fs-footer-span: 1.375rem;

    --fs-login-h3: 2.188rem; --lh-login-h3: 1.2;
    --fs-button: 1.25rem;    --lh-button: 1.15;
    --fs-label: 1.25rem;     --lh-label: 1.2;
    --fs-input: 1rem;        --lh-input: 1.4;
  }

  /* FOOTER */
  footer{
    min-height: 245px;
  }
  footer span{
    margin-bottom: 2rem;
    margin-right: 6.25rem;
  }
  footer nav{
    height: 60px;
    padding: 0 6.25rem;
  }
  footer nav ul{
    gap: 2rem;
  }

  /* Loginwrapper */
  #loginwrapper form{ 
    padding: 3rem 3.5rem !important; 
  }

  /* Header */
    header .accountarea span{
        max-width: unset;
    }
}