/* Grundlayout */

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #f0f4f5;
        font-family: sans-serif;
        color: #0F514B;
      }



/*Startseite */

/* Header */

      .site-header {
        background-color: #0F514B;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 1rem; /* Schmaler Balken */
        height: 45px;
      }

      .logo {
        height: 30px;
        object-fit: contain;
      }

/* Dropdown Menü */

      .menu-wrapper {
        position: relative;
      }

      .menu-icon {
        font-size: 24px;
        color: white;
        cursor: pointer;
        user-select: none;
      }

      .dropdown-menu {
        position: absolute;
        top: 163%;
        right: 0;
        background-color: #0F514B;
        border-radius: 4px;
        padding: 10px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        display: none;
        z-index: 999;
      }

      .dropdown-menu.visible {
        display: block;
      }

      .dropdown-menu ul {
        list-style: none;
      }

      .dropdown-menu li a {
        display: block;
        padding: 10px 20px;
        color: #f0f0f0;
        text-decoration: none;
      }

      .dropdown-menu li a:hover {
        background-color: #5ca9a1;
      }

/* Welcome + Raum */

      .gesamte_seite {
        width: 100%;
        overflow: hidden;
        display: flow-root;
      }

      .schrift_und_impressum_und_grafik {
        position: relative; /* oder: einfach entfernen */
        width: 100%;
        height: 100%;
        text-align: center;
      }

      .welcome {
        font-size: 7vw;
        color: #0F514B;
        margin: 0;
        line-height: 1.44;
      }

/* To My Creative Space PNG */

      .subheadline {
        margin-top: -4px;
        margin-left: 0;
        text-align: center;
        width: 100%;
      }

      .subheadline img {
        width: 35vw; /* Skaliert mit Viewport */
        height: auto;
        max-width: 227.5px; /* fixiert ab 650px */
      }

      .schrift_und_grafik {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: -40px;
        position: relative;
      }

 /* Raum */

      .grafik {
        position: relative;
        flex: 1 1 60%;
        max-width: 800px;
        animation: float 4s ease-in-out infinite;
        filter: drop-shadow(0 40px 13px rgba(0, 0, 0,  0.3));
      }

      .raum_grafik {
        width: 100%;
        height: auto;
      }

/* Pfeile */

      .startseite_pfeil {
        position: absolute;
        pointer-events: none; /* Damit die Pfeile keine Klicks blockieren */
        user-select: none;
        height: auto;
        transition: none;
        z-index: 10,
      }

/* Symbole als Links */

      .interactive_link {
        position: absolute;
        display: block;
        transition: transform 0.3s ease, filter 0.3s ease;
        z-index: 3;
        filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
      }

      .interactive_link img {
        width: 100%;
        height: auto;
        display: block;
      }

      .interactive_link:hover {
        transform: scale(1.2);
      }

/* Take a look around */

      .textbox {
        flex: 1 1 40%;
        max-width: 600px;
        font-size: 3rem;
        font-weight: bold;
        color: #f0f0f0;
      }

/* Welle im Hintergrund */

      .startseite-wave-image {
        position: absolute;
        left: 52%;
        transform: translateX(-53%);
        width: 289vw;
        top: 56vw;
        height: auto;
        z-index: -32;
      }

      .startseiten-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
      }

/* Impressum */

      footer.impressum {
        text-align: center;
        font-size: 0.9rem;
        padding: 20px 0;
        margin-top: 40px;
        color: #f0f0f0;
      }

      footer.impressum hr {
        width: 80%;
        margin: 0 auto 10px;
        border: none;
        border-top: 1px solid #f0f0f0;
      }

      .startseite_impressum {
        color: #f0f0f0;
        text-decoration: none;
      }

      responsive-spacer {
        height: 35vw;  /* skaliert mit der Breite des Viewports */
        max-height: 400px; /* Sicherheitsgrenze */
        min-height: 139px; /* Mindesthöhe für sehr kleine Screens */
      }

/* Responsiv */

      @keyframes float {
        0% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0); }
      }

      @media (max-width: 900px) {
        .schrift_und_grafik {
          flex-direction: column;
        }
         .grafik {
          width: 100%;
          margin-top: 35px;
        }
      }

      @media (max-width: 650px) {
        .grafik {
          width: 100%;
        }
        .textbox {
          font-size: 1.5rem;
          margin-top: 19px;
          text-align: center;
        }
        }

      @media (min-width: 650px) {
        .welcome {
          font-size: 45.5px; /* 7vw bei 650px = 45.5px */
        }
        .subheadline img {
          width: 227.5px; /* 59vw bei 650px = 383.5px */
        }
        
        .schrift_und_grafik {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: -40px;
        position: relative;
      }
        
        .startseite-wave-image {
        position: absolute;
        left: 52%;
        transform: translateX(-53%);
        width: 289vw;
        top: 9vw;
        height: auto;
        z-index: -32;
        pointer-events: none;
      }
      }



