/*=========================================================
        ROOT VARIABLEN
        =========================================================*/

 :root {

     /* Farben */
     --font-primary: Garamond, "Open Sans", sans-serif;

     --bg-color: #fffefe;
     --text-color: #393939;

     --main-color: #393939;
     --hover-color: rgb(108, 14, 14);

     /* HEADER */
     --header-height: 110px;

     /* CONTENT */
     --content-width: 1380px;
     --content-padding: 80px;

     /* FOOTER */
     --footer-height: 220px;

     /* FLEXBOXEN */
     --flex-gap: 40px;

     --box-left-width: 2;
     --box-right-width: 1;

     --box-left-height: 450px;
     --box-right-height: 450px;

     --flex-padding: 0;

     --flex-bg: rgba(255, 255, 255, 0.04);

     /* TYPO */
     --h1-size: clamp(1.5rem, 3vw, 3rem);
     --h2-size: clamp(1.2rem, 3vw, 3rem);

     --text-size: clamp(1rem, 1.5vw, 1.2rem);
 }

 /*=========================================================
        RESET
        =========================================================*/

 * {
     box-sizing: border-box;
 }

 html {
     font-size: 16px;
     scroll-behavior: smooth;
 }

 body {

     margin: 0;

     font-family: var(--font-primary);

     background: var(--bg-color);
     color: var(--text-color);

     line-height: 1.5;

     overflow-x: hidden;
 }

 body.menu-open {
     overflow: hidden;
 }

 img {
     max-width: 95%;
     display: block;
 }

 /*=========================================================
        LINKS
        =========================================================*/

 a {

     color: var(--main-color);

     text-decoration: none;

     transition: 0.3s ease;
 }

 a:hover {
     color: var(--hover-color);
 }

 /*=========================================================
        WRAPPER
        =========================================================*/

 .wrapper {

     min-height: 100vh;

     display: grid;

     grid-template-rows:
         auto 1fr auto;
 }

 /*=========================================================
        HEADER
        =========================================================*/

 header {

     min-height: var(--header-height);

     width: 100%;

     padding: 0 40px;

     display: flex;

     justify-content: space-between;
     align-items: center;

     border-bottom: 1px solid rgba(255, 255, 255, 0.08);

     position: sticky;
     top: 0;

     background: rgba(253, 253, 253, 0.92);

     backdrop-filter: blur(10px);

     z-index: 999;
 }

 .logo a,
 .logo {

     font-size: 1.4rem;
     font-size: 1.8rem;
     color: rgb(138, 22, 22);
     letter-spacing: -0.04em;
     font-family: Arial, Helvetica, sans-serif;
 }

 /*=========================================================
        NAVIGATION DESKTOP
        =========================================================*/

 #navbar ul {

     display: flex;

     align-items: center;

     gap: 28px;

     list-style: none;

     margin: 0;
     padding: 0;
 }

 #navbar li a {

     font-size: 1.2rem;

 }

 #navbar li.on a {
     xfont-weight: bold;
     color: rgb(138, 22, 22);

 }

 /*=========================================================
        BURGER BUTTON
        =========================================================*/

 .burger {

     display: none;

     width: 42px;
     height: 42px;

     border: none;

     background: transparent;

     cursor: pointer;

     z-index: 1001;
 }

 .burger span {

     display: block;

     width: 28px;
     height: 2px;

     margin: 6px auto;

     background: var(--main-color);

     transition: 0.3s ease;
 }

 /*=========================================================
        MAIN CONTENT
        =========================================================*/

 main {

     width: 100%;
     max-width: var(--content-width);

     margin: 0 auto;
     border: 0 solid red;
     padding: 0 40px;

 }

 .hero {

     min-height: 60vh;

     display: flex;

     flex-direction: column;
     justify-content: start;
     border: 0 solid red;
 }

 h1 {

     font-size: var(--h1-size);

     font-weight: 300;

     line-height: 1.1;

     margin-bottom: 24px;
 }

 h2 {
     font-size: var(--h2-size);

     margin-top: 0;
 }

 p {

     font-size: var(--text-size);

     max-width: 90ch;
 }

 .info {
     font-size: 1rem;
     font-style: italic;
     color: #12725f;
     max-width: 130ch;

 }

 hr {
     background-color: #ccc;
     border: 0;
     height: 1px;
     margin-bottom: 2.5em;
     margin-top: 2.5em;
     width: 100%;
 }

 /*=========================================================
        FLEX SECTION
        =========================================================*/

 .flex-section {

     display: flex;

     gap: var(--flex-gap);

     width: 100%;

     margin-top: 120px;

     align-items: stretch;
 }

 /*=========================================================
        FLEX BOXEN
        =========================================================*/

 .flex-box {

     background: var(--flex-bg);

     padding: var(--flex-padding);

     border: 1px solid rgba(255, 255, 255, 0.08);

     display: flex;

     flex-direction: column;

     justify-content: center;

     transition: 0.3s ease;
 }

 .flex-box:hover {

     transform: translateY(-4px);

     border-color: rgba(255, 255, 255, 0.2);
 }

 /*=========================================================
        BOX LINKS
        =========================================================*/

 .box-left {

     flex: var(--box-left-width);

     min-height: var(--box-left-height);
 }

 /*=========================================================
        BOX RECHTS
        =========================================================*/

 .box-right {

     flex: var(--box-right-width);

     min-height: var(--box-right-height);
 }

 /*=========================================================
        FOOTER
        =========================================================*/

 footer {

     min-height: var(--footer-height);

     padding: 60px 40px;

     border-top: 1px solid rgba(255, 255, 255, 0.08);

     display: flex;

     justify-content: space-between;
     align-items: center;

     flex-wrap: wrap;

     gap: 20px;
 }

 .footer-left,
 .footer-right {

     display: flex;

     flex-direction: column;

     gap: 10px;
 }

 /*=========================================================
        TABLET
        =========================================================*/

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

     :root {

         --header-height: 90px;

         --content-padding: 60px;

         --footer-height: auto;
     }

     /* Burger sichtbar */
     .burger {

         display: block;

         position: fixed;

         top: 24px;
         right: 20px;
     }

     /* MOBILE NAV */
     #navbar {

         position: fixed;

         inset: 0;

         width: 100%;
         height: 100vh;

         background: var(--bg-color);
         ;

         display: flex;

         justify-content: center;
         align-items: center;

         opacity: 0;
         visibility: hidden;

         transition:
             opacity 0.35s ease,
             visibility 0.35s ease;

         z-index: 1000;
     }

     #navbar.active {

         opacity: 1;
         visibility: visible;
     }

     #navbar ul {

         flex-direction: column;

         gap: 34px;
     }

     #navbar li a {
         font-size: 1.8rem;
     }

     /* Burger Animation */
     .burger.active span:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
     }

     .burger.active span:nth-child(2) {
         opacity: 0;
     }

     .burger.active span:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }

     /* FLEXBOXEN untereinander */
     .flex-section {

         flex-direction: column;
     }

     .box-left,
     .box-right {

         min-height: 320px;
     }

     footer {

         flex-direction: column;

         align-items: flex-start;
     }
 }

 /*=========================================================
        SMARTPHONE
        =========================================================*/

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

     :root {

         --header-height: 80px;

         --content-padding: 40px;

         --xxxflex-gap: 20px;

         --xxxflex-padding: 24px;
     }

     header {
         padding: 0 40px;
     }

     main {
         margin: 0 auto;

         padding:
             var(--content-padding);
     }

     footer {
         padding: 40px 20px;
     }

     .logo a {
         font-size: 1.4rem;
     }

     #navbar li a {
         font-size: 1.5rem;
     }

     .hero {
         min-height: auto;
     }

     .box-left,
     .box-right {

         min-height: auto;
     }
 }