/* Allgemeine Stile */
        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: auto;
        }
        html, body {
            overflow-x: hidden;
        }

        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #19558b;
        }

        .hidden {
            visibility: hidden;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .visible {
            visibility: visible;
            opacity: 1;
            transition: opacity 1s ease-in-out;
            /* Gleiche Transition für Konsistenz */
        }


        body {
            margin: 0;
            font-family: "Tomorrow", sans-serif;
            line-height: 1.6;
            background: #19558b;
            /* background: linear-gradient(to bottom, #19558b, #3181cc); */
            color: #fff;
            overflow-x: hidden;
        }

        header {
            text-align: center;
            padding: 0;
            background: linear-gradient(to right, #1b5984, #3181cc);
            position: absolute;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid #7fcffd;
            transition: position 0.3s ease, top 1.3s ease;
        }

        header.fixed {
            position: fixed;
            /* Fixiert den Header */
            top: 0;
        }

        header h1 {
            /* font-size: 4rem; */
            margin: 0;
            text-align: center;
            font-size: clamp(2rem, 6vw, 5rem);
            /* Schriftgröße zwischen 2.5rem und 4rem */
            margin-left: auto;
            margin-right: auto;
        }

        header p {
            /* font-size: clamp(0.8rem, 6vw, 1.5rem); */
            font-size: 1.2rem;
            margin: 0;
            padding: 10px;
            width: 100%;
        }

        header img {
            max-width: 10%;
            height: auto;
            border-radius: 0px;
            /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
            margin-left: 1%;
        }

        header a {
            display: flex;
            align-items: center;
            justify-content: space-between;

        }


        ul li {
            font-size: clamp(1rem, 2vw, 1.5rem);
        }




        main {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        section {
            padding: 20px 20px;
            /* Mehr Abstand für Onepager-Abschnitte */
            max-width: 1200px;
            margin: auto;
            border-bottom: 1px solid #7fcffd;
            position: relative;
        }

        section:last-of-type {
            border-bottom: none;
            /* Kein Rand beim letzten Abschnitt */
        }

        section h2 {
            font-size: clamp(2rem, 4vw, 2.5rem);
            text-align: center;
            color: #7fcffd;
            margin-bottom: 20px;
        }
        .h2small {
            font-size: clamp(1.3rem, 4vw, 1.6rem);
            text-align: left;
            
        }
        .fotografie a {
            color:white;
        }


        section p {
            font-size: clamp(1rem, 2vw, 1.5rem);
            line-height: 1.6;
            text-align: left;
            margin-bottom: 10px;
        }

        .two-columns {
            font-size: clamp(1rem, 2vw, 1.5rem);
            line-height: 1.6;
            text-align: left;
            margin-bottom: 10px;
            column-count: 2;
            /* Anzahl der Spalten */
            column-gap: 75px;
            /* Abstand zwischen den Spalten */
        }

        .one-column {
            font-size: clamp(1rem, 2vw, 1.5rem);
            line-height: 1.6;
            text-align: left;
            margin-bottom: 10px;
            width: 50%;
            /* Breite der Spalte auf 50% setzen */
            margin: 0;
            /* Zentriert den Inhalt */
            display: block;
            /* Sicherstellen, dass es wie ein Block-Element behandelt wird */
        }


        h2 {
            font-size: clamp(1.5rem, 2vw, 3rem);
            /* Schriftgröße zwischen 2.5rem und 4rem */
            margin-bottom: 20px;
            text-decoration: underline;
        }



        form {
            text-align: center;
            margin-top: 20px;
        }

        form input,
        form textarea {
            width: 100%;
            max-width: 500px;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #7fcffd;
            border-radius: 5px;
            background: #f0f8ff;
            color: #19558b;
        }

        form button {
            padding: 10px 20px;
            font-size: 1rem;
            color: #fff;
            background: #19558b;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        form button:hover {
            background: #7fcffd;
            color: #19558b;
        }



        footer {
            text-align: center;
            padding: 20px;
            background: #19558b;
            color: #fff;
        }



        .intro {
            text-align: center;
            margin-bottom: 40px;
        }


        .highlights {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .highlight {
            background: rgba(255, 255, 255, 0.1);
            margin: 10px;
            padding: 20px;
            border-radius: 50px 0 50px 0;
            flex: 1 1 320px;
            max-width: 320px;
            text-align: left;
            transition: transform 0.3s ease-in-out;
            border-top: 1px solid #7fcffd;
            border-left: 1px solid #7fcffd;
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        .highlight:hover {
            transform: scale(1.05);
        }

        .cta {
            text-align: center;
            margin-top: 30px;
        }

        .cta a,
        #myform button {
            display: inline-block;
            background: #19558b;
            color: #7fcffd;
            padding: 0px 20px;
            /* font-size: 1.2rem; */
            font-size: clamp(1rem, 2vw, 1.5rem);
            text-decoration: none;
            border-radius: 0px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
            margin-right: 20px;
            width: 170px;
        }

        #menue .breit {
            width: auto;
        }

        .toIndex {
            color: white;
            text-align: center;
            text-decoration: none;

        }


        .cta a:hover,
        #myform button:hover {
            background: #5db8fa;
            transform: scale(1.1);
            color: #19558b;
        }

        #myform button {
            width: 100%;
            max-width: 500px;
        }

        .logo {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            padding: 0;

            /* leicht transparente Hintergrundfarbe */

            font-family: 'Arial', sans-serif;
            /* Hier den gewünschten Font ersetzen */
            /* font-size: 1.5rem; */
            font-weight: bold;
            color: #19558b;
            text-decoration: none;
            position: relative;
            width: 100%;
            background: #19558b;
            color: #7fcffd;

            border-bottom: 1px solid #7fcffd;
            transition: background 1s ease, color 1s ease;
            /* Sanfte Übergänge für Farbe */

        }


        .logo:hover {
            background: #b1d4ea;
            color: #19558b;
        }


        .logo h1 {
            font-size: clamp(2rem, 6vw, 5rem);
            color: inherit;
            transition: text-shadow 0.3s ease;
        }








        #menue {
            background: #3181cc;
            padding: 10px;
            text-align: center;
            position: absolute;
            /* Startet unterhalb des Headers */
            width: 100%;
            left: 0;
            top: -20px;
            /* Sorgt dafür, dass es links ausgerichtet bleibt */
            transition: position 0.3s ease, top 0.3s ease, left 0.3s ease;
            z-index: 10;
            /* Über der Section */
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
            border-top: 1px solid #b1d4ea;
            border-left: 1px solid #b1d4ea;
        }

        #menue.fixed {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            /* Schatten für visuelle Abgrenzung */
            background: #19558b;
            position: fixed;
            /* Fixiert, wenn gescrollt */
            top: 0;
            left: 0;
            /* Bleibt links ausgerichtet */
            width: 100%;
            /* Breite bleibt bei 100%, um Layout zu bewahren */
        }


        #inhalt section  {
            margin-top: 0;
            border-top: 1px solid #b1d4ea;
        }



        #slideshow {
            position: absolute;
            /* top: calc(100% + 20px); */
            /* Dynamisch unter dem Header */
            width: 100%;
            overflow: hidden;
            cursor: pointer
        }

        #slideshow img {
            /* width: 100%; */
            height: auto;
            /* Proportionales Skalieren */
            display: block;
            max-height: 400px;
            /* Maximalhöhe für größere Bildschirme */
        }






        #kiani {
            z-index: 10;
            
            position: absolute;
            width: 500px;
            /* Originalgröße */
            height: 300px;
            /* Originalgröße */
            /* background: url('path/to/your/image.jpg') no-repeat center/cover; */
            opacity: 1;
            /* Start: Unsichtbar 
            transform: scale(1);*/
            /* Start: Vergrößerter Zoom */
            transition: transform 1s ease, opacity 1s ease;
            /* Sanfte Animation */
        }



        #kiani img {

            max-width: 100%;
            /* Grafik an die Breite des Containers anpassen */
            height: auto;
            /* Seitenverhältnis beibehalten */
        }


        #kiani.visible {
            opacity: 1;
            /* Sichtbar */
            transform: scale(1);
            /* Normale Größe */
        }


        .scroll-button {
            display: inline-block;
            background: #19558b;
            color: #7fcffd;
            font-size: clamp(1rem, 2vw, 1.5rem);
            text-decoration: none;
            border-radius: 0px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
            margin-right: 20px;
            width: 50px;
            position: absolute;
            right: 0;
            border: 0;
            padding: 5px 0 5px 0;
        }


        .scroll-button:hover {
            background-color: #3181cc;
            /* Leichter Farbwechsel beim Hover */
            transform: scale(1.1);
            /* Leichtes Vergrößern */
        }



        #uebermich, #kontakt , #impressum, #preise {
            padding: 40px 20px;
            background: #19558b;
            color: #ffffff;
        }



        #uebermich .intro h2 {
            text-align: center;

            margin-bottom: 20px;
        }

        #uebermich .intro p {

            line-height: 1.8;
            text-align: left;
            /* margin-bottom: 20px; */
            margin: 0;

        }

        #uebermich .background-container h3 {
            text-align: left;
            margin-bottom: 20px;
            color: #19558b;
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
        }

        .card {
            flex: 1 1 calc(48% - 20px);
            /* Zwei Spalten mit Abstand */
            background: #b1d4ea;
            border: 1px solid #ddd;
            border-radius: 50px 0 50px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .card p {
            color: black;
            font-size: clamp(1rem, 2vw, 1.5rem);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .card .icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #3181cc;
        }

        .card ul {
            list-style: none;
            padding: 0;
            font-size: clamp(1rem, 2vw, 1.5rem);
        }

        .card ul li {
            margin-bottom: 5px;
            line-height: 1.5;
            color: #555;
        }

        /*
        .card ul li:before {
            content: "•";
            color: #3181cc;
            margin-right: 10px;
        }
  */



        h3 {
            font-size: clamp(1.0rem, 2vw, 1.5rem);
        }

        h4 {
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            font-weight: normal;
            text-align: left;
        }

        label {
            display: inline-block;
            width: 200px;
            /* Einheitliche Breite für alle Labels */
            vertical-align: top;
            /* Labels oben ausrichten */
            margin-top: 5px;
            /* Optional: kleiner Abstand für bessere Lesbarkeit */
        }

        input,
        textarea {
            width: calc(100% - 220px);
            /* Passt sich der verfügbaren Breite an */
            max-width: 500px;
            /* Optional: Begrenzung der maximalen Breite */
            padding: 5px;
            font-size: 1rem;
        }

        textarea {
            resize: vertical;
            /* Erlaubt dem Benutzer, die Höhe anzupassen */
        }

        #myform p {
            margin: 0;
        }


        .slideshow-container {
            width: 384px;
            height: 384px;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: start;
            align-items: center;
            border: 1px solid #ccc;
        }

        .slideshow-images {
            display: flex;
            position: relative;
            transition: transform 1s ease;
        }

        .slideshow-images img {
            width: 384px;
            height: 384px;
            flex-shrink: 0;
        }

        .image-overlay {
            opacity: 0;
            transition: opacity 0.5s ease;
            /* Sanfte Übergangszeit */
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            z-index: 9999;
            overflow: hidden;
        }

        .image-overlay.visible {
            opacity: 1;
            /* Sichtbar 
            display:flex; */
        }

        .image-overlay.hidden {
            opacity: 0;
            /* Unsichtbar */
        }


        .overlay-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: left;
            height: 100%;
            width: 100%;
        }

        .overlay-content img {
            max-height: 100%;
            /* max-width: 50%; */
            object-fit: contain;
            margin-right: 40px;
        }

        .overlay-text {
            color: #fff;
            text-align: left;
            max-width: 20%;
        }

        .overlay-text h2 {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .overlay-text p {
            /*font-size: 1.2rem; */
            font-size: clamp(0.8rem, 2vw, 1.0rem);
            margin-bottom: 20px;
            margin-right: 30px;
        }

        .overlay-text button {
            padding: 10px 20px;
            background: #3181cc;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            border-radius: 0px;
        }

        .overlay-text button:hover {
            background: #19558b;
        }


        .aktiv {
            border: 1px solid #b1d4ea;
        }


        .flex-container {
            display: flex;
            /* Flexbox aktivieren */
            align-items: flex-start;
            /* Text oben am Bild ausrichten */
            gap: 20px;
            /* Abstand zwischen Bild und Text */
        }
        /*
        .meilensteine {
             justify-content: space-between; 
        }
             */

             .meilensteine {
                cursor:pointer;
             }


        .column {
            /*flex: 1;  Jede Spalte nimmt gleich viel Platz ein */
            flex: 0 0 30%; /* Jede Spalte nimmt 30% der Breite ein */
        }
        .fotografie {
            flex:1; /* Jede Spalte nimmt 30% der Breite ein */
        }
        .column ul {
            margin: 0;
            padding: 0;
            list-style-type: none; /* Entfernt Standard-Punkte bei Listen */
        }
        .column ul li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        .column ul li img {
            width: 50px; /* Bildgröße anpassen */
            height: 50px;
            object-fit: cover; /* Bild an Rahmen anpassen */
            border-radius: 5px; /* Abgerundete Ecken */
            border: 1px solid #ddd; /* Rahmen um das Bild */
        }




        .content-container {
            display: flex;
            flex-direction: column;
            /* Stapelt <p> und <ul> vertikal */
            width: 50%;
            padding-left: 20px;
        }



        .prozent50 {
            width: 50%;
            /* Bild nimmt 50% der Breite des Containers ein */
            height: auto;
            /* Seitenverhältnis beibehalten */
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
            border-top: 1px solid #b1d4ea;
            border-left: 1px solid #b1d4ea;
        }

        .prozent30 {
            width: 30%;
            /* Bild nimmt 50% der Breite des Containers ein */
            height: auto;
            /* Seitenverhältnis beibehalten */
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
            border-top: 1px solid #b1d4ea;
            border-left: 1px solid #b1d4ea;
        }

        .flex-container p {
            margin: 0;
            /* Entferne Standardabstände */
            flex: 1;
            /* Optional: Text füllt den restlichen Platz aus */
        }

        .underline {
            text-decoration: underline;
            font-weight: bold;
        }





        .accordion {
            margin: 20px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .accordion-item {
            border-bottom: 1px solid #ccc;
        }

        .accordion-header {
            width: 100%;
            text-align: left;
            padding: 15px;
            font-size: 1.2rem;
            font-weight: bold;
            background-color: #7fcffd;
            border: none;
            outline: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .accordion-header:hover {
            background-color: #5db8fa;
        }

        .accordion-content {
            display: none;
            padding: 15px;
            background-color: #19558b;
            font-size: 1rem;
            line-height: 1.5;
        }

        .accordion-content.active {
            display: block;
        }


        .previous {
            padding: 0px 0 5px 0;
        }


        iframe {
        width:100%; 
        height:100vh; 
        border:none;
        padding-left:20px;
        }


        /* Responsive Design */
        @media (max-width: 768px) {

            header h1,
            .logo h1 {
                font-size: clamp(1.4rem, 6vw, 3rem);
                margin-left: 10px;
            }

            header p {
                font-size: 1rem;
            }

            .highlight {
                max-width: 100%;
            }

            header .logo {
                padding: 0px 0px 0 0;
                height: 70px;
            }

            /* 
            #slideshow img {
                width: 250%; 
            }
*/

            .cta a {
                margin-right: 3px;
                width: auto;
                padding: 0 5px 0 3px;
                font-size: clamp(0.8rem, 2vw, 1.5rem);
            }

            #menue:first-child {
                padding-left: 20px;
            }


            .scroll-button {
                width: 25px;
                padding: 5px;
            }

            .previous {
                padding: 3px 0 5px 0;
            }


            section {
                padding: 40px 20px;
            }

            .card-container {
                flex-direction: column;
            }

            .card {
                flex: 1 1 100%;
            }

            #menue {
                text-align: left;
            }

            .overlay-content {
                flex-direction: column;
                /* Inhalt untereinander anordnen */
            }

            .overlay-content img {
                max-width: 100%;
                height: auto;
            }

            .overlay-text {
                max-width: 100%;
                padding: 10px;
                overflow: scroll;
            }

            .overlay-text p {
                font-size: 1em;
                margin-bottom: 20px;
            }

            .overlay-content img {
                margin-right: 0px;
            }

            section h2 {
                font-size: clamp(1.8rem, 4vw, 2.5rem);
                text-align: center;
                color: #7fcffd;
                margin-bottom: 20px;
            }

            .intro h2 {
                margin-top: 0;
            }

            #schulungamprojekt {
                margin-top: 20px;
            }

            #menue .breit {
                width: auto;
            }

        }


        /* Stile für kleine Bildschirme */
        @media (max-width: 480px) {
            ul {
                padding-left: 20px;
                /* Reduziertes Padding für kleine Bildschirme */
            }


            li {
                padding-left: 0;
                /* Entfernt zusätzliches Padding */
                text-indent: 0px;
                /* Li-Punkte werden bündig ausgerichtet */
            }

            .overlay-content img {
                object-fit: cover;
                /* Füllt den Container */
                object-position: center;
                /* Zeigt den mittigen Ausschnitt */
                max-height: 384px;
                /* Begrenze die maximale Höhe für einen besseren Ausschnitt */
            }

            section h2 {
                font-size: 1.3em;
                /* clamp(1.8rem, 4vw, 2.5rem);  */
            }

            #schulungamprojekt {
                margin-top: 30px;
            }

            .highlight {
                margin: 10px 0;
            }

            #menue {
                padding: 7px;
            }

            .card .icon {
                margin-bottom: 1px;
            }

            .prozent50,
            .prozent30 {
                width: 100%;
            }

            .two-columns {
                font-size: clamp(1rem, 2vw, 1.5rem);
                line-height: 1.6;
                text-align: left;
                margin-bottom: 10px;
                column-count: 1;
                /* Anzahl der Spalten */
                column-gap: 75px;
                /* Abstand zwischen den Spalten */
            }

            .one-column {
                font-size: clamp(1rem, 2vw, 1.5rem);
                line-height: 1.6;
                text-align: left;
                margin-bottom: 10px;
                width: 100%;
                /* Breite der Spalte auf 50% setzen */
                margin: 0;
                /* Zentriert den Inhalt */
                display: block;
                /* Sicherstellen, dass es wie ein Block-Element behandelt wird */
            }


            .flex-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center; /* Zentriere die Inhalte */
                gap: 10px; /* Abstand zwischen den Bildern */
            }
        
            .column {
                flex:inherit;
            }
            .column ul li {
                flex-direction: column; /* Bilder und Texte untereinander */
                text-align: left; /* Text zentrieren */
                align-items: normal;
            }
        
            .column ul li img {
                width: 70px; /* Bildgröße erhöhen für mobile Geräte */
                height: 70px;
            }
        
            .column ul li img + span {
                display: none; /* Texte ausblenden */
            }

            .fotografie ul li{
                text-align:left;
                flex-direction:column;
            }

            
            #inhalt section:last-of-type {
                padding: 0;
              }
              iframe {
                padding-left:0px;
                padding-right:20px;
              }
        }