/* About - Seite */

/* About - Hintergrund */

      .wave_about {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 358vw;
        top: -148vw;
        height: auto;
        z-index: -32;
      }

/* About - Header */

      .about_site_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 1rem; /* Schmaler Balken */
        height: 45px;
      }

/* About - Layout */

      .about-layout {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 37px;
        position: relative;
      }

/* About - Grafik */

      .grafik_about {
       position: relative;
        flex: 1 1 60%;
        max-width: 402px;
        animation: float 4s ease-in-out infinite;
        filter: drop-shadow(0 40px 13px rgba(0, 0, 0,  0.3));
      }

      .bilderrahmen_foto {
        width: 100%;
        height: auto;
        padding-right: 31px;
        padding-bottom: 31px;
      }

/* About - Schrift & Pfeil */

      .ueberschrift_und_pfeil {
        position: relative;  /* Pfeil bezieht sich auf diesen Container */
        margin-bottom: 2rem;
      }

     .h1_about {
        color: #0F514B;
        font-size: 2.8rem;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 1.1;
      }

      .text_layout {
        grid-column: 1 / -1; 
      }

      .text_inhalt {
        flex: 1 1 40%;
        max-width: 600px;
        font-size: 1rem;
        color: #0F514B;
        line-height: 22px;
      }

      .hr {
        width: 80%;
        margin: 0 auto 10px;
        border: none;
        border-top: 1px solid #0F514B;
      }

/* About - Kontaktformular */

      form {
        max-width: 1100px;
        margin: 40px auto;
        padding: 26px;
        font-family: sans-serif;
        font-weight: bold;
        font-style: bold;
        color: #0F514B;
      }

      input, textarea {
        width: 100%;
        padding: 10px;
        margin-top: 4px;
        font-size: 1rem;
        color: white;
        border-radius: 15px;
        border: none;
      }

      button {
        background-color: #0F514B;
        color: white;
        padding: 10px 18px;
        font-size: 1rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
      }

      button:hover {
        background-color: #0c403a;
      }

/* About - Impressum */

      footer.about_impressum {
        text-align: center;
        font-size: 0.9rem;
        padding: 20px 0;
        margin-top: 40px;
        color: #0F514B;
      }

     footer.about_impressum hr {
        width: 80%;
        margin: 0 auto 10px;
        border: none;
        border-top: 1px solid #0F514B;
      }

      a, footer.about_impressum {
        color: #0F514B;
        text-decoration: none;
      }


      .hr_about {
        width: 20%;
        margin: 0 auto 10px;
        border: none;
        border-top: 1px solid #0F514B;
      }

/* Umbruch */

      @media (max-width: 900px) {
        .about-layout {
          flex-direction: column;
        }

        .grafik_about {
          width: 100%;
        }
      }
        
      @media (min-width: 200px) {
        .grafik_about {
          width: 60%;
        }
      }

      @media (min-width: 660px) {
              .grafik_about {
                width: 42%;
              }
            }

      @media (max-width: 1020px) {
        .text_inhalt, .h1_about {
        margin-left: 28px; 
        margin-right: 28px;
      }
      }

      @media (min-width: 1020px) {
        .wave_about {
          margin-top: -226px;}
        
        .grafik_about {
          width: 21%; 
        }
      }

/* Blog - Seite */

