/* 1. Global Reset */
   * {
       margin: 0;
       padding: 0;
   }

   :root {
       --color-background: #0f1f2e;
       --color-surface: #121825;
       --color-primary: #00565f;
       --color-secondary: #5a9d91;
       --color-accent: #e07a5f;
       --color-warning: #d65a3f;
       --text-primary: #ececec;
       --text-secondary: #a8b2ad;
   }

   html {
       scroll-behavior: smooth;
       scroll-snap-type: y mandatory;
   }

   body {
       font-family: 'Open Sans', sans-serif;
       background-color: var(--color-background);
       color: var(--text-primary);
       overflow-x: hidden;
   }

   .fullscreen {
       height: 100dvh;
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: center;
       scroll-snap-align: end;
       background-color: var(--color-surface);
   }

   h1,
   h2,
   p {
       margin: 0;
   }

   /* Landing */
   #landing {
       background: url('https://media.istockphoto.com/id/1834732329/de/vektor/rettungsring-und-rettungsschwimmer-rettungsschwimmer-ringretter-rettungsringe.jpg') center/cover;
       position: relative;
       color: var(--text-primary);
   }

   #landing::before {
       content: '';
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.7);
       z-index: 0;
   }

   #landing>div {
       position: relative;
       z-index: 1;
   }

   .typewriter-text {
       overflow: hidden;
       white-space: nowrap;
       border-right: .1em solid var(--text-primary);
       animation: typing 3s steps(40, end), blink-caret .8s step-end infinite;
   }

   @keyframes typing {
       from {
           width: 0
       }

       to {
           width: 100%
       }
   }

   @keyframes blink-caret {
       50% {
           border-color: transparent
       }
   }

   .reveal {
       opacity: 0;
       transform: translateY(50px);
       transition: all 1s ease;
   }

   .reveal.active {
       opacity: 1;
       transform: translateY(0);
   }

   h1,
   h2,
   h3 {
       color: var(--color-accent);
   }

   h2 {
       font-size: 2.5rem;
       font-weight: 600;
   }

   p.lead {
       color: var(--text-secondary);
   }

   /* Button */
   .btn-primary {
       font-size: 1.2rem;
       padding: 15px 30px;
       font-weight: 600;
       text-transform: uppercase;
       background: linear-gradient(135deg, var(--color-accent), var(--color-warning));
       border: none;
       transition: transform .3s ease, box-shadow .3s ease;
   }

   .btn-primary:hover {
       transform: scale(1.05);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
   }

   /* Technologie-Sektion */
   #tech {
       background-color: var(--color-primary) !important;
   }

   /* Kontakt-Sektion dunkler + helle Schrift */
   #contact {
       background-color: #0b131a !important;
       color: var(--text-primary);
   }

   #contact .lead,
   #contact address {
       color: var(--text-primary);
   }

   /* Tabs */
   .nav-tabs .nav-link {
       color: var(--text-secondary);
       border: none;
   }

   .nav-tabs .nav-link.active {
       color: var(--text-primary);
       background-color: var(--color-accent);
       border-radius: .5rem;
   }

   /* 2. Footer immer sichtbar */
   footer {
       position: sticky;
       bottom: 0;
       background-color: var(--color-surface);
       color: var(--text-secondary);
       padding: .5rem 0;
       scroll-snap-align: none;
       z-index: 10;
   }

   /* 3. Sidebar vertikal zentriert + immer oben */
   #sidebar {
       display: none;
   }

   @media (min-width: 992px) {
       #sidebar {
           display: block;
           position: fixed;
           top: 50%;
           left: 20px;
           transform: translateY(-50%);
           background: rgba(21, 42, 58, 0.9);
           padding: 20px;
           border-radius: 8px;
           z-index: 9999;
       }

       #sidebar ul {
           list-style: none;
       }

       #sidebar li {
           margin-bottom: 10px;
           cursor: pointer;
           color: var(--text-secondary);
           transition: color .3s;
       }

       #sidebar li.active {
           color: var(--color-accent);
           font-weight: bold;
       }

       #sidebar li ul {
           margin-top: 5px;
           margin-left: 15px;
       }

       body {
           padding-left: 260px;
       }
   }

   #landing {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
       padding: 2rem;
       text-align: center;
       word-break: break-word;
   }

   #landing h1 {
       font-size: 8vw;
       line-height: 1.2;
       margin-bottom: 1rem;
   }

   #landing p {
       font-size: 4vw;
       margin-bottom: 2rem;
   }

   @media (min-width: 768px) {
       #landing h1 {
           font-size: 4rem;
       }

       #landing p {
           font-size: 1.5rem;
       }
   }