/* Blog - Header */

      .blog-site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 1rem; /* Schmaler Balken */
        height: 43px;
      }

      .vertical-blog { 
        text-orientation: upright; 
        white-space: nowrap; 
        font-weight: bold;
        font-size: 6rem; 
        position: absolute; 
        left: 0;
        margin-left: 59px;
        top: 14vh; 
        user-select: none; 
        letter-spacing: 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #0c4f4f;
        text-shadow:1px 1px 0 #f0f4f5,
                  -1px 1px 0 #f0f4f5,
                  1px -1px 0 #f0f4f5,
                  -1px -1px 0 #f0f4f5,
                  0 1px 0 #f0f4f5,
                  0 -1px 0 #f0f4f5,
                  -1px 0 0 #f0f4f5,
                  1px 0 0 #f0f4f5,
                  2px 2px 0 #f0f4f5,
                  -2px 2px 0 #f0f4f5,
                  2px -2px 0 #f0f4f5,
                  -2px -2px 0 #f0f4f5,
                  0 2px 0 #f0f4f5,
                  0 -2px 0 #f0f4f5,
                  -2px 0 0 #f0f4f5,
                  2px 0 0 #f0f4f5,
                  1px 2px 0 #f0f4f5,
                  -1px 2px 0 #f0f4f5,
                  1px -2px 0 #f0f4f5,
                  -1px -2px 0 #f0f4f5,
                  2px 1px 0 #f0f4f5,
                  -2px 1px 0 #f0f4f5,
                  2px -1px 0 #f0f4f5,
                  -2px -1px 0 #f0f4f5;
      }

/* Blog - Layout */

      .layout_blog {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 84vh;
        display: flex; /* neu: erlaubt wachsenden linken Bereich */
        justify-content: flex-start;
      }

/* Grafik, Text und Menü */

      .notizbuch-wrapper {
        position: relative;
        margin-left: auto;
        max-width: 850px;
        width: 100%;
        height: 84vh; /* oder deine gewünschte Höhe */
        display: inline-block;
        animation: float 4s ease-in-out infinite;
        filter: drop-shadow(0 40px 13px rgba(0, 0, 0,  0.3));
            }

/* Blog - Seite */

      .notizbuch_foto {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: none;
      }

      .text-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .text-eintrag {
        position: absolute;
        right: 0; /* Immer rechts anpinnen */
        top: 0;
        height: 100%;
        width: auto;
        min-width: 100%; /* Damit das Bild mindestens die gesamte Breite abdeckt, links wird abgeschnitten */
        object-fit: cover;
      }

      .text-wrapper .text-eintrag {
        display: none;
      }

      #page1:checked ~ .notizbuch_foto ~ .text-wrapper .entry1,
      #page2:checked ~ .notizbuch_foto ~ .text-wrapper .entry2,
      #page3:checked ~ .notizbuch_foto ~ .text-wrapper .entry3,
      #page4:checked ~ .notizbuch_foto ~ .text-wrapper .entry4 {
        display: block;
      }

      /* Style für den aktiven Kreis */
      #page1:checked ~ .arrow-nav label[for="page1"],
      #page2:checked ~ .arrow-nav label[for="page2"],
      #page3:checked ~ .arrow-nav label[for="page3"],
      #page4:checked ~ .arrow-nav label[for="page4"] {
        opacity: 1; /* aktiver Kreis wird kräftig dargestellt */
      }

      .vertical-nav {
        position: absolute;
        top: 45%;        /* Feinabstimmung nötig */
        right: 62%;       /* Zwischen Seite und Stift */
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 1.4em;
        z-index: 2;
      }

      .arrow {
        background: #004d47;
        color: white;
        border-radius: 50%;
        font-size: clamp(10px, 1.2vw, 20px);
        width: 2em;
        height: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
        cursor: pointer;
        transition: opacity 0.3s ease;
      }

      input[type="radio"] {
        display: none;
      }

      .blog_beschreibung {
        width: 1011px;
        text-align: left;
        padding-left: -13rem;
        justify-content: left;
      }

/* Blog - Impressum */

      footer.blog_impressum {
        text-align: center;
        font-size: 0.9rem;
        padding: 20px 0;
        margin-top: -49px;
        color: #0F514B;
      }

     footer.blog_impressum hr {
        width: 80%;
        margin: 0 auto 10px;
        border: none;
        border-top: 1px solid #0F514B;
      }

/* Responsive Verhalten */

      @media (min-width: 1200px) {
        .notizbuch_foto {
          min-width: auto;
          width: auto;
          max-width: none;
        }
      }

      @media (max-width: 570px) {
        .vertical-nav {
          position: fixed;
          top: 45%;
          right: 21.5em;
          transform: translateY(-50%);
          z-index: 10;
        }
      }

      @media (max-width: 1000px) {
        .vertical-blog {
          display: none; /* auf kleinen Bildschirmen ausblenden */
        }
      }
        



/* Portfolio - Seite */

/* Portfolio - Header */
      .portfolio_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 1rem;
        height: 45px;
      }

      .wave_portfolio {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 358vw;
        top: -152vw;
        height: auto;
        z-index: -32;
      }

      /* Laptop + Portfolio-Schrift + Pfeil */
      .portfolio_oben {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
        position: relative;
      }

      .laptop {
        position: relative;
        max-width: 500px;
        width: 90%;
        text-align: center;
      }

      .laptop_foto {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        filter: drop-shadow(0 40px 13px rgba(0, 0, 0,  0.3));
      }

      .portfolio_text {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -6%);
        font-size: 2rem;
        color: #004d47;
        font-weight: bold;
      }

      .portfolio_pfeil {
        margin-top: 1rem;
        font-size: 2rem;
        animation: bounce 2s infinite;
        color: #004d47;
      }

      @keyframes bounce {
        0%, 100% { transform: translateY(0);}
        50% { transform: translateY(10px);}
      }

/* Kategorien-Menü oben */

      .portfolio_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .portfolio_navigation {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin: 1.5rem 0;
        position: relative;
      }

      .portfolio_navigation input[type="radio"] {
        display: none;
      }

      .portfolio_navigation label {
        position: relative;
        color: #004d47;
        font-weight: bold;
        font-size: 1.1rem;
        cursor: pointer;
        padding: 0.5rem 0;
        transition: color 0.3s ease;
        user-select: none; /* verhindert Markieren beim Klicken */
      }

      .portfolio_navigation label::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #86c6c0;
        border-radius: 2px;
        transition: width 0.4s ease, left 0.4s ease;
        transform: translateX(-50%);
      }

      .portfolio_navigation input[type="radio"]:checked + label::after {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
      }

      .portfolio_navigation label:hover {
        color: #86c6c0;
      }

/* Damit das Label markiert wird, wenn das Input checked ist */

      #kat_cgi:checked ~ .portfolio_navigation label[for="kat_cgi"]::after,
      #kat_work:checked ~ .portfolio_navigation label[for="kat_work"]::after,
      #kat_other:checked ~ .portfolio_navigation label[for="kat_other"]::after {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
      }

      #kat_cgi:checked ~ .portfolio_navigation label[for="kat_cgi"],
      #kat_work:checked ~ .portfolio_navigation label[for="kat_work"],
      #kat_other:checked ~ .portfolio_navigation label[for="kat_other"] {
        color: #86c6c0;
      }

/* Inputs verstecken */

      input[type="radio"] {
        display: none;
      }

/* Projekt-Kategorie-Steuerung */

      .projekt_wrapper {
        display: flex;
        flex-direction: column;
      }

/* Projekt-Kategorie-Wrapper */

      .projekt_kategorie {
        display: none; /* verstecken */
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
      }

/* Aktiviert wird die passende Kategorie */

      #kat_cgi:checked ~ .projekt_wrapper .cgi_beispiele,
      #kat_work:checked ~ .projekt_wrapper .work_beispiele,
      #kat_other:checked ~ .projekt_wrapper .other_beispiele {
        display: block; /* oder flex? besser block, denn grid übernimmt projektbereich */
      }

/* Projektbereich als Grid */

      .projektbereich {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
        align-items: start;
      }


/* Projektübersicht */

      .projekt_beispiel {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        border-radius: 12px;
        transition: transform 0.3s ease;

        /* Quadrat erzwingen */
        width: 100%;
        aspect-ratio: 1 / 1; /* gleich hohe Breite und Höhe */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .projekt_beispiel img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Bild formfüllend mit Zuschneiden */
        display: block;
        transition: filter 0.3s ease;
      }

      .projekt_beispiel .beschreibung {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 1rem;
        background: #004d47;
        color: white;
        width: 100%;
        text-align: center;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        font-size: 0.95rem;
      }

      .projekt_beispiel:hover .beschreibung {
        transform: translateY(0%);
      }

/* Projekt-Modal */

      .projekt_overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(27, 28, 28, 0.75);
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;
        padding: 2rem;
        color: white;
      }

      .projekt_overlay img {
        max-width: 90%;
        max-height: 80vh;
        height: auto;
        width: auto;
        object-fit: contain;
        margin-bottom: 1rem;
      }

      .projekt_overlay:target {
        display: flex;
      }

      .OWL_Link {
        color: white; 
        text-decoration: underline;
      }

      .close-btn {
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 2rem;
        color: white;
        text-decoration: none;
      }

/* Responsive Regeln */

      @media (max-width: 460px) {
        .laptop {
          max-width: 90%;
        }

        .portfolio_oben {
          font-size: 1.5rem;
        }

        .portfolio_pfeil {
          font-size: 1.5rem;
        }

        .projekt_kategorie {
          grid-template-columns: 1fr;
        }
      }