@charset "UTF-8";
/* CSS Document */
@font-face {
    font-display: swap;
    font-family: Exo;
    src: url("../fonts/Exo-VariableFont_wght.ttf") format('truetype');
}
@font-face {
    font-display: swap;
    font-family: ExoItalic;
    src: url("../fonts/Exo-Italic-VariableFont_wght.ttf") format('truetype');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}



/* mobil ------------------------------------*/
@media screen and (max-width:768px) {
    html {
        font: 0.9rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'80;
        scroll-behavior: smooth;
    }
    h1, h2 {
        font: 1.2rem Exo;
        font-variation-settings: 'wght'600, 'wdth'60;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
    }
    h3 {
        font: 1rem Exo;
        font-variation-settings: 'wght'600, 'wdth'60;
        text-transform: uppercase;
    }

    h4 {
        font: 0.9rem Exo;
        font-variation-settings: 'wght'500, 'wdth'60;
        text-transform: uppercase;
        margin-top: 1rem;
        margin-bottom: 0.2rem;
    }
    body {
        background: #001024;

    }

    strong {
        font: 0.9rem Exo;
        font-variation-settings: 'wght'400, 'wdth'60;
        text-transform: uppercase;
    }
    section {
        margin-bottom: 200px;
        scroll-margin-top: 19vh;
    }


    main {
        position: relative;
    }
    a[href^="mailto:"] {
        color: inherit; /* Vererbt die Textfarbe des umgebenden Elements */
        text-decoration: none; /* Entfernt die Unterstreichung */
    }

/*  Kontaktformular */
    form p {
        margin: 1.0rem auto;
    }
    label {
        width: 80px;
        display: inline-block;
        vertical-align: bottom;
    }
    input, textarea {
        width: 320px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.60);
        outline: none;
        font: 0.9rem Exo;
        color: #fff;
        padding: 0.3rem;
        transition: 0.2s;
    }
    input:hover {
        box-shadow: 0 -2px 8px 2px rgba(255, 255, 255, 0.20);
    }
    textarea:hover {
        box-shadow: 0 -2px 8px 2px rgba(255, 255, 255, 0.20);
    }
    input[type="checkbox"], input[type="radio"] {
        width: auto;
        accent-color: #001024;
    }
    input:focus, textarea:focus {
        background: rgba(0, 0, 12, 0.1);
    }
    input[type="submit"] {
        border: 1px solid rgba(255, 255, 255, 0.6);
        width: 100px;
        margin: 1rem auto;
    }
    .senden-button {
        margin-top: 20px;
    }

    input[type="submit"]:hover {
        background: rgba(0, 0, 12, 0.5);
    }

    header {
        filter: drop-shadow(0px 0 6px #fff);
    }

.textbox  {
    max-width: 450px;
}

#danke {
    margin-top: 40px;
}

    #topheader {
        left: 0;
        right: 0;
        padding-right: 1rem;
        background: #001024;
        position: fixed;
        top: 0;
        border-bottom: 2px solid #fff;
        z-index: 700;
        height: 15vh;
       filter: dropShadow(0 0 8px rgba(255, 255, 255, 0.7));

    }

    #topheader img {
        position: absolute;
        top: 0;
        left: 0;
        height: 14vh;

    }
    
    /* navi -------------------------------*/
    #topnav {
        position: fixed; /* Fixiert die Navigation */
        top: 16vh;
        right: 0;
        overflow-y: auto; /* Ermöglicht vertikales Scrollen */
        overflow-x: hidden; /* Deaktiviert horizontales Scrollen */
        z-index: 900;
        background: #001024;
        width: clamp(200px, 60%, 300px); /* Dynamische Breite */
        transform: translateX(200%); /* Versteckt die Navigation zuerst */
        transition: transform 1s ease-in-out; /* Einfache Übergangsanimation */
        max-height: calc(100vh - 16vh); /* Höhe begrenzen, basierend auf dem Viewport */
    }

    #topnav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #topnav:target {
        transform: translateX(0); /* Öffnet die Navigation im Viewport */
    }

    #topnav a {
        color: #fff;
        font: 1rem Exo;
        text-transform: uppercase;
        text-decoration: none;
        margin-left: 3rem;
        line-height: 2.5rem;
        display: block;
        transition: 0.5s;
    }



    #topnav a:hover, #topnav .akt:hover {
        text-shadow: 0px 0px 15px #fff;
        filter: drop-shadow(0 0 15px #fff);  /* Effekte bei Hover */
    }

    #topnav ul ul li{
        padding-left: 2.4rem;

    }
    
    /* navi-burger -----------------------------*/
    .burger {
        position: fixed;
        right: 26px;
        top: 26px;
        z-index: 950;
        width: 48px;
        height: 48px;
        background: #001024;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 1.0rem;
    }
    .burger[href="#close"] {
        display: none;
        background: transparent;
    }
    #topnav:target ~ .burger[href="#close"] {
        display: block;
    }
    .line {
        position: absolute;
        left: 20%;
        width: 60%;
        height: 2px;
        background: #fff;
        transition: 0.5s;
    }
    .line:nth-of-type(1) {
        top: calc(35% - 1px);
    }
    .line:nth-of-type(2) {
        top: calc(50% - 1px);
    }
    .line:nth-of-type(3) {
        top: calc(65% - 1px);
    }
    #topnav:target ~ .burger .line:nth-of-type(1) {
        transform: rotate(45deg);
        top: calc(50% - 1px);
    }
    #topnav:target ~ .burger .line:nth-of-type(2) {
        transform: rotate(135deg);
    }
    #topnav:target ~ .burger .line:nth-of-type(3) {
        transform: rotate(-45deg);
        top: calc(50% - 1px);
    }







    /* slider für bürozeiten*/
    #slidingDiv-buero {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 200px;
        background-color: #001024;
        color: #fff;
        font: 0.9rem Exo;
        text-align: center;
        box-shadow: 0 0 10px #fff;
        padding: 20px;
        z-index: 500;
        transition: bottom 1s ease-in-out;
    }

    #slidingDiv-buero p {
        text-align: center;
        padding-top: 20px;
    }

    #slidingDiv-flug {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 200px;
        background-color: #001024;
        color: #fff;
        font: 0.9rem Exo;
        text-align: center;
        box-shadow: 0 0 10px #fff;
        padding: 20px;
        z-index: 501;
        transition: bottom 1s ease-in-out;
    }

    #slidingDiv-flug p {
        text-align: center;
        padding-top: 20px;
    }

    .hidden {
        bottom: -300px;
        visibility: hidden;
    }

    .visible {
        top: 70vh;
        overflow: hidden;
    }

    .close-button {
        position: absolute;
        top: 10px;
        text-align: center;
        font: 1rem Exo;
        z-index: 510;
        cursor: pointer;
    }





    /* wrapper --------*/


    #wrapper_layer_startseite {
        position: fixed;
        top: 0;
        z-index: 200;
        width: 100vw;
        height: 100vh;


    }

 #wrapper_layer_startseite section {
        display: flex;
        align-items: center;
        align-content: center;
    }


    #wrapper_layer {
        position: absolute;
        z-index: 60;
        width: 100vw;
        padding: 0 3.5%;
        top: 19vh;
        overflow: hidden;

    }

    .headline_start {
        position: absolute;
        top: 22vh;
        width: 100%;
        height: auto;
        z-index: 293;
    }

    .headline_start h1 {
        font: 2rem ExoItalic;
        font-variation-settings: 'wght'400, 'wdth'80;
        text-transform: none;
        color: #fff;
        text-align: center;
    }

    .startbild {
        position: absolute;
        top: 36vh;
        width: 100vw;
        height: auto;
        z-index: 292;
    }

    .unten_start {
        position: absolute;
        width: 100vw;/* Ermöglicht die Positionierung relativ zum übergeordneten Element */
        bottom: 18vh; /* Unten */
        z-index: 291;
    }


    .unten_start h2 {
        font: 2.0rem ExoItalic;
        font-variation-settings: 'wght'400, 'wdth'80;
        text-transform: none;
        color: #fff;
        text-align: center;
    }

    /* wrapper --------*/

    #wrapper section {
        margin-bottom: 200px;
    }

    #galerie_a320, #galerie_agusta, #galerie_baron {
        margin-bottom: 200px;
    }

    #galerie_a320 h3, #galerie_agusta h3, #galerie_baron h3 {
        font: 1rem Exo;
        font-variation-settings: 'wght'600, 'wdth'60;
        text-transform: uppercase;
        color: #fff;
        text-align: center;
    }


    /* Klassen ----------*/
    .sec {
        display: grid;
        grid-template-columns: 10fr 3fr;
        grid-template-rows: 4fr;
        grid-template-areas: "s-text ill"
            "s-text s-gap"
            "s-bild s-bild"
            "s-bild s-bild";
        justify-self: center;
        align-self: center;
        margin-bottom: 200px;
    }
    
    /* grid-items-Zuordnung -----------*/
    .gtext {
        grid-area: s-text;
        padding-right: 1rem;
        text-decoration: none;
    }
    .gbild {
        grid-area: s-bild;
        /*transform: translateY(-5px);*/
        width: 100%;         /* Nimmt 100% der verfügbaren Breite des Elterncontainers ein */
        margin: 0;           /* Entfernt äußere Abstände, falls vorhanden */
        padding-top: 20px;
    }

    .gbild img {
        display: block;      /* Entfernt mögliche Lücken um das Bild herum */
        width: 100%;         /* Stellt sicher, dass das Bild die volle Breite des Containers einnimmt */
        height: auto;        /* Beibehaltung des Seitenverhältnisses, um Verzerrungen zu vermeiden */
        max-width: 100%;     /* Verhindert, dass das Bild größer als der Container wird */
    }

    .illu {
        grid-area: ill;
    }
    .ggap {
        grid-area: s-gap;
    }
    .sec > div {
        color: #fff;
    }
/* .gbild {
        margin-right: 10px;
        min-width: 96vw;
    }*/

    .sec p {
        line-height: 1.4rem;
        margin-bottom: 2rem;
    }

    section h2 {
        color: #fff;
        font-variation-settings: 'wght'400, 'wdth'100;
        text-align: left;
    }
    section h3 {
        color: #fff;
        font-variation-settings: 'wght'400, 'wdth'100;
        text-align: center;
    }
    section p {
        line-height: 1.4rem;

        color: #fff;
    }

    .gbild iframe {
        width: 93vw;
    }

.gtext ul li{
    font: 0.9rem ExoItalic;
    font-variation-settings: 'wght'200, 'wdth'60;
    color: #fff;
    line-height: 1.4rem;
    text-decoration: none;
    text-align: left;
}



    /* buchungen -----------------------------*/

    .buchung-container div {
        width: 100%;
        height: auto;

    }



.buchung-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

    /* Grundstil für den Button */
    #selector-button1, #selector-button3 {


        position: relative; /* Wichtig für die Positionierung der Pseudoelemente */
        /* Platz für den Inhalt */
        background: none;
        border: 1px solid #fff;
        width: 70vw;
        height: 60px;
        padding: 2%;
        margin-top: 40px;
        text-align: left;
        white-space: nowrap;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    #selector-button1 h3,
    #selector-button3 h3 {
        margin-right: 20px;
        text-align: left;
    }

    /* Das figure-Element initial verstecken */
    #selector-button1 div,
    #selector-button3 div
    {
        opacity: 0;
        max-height: 0;
        transition: max-height 1s ease, opacity 1s ease;

    }

    /* Wenn die Klasse .klick vorhanden ist, zeige das figure-Element */
    #selector-button1.klick div {
        opacity: 1;
        min-height: 800px; /* genug groß, um den Inhalt anzuzeigen */
        margin-top: 30px;
    }


    #selector-button3.klick div {
        opacity: 1;
        min-height: 3000px; /* genug groß, um den Inhalt anzuzeigen */
        margin-top: 10px;
    }

    #selector-button1.klick,
    #selector-button3.klick
    {

        width: 93vw;
        height: auto;
        padding: 2%;
        text-align: left;

        overflow: hidden;
        background: #001024;

    }
    /* Optional: Styling für das figure-Element */
    #selector-button1 div,
    #selector-button3 div
    {
        width: 90vw;
        height: 100%;
        background: #001024;
        padding-top: 30px;
    }



    span a {
        display: block;
        width: 210px;
        height: auto;
        border: 1px solid #fff;
        padding: 10px;
        text-decoration: none;
        color: #fff;
    }
    .superspalter_auflistung {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }
    #art13, #art14 {
        margin-bottom: 10px;
    }

    .auflistung {
        flex-basis: 60%;
        height: auto;
        font: 0.9rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        color: #fff;
        line-height: 1.4rem;
        text-decoration: none;
        text-align: left;
    }



    .auflistung a {
        font: 0.9rem ExoItalic;
        line-height: 1.4rem;
        font-variation-settings: 'wght'200, 'wdth'60;
        text-decoration: none;
        color: #fff;
    }

    .beschreibung {
        text-align: left;
        display: block;

        font: 0.9rem ExoItalic;
        line-height: 1.4rem;
        font-variation-settings: 'wght'200, 'wdth'60;
        color: #fff;
        width: 60vw;
        text-decoration: none;
    }
    .beschreibung p, .beschreibung ul{
        font: 0.9rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 1.4rem;
        text-decoration: none;
    }

    section ul {
        list-style-type: none;
        font: 0.9rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 1.4rem;
        color: #fff;
        text-decoration: none;
    }
    .abstand_400 {
        margin-bottom: 80px;
    }
    .abstand_200 {
        margin-bottom: 30px;
    }
    .abstand_600 {
        margin-bottom: 140px;
    }

    .tabelle h3 {
        display: block;
        font: 0.9rem ExoItalic;
        line-height: 1.8rem;
        font-variation-settings: 'wght'200, 'wdth'50;
        padding: 8px 0 8px 0;
        border: 1px solid #fff;
        width: 300px;
        height: auto;
        margin: 1rem 0 1rem 0;
    }

    .tabelle {
        text-decoration: none;
        color: inherit;
    }
    .tabelle table {
        width: 300px;
        height: auto;
        color: #fff;
        border-collapse: collapse;

    }
    table td {
        font: 0.7rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 3.4rem;
        white-space: nowrap;
    }

    .tabelle div{
        width: 300px;
        font: 0.6rem Exo;
        font-variation-settings: 'wght'200, 'wdth'60;
        margin-top: 0.3rem;
        text-align: right;
        white-space: nowrap;
    }

    .rechts {
        text-align: right;
    }
    .linie-unten td {
        position: relative; /* Damit das ::after-Element relativ zur Zeile positioniert werden kann */
        line-height: 2rem;
    }

    .linie-unten td::after {
        content: ""; /* Erforderlich, um das Pseudoelement anzuzeigen */
        display: block; /* Damit die Linie als Blockelement angezeigt wird */
        width: 100%; /* Die Linie soll die gesamte Breite der Zeile einnehmen */
        height: 1px; /* Höhe der Linie */
        background: #fff; /* Farbe der Linie */
        position: absolute; /* Absolut positioniert, um unter der Zeile zu erscheinen */
        bottom: 0; /* Am unteren Ende der Zeile */
        left: 0; /* Links ausgerichtet */
    }

    .BU {
        font: 0.5rem Exo;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 1.2rem;
        text-align: right;
        white-space: nowrap;
    }

    .keine-linie-unten tr::after {
        content: ""; /* Erforderlich, um das Pseudoelement anzuzeigen */
        display: block; /* Damit die Linie als Blockelement angezeigt wird */
        width: 100%; /* Die Linie soll die gesamte Breite der Zeile einnehmen */
        height: 0px; /* Höhe der Linie */
        background: #fff; /* Farbe der Linie */
        position: absolute; /* Absolut positioniert, um unter der Zeile zu erscheinen */
        bottom: 0; /* Am unteren Ende der Zeile */
        left: 0; /* Links ausgerichtet */
    }


    .superspalter {
        display: flex;
        height: 100%;
        justify-content: space-around;
    }
    .superspalter > * {
        align-self: flex-end;
        padding-bottom: 1rem;
    }
    .textbox {
        width: 550px;
        font-size: 0.8rem;
        margin: 1rem 0 1rem;
    }

    /* slanted --------*/
    .wrapper {
        --_gap: .5rem;
        --_offset: 10%;
        --_offset-1: calc(var(--_offset) * 1);
        --_offset-2: calc(var(--_offset) * 2);
        --_offset-3: calc(var(--_offset) * 3);
        --_offset-7: calc(var(--_offset) * 7);
        --_offset-8: calc(var(--_offset) * 8);
        --_offset-9: calc(var(--_offset) * 9);

        width: calc(100% - 4rem);
        max-width: 100vw;
        margin: 2rem auto;
        color: white;
        /*  font-family: system-ui;*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 var(--_gap);
        pointer-events: none;
        transform-style: preserve-3d;
    }

    .wrapper > div {
        position: relative;
        pointer-events: auto;
        aspect-ratio: 1;
        transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
        clip-path: polygon(var(--_clip-path));
        transform: translate3d(0, 0, 0);
    }

    .wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wrapper > div:nth-child(n+4) {
        margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
    }

    /* define clip-path custom properties */
    .wrapper > div:nth-child(1) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;
    }

    .wrapper > div:nth-child(2) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);
    }

    .wrapper > div:nth-child(3) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);
    }

    .wrapper > div:nth-child(4) {
        --_clip-path: 0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7);
    }

    .wrapper > div:nth-child(5) {
        --_clip-path: 0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8);
    }

    .wrapper > div:nth-child(6) {
        --_clip-path: 0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);
    }

    .wrapper > div:nth-child(7) {
        --_clip-path: 0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;
    }

    .wrapper > div:nth-child(8) {
        --_clip-path: 0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;
    }

    .wrapper > div:nth-child(9) {
        --_clip-path: 0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;
    }


    .wrapper > div:hover {
        transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
        scale: 1.3;
        --_clip-path: 0 0, 100% 0, 100% 100%, 0 100%;
        z-index: 180;
        opacity: 1;
    }

    .wrapper:has(:hover) > div:not(:hover) {
        filter: grayscale(1) blur(3px);
        opacity: .5;
        scale: 0.9;
    }

    .wrapper > div:not(:hover) {
        /*animation: zIndexHack 1000ms;*/

    }

    @keyframes zIndexHack {
        0%, 100% {
            z-index: 180;
        }
    }

    /* general styling */
    :root {
        --clr-bg: #233e6d;
        --clr-txt: #F5F5F5;
        --clr-primary: #233e6d;
        --clr-secondary: #233e6d;
        --clr-button: #0369A1;
    }

   /* html {
        background-color: var(--clr-bg);
    }*/

    /*  font-family: system-ui;*/
    color: var(--clr-txt);



    body::after {
        content: '';
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: 32px;
        height: 32px;
        background-size: cover;
        background-image: url('data:image/svg+xml,<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1"><g id="surface1"><path fill="rgb(175, 208, 84)" d="M 47.894531 0.789062 C 46.320312 0.878906 45.480469 0.949219 44.601562 1.042969 C 37.023438 1.863281 29.746094 4.394531 23.386719 8.414062 C 20.214844 10.421875 17.402344 12.65625 14.757812 15.285156 C 7.773438 22.222656 3.027344 30.992188 1.113281 40.5 C -0.460938 48.332031 -0.132812 56.378906 2.070312 64.003906 C 4.0625 70.890625 7.507812 77.195312 12.277344 82.675781 C 16.65625 87.714844 22.109375 91.898438 28.074219 94.804688 C 37.914062 99.59375 49.078125 101.03125 59.875 98.886719 C 69.480469 96.976562 78.265625 92.300781 85.253906 85.371094 C 92.304688 78.386719 97.027344 69.65625 98.960938 60.039062 C 99.636719 56.675781 99.902344 53.996094 99.902344 50.285156 C 99.902344 47.910156 99.855469 46.925781 99.660156 45.128906 C 98.671875 35.808594 95.136719 27.136719 89.324219 19.773438 C 86.917969 16.722656 83.851562 13.675781 80.777344 11.285156 C 75.664062 7.304688 69.949219 4.410156 63.695312 2.628906 C 60.5625 1.742188 57.058594 1.128906 53.609375 0.867188 C 52.796875 0.804688 48.566406 0.746094 47.894531 0.789062 Z M 54.105469 24.300781 C 54.105469 24.355469 53.550781 25.921875 52.875 27.773438 L 51.636719 31.148438 L 41.390625 31.148438 C 34.375 31.148438 31 31.167969 30.683594 31.210938 C 27.867188 31.601562 25.414062 33.695312 24.371094 36.621094 C 24.054688 37.503906 23.910156 38.265625 23.839844 39.371094 C 23.800781 40.046875 23.789062 43.769531 23.804688 50.574219 C 23.828125 61.464844 23.816406 60.867188 24.101562 62.066406 C 24.316406 62.976562 24.832031 64.132812 25.339844 64.875 C 26.515625 66.597656 28.074219 67.726562 29.9375 68.203125 C 30.679688 68.394531 31.542969 68.433594 34.851562 68.433594 C 37.878906 68.433594 37.960938 68.441406 37.925781 68.542969 C 37.90625 68.601562 37.34375 70.148438 36.671875 71.972656 L 35.460938 75.296875 L 32.726562 75.296875 C 30.136719 75.296875 29.960938 75.285156 29.269531 75.164062 C 26.808594 74.714844 24.59375 73.707031 22.644531 72.152344 C 22.015625 71.648438 20.859375 70.496094 20.335938 69.847656 C 18.960938 68.15625 17.824219 65.824219 17.285156 63.601562 C 16.824219 61.660156 16.835938 62.175781 16.859375 49.355469 C 16.882812 36.71875 16.847656 37.765625 17.292969 35.953125 C 17.882812 33.523438 18.941406 31.398438 20.515625 29.5 C 21.140625 28.746094 21.625 28.257812 22.417969 27.597656 C 24.695312 25.699219 27.460938 24.53125 30.316406 24.265625 C 30.589844 24.234375 36.054688 24.210938 42.460938 24.207031 C 53.515625 24.199219 54.105469 24.207031 54.105469 24.300781 Z M 66.320312 24.363281 C 69.789062 24.90625 72.703125 26.371094 75.039062 28.757812 C 76.65625 30.402344 77.730469 32.21875 78.382812 34.417969 C 78.683594 35.445312 78.824219 36.347656 78.867188 37.523438 C 78.964844 40.515625 78.066406 43.320312 76.21875 45.777344 C 75.949219 46.136719 75.707031 46.445312 75.675781 46.460938 C 75.558594 46.539062 75.636719 46.605469 76.246094 47 C 80.933594 50.003906 83.621094 55.320312 83.308594 60.960938 C 83.027344 65.992188 80.328125 70.570312 76.113281 73.175781 C 74.453125 74.199219 72.570312 74.894531 70.546875 75.21875 L 69.757812 75.347656 L 56.425781 75.363281 L 43.085938 75.386719 L 43.273438 74.878906 C 43.371094 74.601562 43.949219 73.027344 44.546875 71.386719 L 45.640625 68.40625 L 57.613281 68.375 L 69.582031 68.347656 L 70.167969 68.191406 C 72.121094 67.652344 73.628906 66.617188 74.753906 65.019531 C 75.40625 64.097656 75.960938 62.777344 76.175781 61.632812 C 76.328125 60.832031 76.328125 59.308594 76.175781 58.503906 C 75.867188 56.859375 75.085938 55.316406 73.960938 54.152344 C 72.835938 52.976562 71.722656 52.308594 70.191406 51.894531 L 69.582031 51.730469 L 52.117188 51.703125 L 34.65625 51.671875 L 35.691406 48.835938 C 36.265625 47.273438 36.835938 45.703125 36.96875 45.351562 L 37.207031 44.695312 L 51.269531 44.679688 L 65.328125 44.667969 L 65.941406 44.511719 C 68.972656 43.753906 71.089844 41.820312 71.71875 39.214844 C 71.890625 38.496094 71.898438 37.390625 71.722656 36.699219 C 71.019531 33.839844 68.550781 31.78125 65.21875 31.253906 C 64.984375 31.21875 63.597656 31.171875 62.058594 31.15625 L 59.3125 31.121094 L 60.523438 27.789062 C 61.195312 25.960938 61.769531 24.398438 61.800781 24.324219 L 61.863281 24.183594 L 63.710938 24.21875 C 65.164062 24.242188 65.722656 24.269531 66.320312 24.363281 Z M 66.320312 24.363281 "/></g></svg>');
    }


    code {
        color: var(--clr-secondary);
        border: 1px solid rgba(from var(--clr-secondary) r g b / .25);
        padding-inline: .25rem;
        border-radius: 5px;
    }

    /* Animiertes Fullscreen-Overlay */
    .fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0);
        z-index: 9999;
        cursor: pointer;
        opacity: 0;
        transition: background-color 0.5s ease, opacity 0.5s ease; /* Smooth Übergang: Hintergrund */
    }

    .fullscreen-overlay.visible {
        background-color: rgba(0, 9, 21, 0.85);
        opacity: 1;
    }

    .fullscreen-overlay img {
        max-width: 70%;
        max-height: 70%;
        transform: scale(0.8);
        transition: transform 0.5s ease; /* Smooth Zoom-In/Out vom Bild */
        object-fit: contain;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    }

    .fullscreen-overlay img.visible {
        transform: scale(1); /* Smooth Vergrößerung */
    }

    /* Verhindere Scrollen, wenn der Vollbildmodus aktiv ist */
    body.no-scroll {
        overflow: hidden;
    }


    /* overlay --------------*/
    .overlay {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay_ds {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }
    .overlay_agb {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay-content h2 {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }

    .overlay-content h3 {
        font-size: 1rem;
        margin-top: 3rem;
        margin-bottom: 0.5rem;
    }

    .overlay-content h4 {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 0.4rem;
    }

    .overlay-content h5 {
        font-size: 0.9rem;
        font-variation-settings: 'wght' 400, 'wdth' 60;
        text-transform: none;
        margin-bottom: 0.5rem;
    }

    .overlay-content strong {
        font-variation-settings: 'wght' 460, 'wdth' 60;
    }

    .overlay-content > p, ul {
        margin-bottom: 0.5rem;
    }

    .overlay-content {
        background-color: #001024;
        color: #fff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        padding: 2rem;
        border-radius: 3px;
        position: relative;

        width: 70%;
        max-height: 70%;
        overflow: auto;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 15px;
        font: 1.4rem Exo;
        font-size: 36px;
        z-index: 301;
        cursor: pointer;
    }

    .index-link {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }

    .index li {
        list-style: none;
    }

    .overlay-content > * li {
        list-style: none;
    }

    .textbox a[href] {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }

    .overlay-content a[href] {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }





   /* footer -----------*/
    footer {

    }

    #ende {
        position: fixed;
        bottom: 0;
        height: 12vh;
        width: 100%;
        z-index: 600;
        border-top: 1px solid #fff;
        text-align: left;
        background: #001024;
        color: #fff;
        filter: drop-shadow(0px 0 6px #fff);
    }



    /* animation footer ------*/





    /* Effekte bei Hover */
    #ende a:hover {
        text-shadow: 0 0 12px #fff;
        filter: drop-shadow(0px 0 12px #fff);
    }


    #footer-nav {
        position: absolute;
        width: 100vw;
        height: auto;
        bottom: 4vh;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        z-index: 604;

    }


    #footer-nav ul {
        list-style: none;
        margin: 0;
        padding: 2%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        z-index: 610;
    }
    #footer-nav ul p {
        font: 0.9rem Exo;
        font-variation-settings: 'wght' 400, 'wdth' 80;
    }

    #footer-nav > li {
        position: relative;
        display: flex;

    }

    #footer-nav a {
        color: #fff;
        font: 0.9rem Exo;
        font-variation-settings: 'wght' 400, 'wdth' 80;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left;
        padding: 6px;
        transform: translateY(0rem);
        line-height: 2.5rem;
        display: block;
        transition: 0.2s ease;
    }

#footer-nav ul ul a {
    display: block;
}
    #footer-nav ul ul p {
        padding: 15px 0;
    }

    #footer-nav ul ul {
        display: flex;
        position: absolute;
        bottom: 7vh;
        left: 0;
        font: 0.9rem Exo;
        font-variation-settings: 'wght' 400, 'wdth' 80;
        list-style: none;
        width: 100%;
        height: 8vh;
        background: #001024;
        opacity: 1;
        visibility: hidden;
        transition: 0.2s ease;
        justify-content: center;
        align-items: flex-start;
        z-index: 620;
        filter: drop-shadow(0px 0 2px #fff);

    }

    #footer-nav ul li:hover ul {
        opacity: 1;
        visibility: visible;

    }

    #footer-nav ul ul li a::before {
        visibility: hidden;
    }
.footer-spalter {
    display: flex;
    justify-content: center;
    gap: 40px;
}

    .footer-spalter .social a {
        position: absolute;
        width: 30vw;
        height: 4vh;
        bottom: 1vh;
        color: #fff;
        text-decoration: none;
        z-index: 625;


    }
    #ende .social div a {
        display: block;
        width: 4rem;
        height: 6rem;


    }
    #ende svg:hover {
        filter: dropShadow(0 0 12px #fff);
    }
#ende img {
    visibility: hidden;
}
}








/* tablet ------------------------------------*/

@media screen and (min-width:769px) and (max-width:1400px) {
    html {
        font: 1rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'80;
        scroll-behavior: smooth;
    }
    h1, h2 {
        font: 1.2rem Exo;
        font-variation-settings: 'wght'600, 'wdth'60;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: #fff;
    }
    h3 {
        font: 1rem Exo;
        font-variation-settings: 'wght'600, 'wdth'60;
        text-transform: uppercase;
        color: #fff;
    }

    h4 {
        font: 1rem Exo;
        font-variation-settings: 'wght'500, 'wdth'60;
        text-transform: uppercase;
        margin-top: 1rem;
        margin-bottom: 0.2rem;
        color: #fff;
    }
    body {
        color: #233e6d;
        min-height: 100vh;
    }

    strong {
        font: 1rem Exo;
        font-variation-settings: 'wght'400, 'wdth'60;
        text-transform: uppercase;
    }
    section {
        margin-bottom: 60px;
        scroll-margin-top:20vh;
    }

    a[href^="mailto:"] {
        color: inherit; /* Vererbt die Textfarbe des umgebenden Elements */
        text-decoration: none; /* Entfernt die Unterstreichung */
    }

/* Kontaktformular*/

    #danke p {
        width: 350px;
        margin-bottom: 1rem;
    }

    form p {
        margin: 0.2rem auto;
    }
    label {
        width: 80px;

        display: inline-block;
        vertical-align: bottom;
    }
    input, textarea {
        width: 260px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.60);
        outline: none;
        font: 0.9rem Exo;
        color: #fff;
        padding: 0.4rem;
        transition: 0.2s;
    }
    input:hover {
        box-shadow: 0 -2px 8px 2px rgba(255, 255, 255, 0.20);
    }
    textarea:hover {
        box-shadow: 0 -2px 8px 2px rgba(255, 255, 255, 0.20);
    }
    input[type="checkbox"], input[type="radio"] {
        width: auto;
        accent-color: #001024;
    }
    input:focus, textarea:focus {
        background: rgba(0, 0, 12, 0.1);
    }
    input[type="submit"] {
        border: 1px solid rgba(255, 255, 255, 0.6);
        width: 80px;
        margin: 0.5rem auto;
    }
    .senden-button {
        margin-top: 80px;
    }
    input[type="submit"]:hover {
        background: rgba(0, 0, 12, 0.5);
    }


    /* header */

    #topheader {
        position: fixed;
        top: -6px;
        left: 0;
        right: 0;
        height: 16vh; /* Höhe des Headers */
        background: #001024;
        z-index: 1000;
        filter: drop-shadow(0 0 6px #fff);

        border-bottom: 2px solid #fff;
        display: flex;
        align-items: center; /* Vertikal zentrieren */
        justify-content: center; /* Platz für flexiblen Inhalt */
    }

    /* Flex-Container innerhalb des Headers */
    .header-container {
        display: flex;
        justify-content: center; /* Platz zwischen Logo und Navigation */
        align-items: center; /* Vertikale Ausrichtung */
        width: 100%; /* Nimmt die gesamte verfügbare Breite ein */
        padding: 0 0; /* Etwas Innenabstand rechts und links */

    }

    /* Einstellungen für das Logo */
    #topheader img {
        flex: 0 0 auto; /* Bild liegt fix links */
        height: 16vh; /* Dynamische Höhe für Bild */
        margin-bottom: 0.2rem;
        transform: translate(-1rem,-0.8rem);
    }

    #topheader img:hover {
        text-shadow: 0px 0px 15px #fff;
        filter: drop-shadow(0 0 15px #fff);
    }


    /* navi ---------*/
    #topnav {
        flex: 1; /* Navigation nimmt den restlichen Platz ein */
        display: flex; /* Falls nötig, können Sie zusätzliche Flexbox-Einstellungen für die Links hier vornehmen */
        justify-content: flex-end; /* Navigation wird nach rechts verschoben */
        width: auto; /* Automatische Breite basierend auf Inhalt */

    }

    #topnav:target {
        transform: translateX(0);
    }

    #topnav a.active {
        text-shadow: 30px 0 20px rgba(255, 255, 255, 1.0);
        filter: drop-shadow(0 0 15px #fff);
    }

    #topnav ul {
        display: flex;
        white-space: nowrap;
        list-style: none;
        justify-content: start;
    }

    #topnav li {
        position: relative;
    }

    #topnav ul ul {
        position: absolute;
        top: 4.5vh;

        list-style: none;
        width: 100%;
        transform: translateX(-1.7rem) scale(0.8);
        opacity: 1;
        visibility: hidden;
        transition: 0.1s;
    }

    #topnav ul li:hover ul {
        opacity: 1;
        visibility: visible;
    }

    #topnav ul ul li a::before {
        visibility: hidden;
    }

    #topnav a {

        display: inline-block; /* Damit Padding funktioniert */
        padding: 10px 20px 5px 0; /* Abstand innerhalb des <a> */
        color: #fff;
        font: 0.9rem Exo;
        text-transform: uppercase;
        text-decoration: none;
        margin-right: 0.5rem;

    }

    /* animation ---*/
    #topnav a::before {
        content: "";
        position: absolute;
        top: -14.3rem;
        left: 0.3rem;
        display: block;
        background: #fff;
        width: 2px;
        height: 8rem;
        transform: scale(0);
        animation-name: ani_linie;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes ani_linie {
        from {
            transform: skewX(-32deg) translateX(6.4rem) scale(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg)  translateX(6.4rem)  scale(1) translateY(8rem);
        }
    }
    #topnav a:hover, #topnav .akt, #ende p:hover {
        text-shadow: 0px 0px 15px #fff;
        filter: drop-shadow(0 0 15px #fff);
    }

    #topnav .linie:hover a::before {
        background: #fff;
        animation-name: ani_linie6;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes ani_linie6 {
        from {
            transform: skewX(-32deg)  translateX(6.4rem)  scaleY(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg)  translateX(6.4rem)  scaleY(1.7) translateY(3.9rem);
        }
    }





    .fläche_body_hg_start {
        position: fixed;
        background-color:  #001024; /* dunkelblaue Fläche */
        height: 70vh; /* Höhe der Flächen */
        width: 100vw;
        z-index: 10;
        top: 18vh;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); /* Glow-Effekt */
        opacity: 100%;

    }



    /* slider für bürozeiten*/
    #slidingDiv-buero {
        position: absolute;
        width: 50%;
        left: 50%;
        transform: translateX(-50%);
        height: 300px;
        background-color: #001024;
        color: #fff;
        font: 1.1rem Exo;
        text-align: center;
        box-shadow: 0 0 10px #fff;
        padding: 20px;
        z-index: 500;
        transition: bottom 0.5s ease;
    }

    #slidingDiv-buero p {
        text-align: center;
        padding-top: 80px;
    }

    #slidingDiv-flug {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 300px;
        background-color: #001024;
        color: #fff;
        font: 1.1rem Exo;
        text-align: center;
        box-shadow: 0 0 10px #fff;
        padding: 20px;
        z-index: 501;
        transition: bottom 0.5s ease;
    }

    #slidingDiv-flug p {
        text-align: center;
        padding-top: 80px;
    }

    .hidden {
        bottom: -600px;
        visibility: hidden;
    }

    .visible {
        bottom: 0;
        overflow: hidden;
    }

    .close-button {
        position: absolute;
        top: 10px;
        text-align: center;
        font: 2rem Exo;
        z-index: 510;
        cursor: pointer;
    }



    /* wrapper --------*/


    #wrapper_layer_startseite {
        position: fixed;
        top: 22vh;
        z-index: 200;
        width: 100vw;
        height: 100vh;



    }
    #wrapper_layer {
        position: absolute;
        z-index: 50;
        max-width: 100vw;
        padding: 0 3.5%;
        top: 20vh;

    }

    #hg_wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        max-height: 100vh;
        margin-top: 1px;
        padding-top: 2%;
        background: url("../img/ast_hg_web.png") center fixed;
        background-repeat: no-repeat;
    }



    .headline_start {
        position: absolute;
        top: 0;
        left: 4vw;
        z-index: 293;
    }

    .headline_start h1 {
        font: 2.0rem ExoItalic;
        font-variation-settings: 'wght'400, 'wdth'80;
        text-transform: none;
        color: #fff;
    }

    .startbild {
        display: flex;
        justify-content: center;
        height: 67vh;
        z-index: 292;
    }

    .unten_start {
        position: absolute; /* Ermöglicht die Positionierung relativ zum übergeordneten Element */
        bottom: 37%; /* Unten */
        right: 4vw; /* Rechts */
        z-index: 291;
    }

    .startbild img {
        max-width: 80%; /* Bild anpassen, um nicht über den Container hinauszugehen */
        height: auto; /* Höhe automatisch anpassen */
        z-index: 290;
    }

    .unten_start h2 {
        font: 2.0rem ExoItalic;
        font-variation-settings: 'wght'400, 'wdth'80;
        text-transform: none;
        color: #fff;
    }

    /* Folgeseiten */



    .sec {
        display: grid;
        grid-template-columns: 15fr 1fr 3fr 15fr;
        grid-template-rows: 6fr;
        grid-template-areas: "text s-gap ill s-bild"
        "text s-gap ill s-bild"
        "text s-gap ill s-bild"
        "text s-gap ill s-bild";
        width: 90vw;

        z-index: 60;

    }


    /* grid-items-Zuordnung */
    .gtext {
        grid-area: text;
        padding-right: 2rem;
        text-decoration: none;
    }
    .gbild {
        grid-area: s-bild;
        /*transform: translateY(-5px);*/
        width: 100%;         /* Nimmt 100% der verfügbaren Breite des Elterncontainers ein */
        margin: 0;           /* Entfernt äußere Abstände, falls vorhanden */
        padding: 0;          /* Entfernt innere Abstände, falls vorhanden */
    }

    .gbild img {
        display: block;      /* Entfernt mögliche Lücken um das Bild herum */
        width: 100%;         /* Stellt sicher, dass das Bild die volle Breite des Containers einnimmt */
        height: auto;        /* Beibehaltung des Seitenverhältnisses, um Verzerrungen zu vermeiden */
        max-width: 100%;     /* Verhindert, dass das Bild größer als der Container wird */
    }

    .illu {
        grid-area: ill;
        margin-top: 30px;
    }
    .ggap {
        grid-area: s-gap;
    }
    .sec > div {
        color: #fff;
        padding-top: 20px;
    }

    .sec p {
        line-height: 1.2rem;
        margin-bottom: 4rem;
        color: #fff;
    }
    .sec > img {
        width: auto;
        height: auto;

    }

    .gtext p {
        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
    }
    .gtext a {
        text-decoration: none;
        color: inherit;
    }
    .gtext ul {
        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
    }

    section h2 {
        color: #fff;
        font-variation-settings: 'wght'400, 'wdth'100;
        text-align: left;
    }
    section h3 {
        color: #fff;
        font-variation-settings: 'wght'400, 'wdth'100;
        text-align: center;
    }
    section p {
        line-height: 1.2rem;

        color: #fff;
    }




    span a {
        display: block;
        width: 210px;
        height: auto;
        border: 1px solid #fff;
        padding: 10px;
        text-decoration: none;
        color: #fff;
    }
    .superspalter_auflistung {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }
    #art13, #art14 {
        margin-bottom: 10px;
    }

    .auflistung {
        flex-basis: 50%;
        height: auto;
        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        color: #fff;
        line-height: 1.2rem;
        text-decoration: none;
        text-align: left;
    }

.auflistung p, .auflistung ul {
    font: 0.8rem ExoItalic;
    font-variation-settings: 'wght'200, 'wdth'60;
    line-height: 1.2rem;
}


    .auflistung a {
        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        text-decoration: none;
        color: #fff;
    }
    .beschreibung {
        text-align: left;
        display: block;

        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        color: #fff;
        width: 60vw;
    }
    .beschreibung p, .beschreibung ul{
        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 1.2rem;
    }

    section ul {
        list-style-type: none;
        font: 0.8rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 1.2rem;
        color: #fff;
    }
    .abstand_400 {
        margin-bottom: 200px;
    }
    .abstand_200 {
        margin-bottom: 100px;
    }


    .tabelle h3 {
        display: block;
        font: 0.9rem ExoItalic;
        line-height: 1.8rem;
        font-variation-settings: 'wght'200, 'wdth'60;
        padding: 8px 0 8px 0;
        border: 1px solid #fff;
        width: 400px;
        height: auto;
        margin: 1rem 0 1rem 0;
    }

  .tabelle table {
        width: 400px;
        height: auto;
        color: #fff;
        border-collapse: collapse;

    }
    .tabelle div{
        width: 400px;
        font: 0.6rem Exo;
        font-variation-settings: 'wght'200, 'wdth'60;
        margin-top: 0.3rem;
        text-align: right;
        white-space: nowrap;
    }


    table td {
        font: 0.7rem ExoItalic;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 3.4rem;
        white-space: nowrap;
    }

    .rechts {
        text-align: right;
    }
    .linie-unten td {
        position: relative; /* Damit das ::after-Element relativ zur Zeile positioniert werden kann */
        line-height: 2rem;
    }

    .linie-unten td::after {
        content: ""; /* Erforderlich, um das Pseudoelement anzuzeigen */
        display: block; /* Damit die Linie als Blockelement angezeigt wird */
        width: 100%; /* Die Linie soll die gesamte Breite der Zeile einnehmen */
        height: 1px; /* Höhe der Linie */
        background: #fff; /* Farbe der Linie */
        position: absolute; /* Absolut positioniert, um unter der Zeile zu erscheinen */
        bottom: 0; /* Am unteren Ende der Zeile */
        left: 0; /* Links ausgerichtet */
    }

    .BU {
        font: 0.5rem Exo;
        font-variation-settings: 'wght'200, 'wdth'60;
        line-height: 1.2rem;
        text-align: right;
        white-space: nowrap;
    }

    .keine-linie-unten tr::after {
        content: ""; /* Erforderlich, um das Pseudoelement anzuzeigen */
        display: block; /* Damit die Linie als Blockelement angezeigt wird */
        width: 100%; /* Die Linie soll die gesamte Breite der Zeile einnehmen */
        height: 0px; /* Höhe der Linie */
        background: #fff; /* Farbe der Linie */
        position: absolute; /* Absolut positioniert, um unter der Zeile zu erscheinen */
        bottom: 0; /* Am unteren Ende der Zeile */
        left: 0; /* Links ausgerichtet */
    }


    #galerie_a320, #galerie_agusta, #galerie_baron {
        margin-bottom: 200px;
    }

    .superspalter {
        display: flex;
        height: 100%;
        justify-content: space-around;
    }

    .superspalter > * {
        align-self: flex-end;
        padding-bottom: 1rem;
    }

    .textbox {
        width: 550px;
        font-size: 0.8rem;
        margin: 1rem 0 1rem;
    }

    /* slanted --------*/
    .wrapper {
        --_gap: .5rem;
        --_offset: 10%;
        --_offset-1: calc(var(--_offset) * 1);
        --_offset-2: calc(var(--_offset) * 2);
        --_offset-3: calc(var(--_offset) * 3);
        --_offset-7: calc(var(--_offset) * 7);
        --_offset-8: calc(var(--_offset) * 8);
        --_offset-9: calc(var(--_offset) * 9);

        width: calc(100% - 4rem);
        max-width: 50vw;
        margin: 2rem auto;
        color: white;
        /*  font-family: system-ui;*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 var(--_gap);
        pointer-events: none;
        transform-style: preserve-3d;
    }

    .wrapper > div {
        position: relative;
        pointer-events: auto;
        aspect-ratio: 1;
        transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
        clip-path: polygon(var(--_clip-path));
        transform: translate3d(0, 0, 0);
    }

    .wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wrapper > div:nth-child(n+4) {
        margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
    }

    /* define clip-path custom properties */
    .wrapper > div:nth-child(1) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;
    }

    .wrapper > div:nth-child(2) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);
    }

    .wrapper > div:nth-child(3) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);
    }

    .wrapper > div:nth-child(4) {
        --_clip-path: 0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7);
    }

    .wrapper > div:nth-child(5) {
        --_clip-path: 0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8);
    }

    .wrapper > div:nth-child(6) {
        --_clip-path: 0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);
    }

    .wrapper > div:nth-child(7) {
        --_clip-path: 0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;
    }

    .wrapper > div:nth-child(8) {
        --_clip-path: 0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;
    }

    .wrapper > div:nth-child(9) {
        --_clip-path: 0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;
    }


    .wrapper > div:hover {
        transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
        scale: 1.3;
        --_clip-path: 0 0, 100% 0, 100% 100%, 0 100%;
        z-index: 180;
        opacity: 1;
    }

    .wrapper:has(:hover) > div:not(:hover) {
        filter: grayscale(1) blur(3px);
        opacity: .5;
        scale: 0.9;
    }

    .wrapper > div:not(:hover) {
        /*animation: zIndexHack 1000ms;*/

    }

    @keyframes zIndexHack {
        0%, 100% {
            z-index: 180;
        }
    }

    /* general styling */
    :root {
        --clr-bg: #233e6d;
        --clr-txt: #F5F5F5;
        --clr-primary: #233e6d;
        --clr-secondary: #233e6d;
        --clr-button: #0369A1;
    }

    html {
        background-color: var(--clr-bg);
    }

    /*  font-family: system-ui;*/
    color: var(--clr-txt);



    body::after {
        content: '';
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: 32px;
        height: 32px;
        background-size: cover;
        background-image: url('data:image/svg+xml,<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1"><g id="surface1"><path fill="rgb(175, 208, 84)" d="M 47.894531 0.789062 C 46.320312 0.878906 45.480469 0.949219 44.601562 1.042969 C 37.023438 1.863281 29.746094 4.394531 23.386719 8.414062 C 20.214844 10.421875 17.402344 12.65625 14.757812 15.285156 C 7.773438 22.222656 3.027344 30.992188 1.113281 40.5 C -0.460938 48.332031 -0.132812 56.378906 2.070312 64.003906 C 4.0625 70.890625 7.507812 77.195312 12.277344 82.675781 C 16.65625 87.714844 22.109375 91.898438 28.074219 94.804688 C 37.914062 99.59375 49.078125 101.03125 59.875 98.886719 C 69.480469 96.976562 78.265625 92.300781 85.253906 85.371094 C 92.304688 78.386719 97.027344 69.65625 98.960938 60.039062 C 99.636719 56.675781 99.902344 53.996094 99.902344 50.285156 C 99.902344 47.910156 99.855469 46.925781 99.660156 45.128906 C 98.671875 35.808594 95.136719 27.136719 89.324219 19.773438 C 86.917969 16.722656 83.851562 13.675781 80.777344 11.285156 C 75.664062 7.304688 69.949219 4.410156 63.695312 2.628906 C 60.5625 1.742188 57.058594 1.128906 53.609375 0.867188 C 52.796875 0.804688 48.566406 0.746094 47.894531 0.789062 Z M 54.105469 24.300781 C 54.105469 24.355469 53.550781 25.921875 52.875 27.773438 L 51.636719 31.148438 L 41.390625 31.148438 C 34.375 31.148438 31 31.167969 30.683594 31.210938 C 27.867188 31.601562 25.414062 33.695312 24.371094 36.621094 C 24.054688 37.503906 23.910156 38.265625 23.839844 39.371094 C 23.800781 40.046875 23.789062 43.769531 23.804688 50.574219 C 23.828125 61.464844 23.816406 60.867188 24.101562 62.066406 C 24.316406 62.976562 24.832031 64.132812 25.339844 64.875 C 26.515625 66.597656 28.074219 67.726562 29.9375 68.203125 C 30.679688 68.394531 31.542969 68.433594 34.851562 68.433594 C 37.878906 68.433594 37.960938 68.441406 37.925781 68.542969 C 37.90625 68.601562 37.34375 70.148438 36.671875 71.972656 L 35.460938 75.296875 L 32.726562 75.296875 C 30.136719 75.296875 29.960938 75.285156 29.269531 75.164062 C 26.808594 74.714844 24.59375 73.707031 22.644531 72.152344 C 22.015625 71.648438 20.859375 70.496094 20.335938 69.847656 C 18.960938 68.15625 17.824219 65.824219 17.285156 63.601562 C 16.824219 61.660156 16.835938 62.175781 16.859375 49.355469 C 16.882812 36.71875 16.847656 37.765625 17.292969 35.953125 C 17.882812 33.523438 18.941406 31.398438 20.515625 29.5 C 21.140625 28.746094 21.625 28.257812 22.417969 27.597656 C 24.695312 25.699219 27.460938 24.53125 30.316406 24.265625 C 30.589844 24.234375 36.054688 24.210938 42.460938 24.207031 C 53.515625 24.199219 54.105469 24.207031 54.105469 24.300781 Z M 66.320312 24.363281 C 69.789062 24.90625 72.703125 26.371094 75.039062 28.757812 C 76.65625 30.402344 77.730469 32.21875 78.382812 34.417969 C 78.683594 35.445312 78.824219 36.347656 78.867188 37.523438 C 78.964844 40.515625 78.066406 43.320312 76.21875 45.777344 C 75.949219 46.136719 75.707031 46.445312 75.675781 46.460938 C 75.558594 46.539062 75.636719 46.605469 76.246094 47 C 80.933594 50.003906 83.621094 55.320312 83.308594 60.960938 C 83.027344 65.992188 80.328125 70.570312 76.113281 73.175781 C 74.453125 74.199219 72.570312 74.894531 70.546875 75.21875 L 69.757812 75.347656 L 56.425781 75.363281 L 43.085938 75.386719 L 43.273438 74.878906 C 43.371094 74.601562 43.949219 73.027344 44.546875 71.386719 L 45.640625 68.40625 L 57.613281 68.375 L 69.582031 68.347656 L 70.167969 68.191406 C 72.121094 67.652344 73.628906 66.617188 74.753906 65.019531 C 75.40625 64.097656 75.960938 62.777344 76.175781 61.632812 C 76.328125 60.832031 76.328125 59.308594 76.175781 58.503906 C 75.867188 56.859375 75.085938 55.316406 73.960938 54.152344 C 72.835938 52.976562 71.722656 52.308594 70.191406 51.894531 L 69.582031 51.730469 L 52.117188 51.703125 L 34.65625 51.671875 L 35.691406 48.835938 C 36.265625 47.273438 36.835938 45.703125 36.96875 45.351562 L 37.207031 44.695312 L 51.269531 44.679688 L 65.328125 44.667969 L 65.941406 44.511719 C 68.972656 43.753906 71.089844 41.820312 71.71875 39.214844 C 71.890625 38.496094 71.898438 37.390625 71.722656 36.699219 C 71.019531 33.839844 68.550781 31.78125 65.21875 31.253906 C 64.984375 31.21875 63.597656 31.171875 62.058594 31.15625 L 59.3125 31.121094 L 60.523438 27.789062 C 61.195312 25.960938 61.769531 24.398438 61.800781 24.324219 L 61.863281 24.183594 L 63.710938 24.21875 C 65.164062 24.242188 65.722656 24.269531 66.320312 24.363281 Z M 66.320312 24.363281 "/></g></svg>');
    }


    code {
        color: var(--clr-secondary);
        border: 1px solid rgba(from var(--clr-secondary) r g b / .25);
        padding-inline: .25rem;
        border-radius: 5px;
    }

    /* Animiertes Fullscreen-Overlay */
    .fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0);
        z-index: 9999;
        cursor: pointer;
        opacity: 0;
        transition: background-color 0.5s ease, opacity 0.5s ease; /* Smooth Übergang: Hintergrund */
    }

    .fullscreen-overlay.visible {
        background-color: rgba(0, 9, 21, 0.85);
        opacity: 1;
    }

    .fullscreen-overlay img {
        max-width: 70%;
        max-height: 70%;
        transform: scale(0.8);
        transition: transform 0.5s ease; /* Smooth Zoom-In/Out vom Bild */
        object-fit: contain;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    }

    .fullscreen-overlay img.visible {
        transform: scale(1); /* Smooth Vergrößerung */
    }

    /* Verhindere Scrollen, wenn der Vollbildmodus aktiv ist */
    body.no-scroll {
        overflow: hidden;
    }




    /* overlay --------------*/
    .overlay {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay_ds {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }
    .overlay_agb {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay-content h2 {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }

    .overlay-content h3 {
        font-size: 1rem;
        margin-top: 3rem;
        margin-bottom: 0.5rem;
    }

    .overlay-content h4 {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 0.4rem;
    }

    .overlay-content h5 {
        font-size: 0.9rem;
        font-variation-settings: 'wght' 400, 'wdth' 60;
        text-transform: none;
        margin-bottom: 0.5rem;
    }

    .overlay-content strong {
        font-variation-settings: 'wght' 460, 'wdth' 60;
    }

    .overlay-content > p, ul {
        margin-bottom: 0.5rem;
    }

    .overlay-content {
        background-color: #001024;
        color: #fff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        padding: 2rem;
        border-radius: 3px;
        position: relative;

        width: 70%;
        max-height: 70%;
        overflow: auto;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 15px;
        font: 1.4rem Exo;
        font-size: 36px;
        z-index: 301;
        cursor: pointer;
    }

    .index-link {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }

    .index li {
        list-style: none;
    }

    .overlay-content > * li {
        list-style: none;
    }

    .textbox a[href] {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }

    .overlay-content a[href] {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }




    /* buchungen -----------------------------*/
    #art8 {
        position: relative;
        color: #fff;
    }

    .buchung-container div {
        width: 100%;
        height: auto;

    }

.buchung-container .beschreibung p {
    width: 50vw;

}



    /* Grundstil für den Button */
    #selector-button1, #selector-button2, #selector-button3 {
        display: flex;
        justify-content: flex-start;
        position: relative; /* Wichtig für die Positionierung der Pseudoelemente */
        /* Platz für den Inhalt */
        background: none;
        border: 1px solid #fff;
        width: 50vw;
        height: 60px;
        padding: 2%;
        margin-top: 40px;
        text-align: left;
        white-space: nowrap;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    #selector-button1 h3,
    #selector-button3 h3 {
        margin-right: 20px;
    }

    /* Das figure-Element initial verstecken */
    #selector-button1 div,
    #selector-button3 div
    {
        opacity: 0;
        max-height: 0;
        transition: max-height 1s ease, opacity 1s ease;

    }

    /* Wenn die Klasse .klick vorhanden ist, zeige das figure-Element */
    #selector-button1.klick div {
        opacity: 1;
        min-height: 800px; /* genug groß, um den Inhalt anzuzeigen */
        margin-top: 30px;
    }


    #selector-button3.klick div {
        opacity: 1;
        min-height: 3000px; /* genug groß, um den Inhalt anzuzeigen */
        margin-top: 10px;
    }

    #selector-button1.klick,
    #selector-button3.klick
    {
        display: flex;
        width: 90vw;
        height: auto;
        padding: 2%;
        text-align: left;
        justify-content: flex-start;
        overflow: hidden;
        background: #001024;

    }
    /* Optional: Styling für das figure-Element */
    #selector-button1 div,
    #selector-button3 div
    {
        width: 100%;
        height: 100%;
        background: #001024;
    }



    /* footer -----------*/


    #ende {
        position: fixed;
        bottom: 0;
        height: 9vh;
        width: 100vw;
        border-top: 1px solid #fff;
        text-align: left;
        background: #001024;
        color: #fff;
        box-shadow: 0 0 10px #fff;
        z-index: 600;
    }


    /* Effekte bei Hover */
    #footer-nav a:hover, #footer-nav .akt:hover {
        text-shadow: 0 0 14px #fff;

    }


    #footer-nav {
        position: absolute;
        left: 2vw;
        width: 100vw;
        height: 9.5vh;
        bottom: 0.75vh;
        display: flex;
        z-index: 604;

    }


    #footer-nav ul {
        list-style: none;
        margin: 0;
        padding: 2%;
        display: flex;
        gap: 20px;
    }

    #footer-nav ul p {
        font: 1rem Exo;
        font-variation-settings: 'wght' 400, 'wdth' 80;
        visibility: hidden;
    }

    #footer-nav > li {
        position: relative;


    }

    #footer-nav a {
        color: #fff;
        font: 0.9rem Exo;
        font-variation-settings: 'wght' 300, 'wdth' 80;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left;
        padding-left: 0.5rem;
        transform: translateY(0rem);
        line-height: 3.5rem;
        display: block;
        transition: 0.2s ease;

    }

    #footer-nav ul ul a {
        display: block;
        transform: scale(0.9);
        padding-left: 1.3rem;


    }

    #footer-nav ul ul p {
        padding: 15px 0;
        visibility: hidden;
    }

    #footer-nav ul ul {
        display: flex;
        position: absolute;
        bottom: 6.5vh;
        left: 0;
        list-style: none;
        width: 100%;
        height: 1vh;
        opacity: 1;
        visibility: hidden;
        transition: 0.2s ease;
        justify-content: flex-start;
        z-index: 620;
        gap: 5px;


    }

    #footer-nav ul li:hover ul {
        opacity: 1;
        visibility: visible;

    }

    #footer-nav ul ul li a::before {
        visibility: hidden;
    }


    .footer-spalter {
        position: absolute;
        width: 20vw;
        height: 4.5vh;
        bottom: 0;
        right: 8vw;
        display: flex;
        justify-content: flex-start;
        z-index: 620;
        padding-left: 1rem;
        gap: 20px;

    }

    .footer-spalter svg {
        display: block;
        width: 1.2rem;
        height: 1.6rem;
        color: #fff;

        text-decoration: none;
    }

    .social svg:hover {
        filter: drop-shadow(0px 0 14px #fff);
    }

    #ende img {
        position: absolute;
        bottom: 0;
        right: 2vw;
        width: auto;
        height: 9vh;
    }

    /* animation footer ------*/

    #footer-nav a::before {
        content: "";
        position: absolute;
        bottom: -12rem;
        left: -7.5rem;
        display: block;
        background: #fff;
        width: 3px;
        height: 4rem;
        transform: scale(0);
        animation-name: footer_ani_linie;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes footer_ani_linie {
        from {
            transform: skewX(-32deg) translateX(0) scale(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) translateX(0) scale(1) translateY(-10rem);
        }
    }

    #footer-nav .footer-linie:hover a::before {
        background: #fff;
        animation-name: footer-ani_linie6;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes footer-ani_linie6 {
        from {
            transform: skewX(-32deg) scaleY(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) scaleY(1.95) translateY(-5rem);
        }
    }





    .social a::before {
        content: "";
        position: absolute;
        bottom: -11.5rem;
        left: -7.5rem;
        background: #fff;
        width: 3px;
        height: 4rem;
        transform: scale(0);
        animation-name: footer_ani_linie_social;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes footer_ani_linie_social {
        from {
            transform: skewX(-32deg) scaleY(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) scaleY(1) translateY(-10rem);
        }
    }
}






/* desktop ------------------------------------*/
@media screen and (min-width:1401px) {
    html {
        font: 1.2rem ExoItalic;
        font-variation-settings: 'wght' 200, 'wdth' 80;
        scroll-behavior: smooth;
    }

    h1, h2 {
        font: 1.6rem Exo;
        font-variation-settings: 'wght' 600, 'wdth' 60;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: #fff;
    }

    h3 {
        font: 1.2rem Exo;
        font-variation-settings: 'wght' 600, 'wdth' 60;
        text-transform: uppercase;
        color: #fff;
    }

    h4 {
        font: 1.2rem Exo;
        font-variation-settings: 'wght' 500, 'wdth' 60;
        text-transform: uppercase;
        margin-top: 1rem;
        margin-bottom: 0.2rem;
        color: #fff;
    }


    body {
        background-color: #233e6d;

    }

    strong {
        font: 1.2rem Exo;
        font-variation-settings: 'wght' 400, 'wdth' 60;
        text-transform: uppercase;
    }

    section {
        margin-bottom: 80px;
        scroll-margin-top: 20vh;
    }

    a[href^="mailto:"] {
        color: inherit; /* Vererbt die Textfarbe des umgebenden Elements */
        text-decoration: none; /* Entfernt die Unterstreichung */
    }

    form p {
        margin: 1.0rem auto;
    }

    label {
        width: 80px;
        display: inline-block;
        vertical-align: bottom;
    }

    input, textarea {
        width: 450px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.60);
        outline: none;
        font: 0.9rem Exo;
        color: #fff;
        padding: 0.4rem;
        transition: 0.2s;
    }

    input:hover {
        box-shadow: 0 -2px 8px 2px rgba(255, 255, 255, 0.20);
    }

    textarea:hover {
        box-shadow: 0 -2px 8px 2px rgba(255, 255, 255, 0.20);
    }

    input[type="checkbox"], input[type="radio"] {
        width: auto;
        accent-color: #001024;
    }

    input:focus, textarea:focus {
        background: rgba(0, 0, 12, 0.1);
    }

    input[type="submit"] {
        border: 1px solid rgba(255, 255, 255, 0.6);
        width: 120px;

    }

    .senden-button {
        margin-top: 80px;
    }


    input[type="submit"]:hover {
        background: rgba(0, 0, 12, 0.5);
    }

    /* header */
    #topheader {
        position: fixed;
        top: -6px;
        left: 0;
        right: 0;
        height: 16vh; /* Höhe des Headers */
        background: #001024;
        z-index: 1000;
        box-shadow: 0 0 12px #fff;

        border-bottom: 2px solid #fff;
        display: flex;
        align-items: center; /* Vertikal zentrieren */
        justify-content: center; /* Platz für flexiblen Inhalt */
    }

    /* Flex-Container innerhalb des Headers */
    .header-container {
        display: flex;
        justify-content: space-between; /* Platz zwischen Logo und Navigation */
        align-items: center; /* Vertikale Ausrichtung */
        width: 100%; /* Nimmt die gesamte verfügbare Breite ein */
        padding: 0 0; /* Etwas Innenabstand rechts und links */
    }

    /* Einstellungen für das Logo */
    #topheader img {
        flex: 0 0 auto; /* Bild liegt fix links */
        height: 14vh; /* Dynamische Höhe für Bild */
        margin-bottom: 0.5rem;
    }

    #topheader img:hover {
        text-shadow: 0px 0px 15px #fff;
        filter: drop-shadow(0 0 15px #fff);
    }


    /* navi ---------*/
    #topnav {
        flex: 1; /* Navigation nimmt den restlichen Platz ein */
        display: flex; /* Falls nötig, können Sie zusätzliche Flexbox-Einstellungen für die Links hier vornehmen */
        justify-content: flex-end; /* Navigation wird nach rechts verschoben */
        width: auto; /* Automatische Breite basierend auf Inhalt */

    }

    #topnav:target {
        transform: translateX(0);
    }

    #topnav a.active {
        text-shadow: 30px 0 20px rgba(255, 255, 255, 1.0);
        filter: drop-shadow(0 0 15px #fff);
    }

    #topnav ul {
        display: flex;
        white-space: nowrap;
        list-style: none;
    }

    #topnav li {
        position: relative;
    }

    #topnav ul ul {
        position: absolute;
        top: 4.5vh;

        list-style: none;
        width: 100%;
        transform: translateX(-2.6rem) scale(0.8);
        opacity: 1;
        visibility: hidden;
        transition: 0.1s;
    }

    #topnav ul li:hover ul {
        opacity: 1;
        visibility: visible;
    }

    #topnav ul ul li a::before {
        visibility: hidden;
    }

    #topnav a {

        display: inline-block; /* Damit Padding funktioniert */
        padding: 10px 30px 5px 0; /* Abstand innerhalb des <a> */
        color: #fff;
        font: 1.1rem Exo;
        text-transform: uppercase;
        text-decoration: none;
        margin-right: 1rem;

    }

    /* animation ---*/
    #topnav a::before {
        content: "";
        position: absolute;
        top: -16.3rem;
        left: 1.4rem;
        display: block;
        background: #fff;
        width: 4px;
        height: 8rem;
        transform: scale(0);
        animation-name: ani_linie;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes ani_linie {
        from {
            transform: skewX(-32deg) translateX(6rem) scale(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) translateX(6rem) scale(1) translateY(10rem);
        }
    }
    #topnav a:hover, #topnav .akt, #ende p:hover {
        text-shadow: 0px 0px 15px #fff;
        filter: drop-shadow(0 0 15px #fff);
    }

    #topnav .linie:hover a::before {
        background: #fff;
        animation-name: ani_linie6;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes ani_linie6 {
        from {
            transform: skewX(-32deg) translateX(6rem) scaleY(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) translateX(6rem) scaleY(1.7) translateY(5.75rem);
        }
    }


    .fläche_body_hg_start {
        position: fixed;
        background-color: #001024; /* dunkelblaue Fläche */
        height: 70vh; /* Höhe der Flächen */
        width: 100vw;
        z-index: 10;
        top: 19vh;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); /* Glow-Effekt */
        opacity: 100%;

    }


    /* slider für bürozeiten*/
    #slidingDiv-buero {
        position: absolute;
        width: 50%;
        left: 50%;
        transform: translateX(-50%);
        height: 300px;
        background-color: #001024;
        color: #fff;
        font: 1.2rem Exo;
        text-align: center;
        box-shadow: 0 0 10px #fff;
        padding: 20px;
        z-index: 500;
        transition: bottom 0.5s ease;
    }

    #slidingDiv-buero p {
        text-align: center;
        padding-top: 80px;
    }

    #slidingDiv-flug {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 300px;
        background-color: #001024;
        color: #fff;
        font: 1.2rem Exo;
        text-align: center;
        box-shadow: 0 0 10px #fff;
        padding: 20px;
        z-index: 501;
        transition: bottom 0.5s ease;
    }

    #slidingDiv-flug p {
        text-align: center;
        padding-top: 80px;
    }

    .hidden {
        bottom: -600px;
        visibility: hidden;
    }

    .visible {
        bottom: 0;
        overflow: hidden;
    }

    .close-button {
        position: absolute;
        top: 10px;
        text-align: center;
        font: 2rem Exo;
        z-index: 510;
        cursor: pointer;
    }


    /* wrapper --------*/
    #wrapper_layer_startseite {
        position: fixed;
        top: 25vh;
        z-index: 200;
        width: 100vw;
        height: 100vh;


    }

    #wrapper_layer {
        position: absolute;
        z-index: 50;
        max-width: 100vw;
        padding: 0 3.5%;
        top: 20vh;

    }

    #hg_wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        max-height: 100vh;
        margin-top: 1px;
        padding-top: 2%;
        background: url("../img/ast_hg_web.png") center fixed;
        background-repeat: no-repeat;
    }

    /*#over_wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        min-width: 100vw;
        height: 100vh;

        background: url("../img/ast_over_hg_web.png") center fixed;
    }*/
    .headline_start {
        position: absolute;
        top: 0;
        left: 4vw;
        z-index: 293;
    }

    .headline_start h1 {
        font: 2.4rem ExoItalic;
        font-variation-settings: 'wght' 400, 'wdth' 80;
        text-transform: none;
        color: #fff;
    }

    .startbild {
        display: flex;
        justify-content: center;
        height: 70vh;
        z-index: 292;
    }

    .unten_start {
        position: absolute; /* Ermöglicht die Positionierung relativ zum übergeordneten Element */
        bottom: 40%; /* Unten */
        right: 4vw; /* Rechts */
        z-index: 291;
    }

    .startbild img {
        max-width: 80%; /* Bild anpassen, um nicht über den Container hinauszugehen */
        height: auto; /* Höhe automatisch anpassen */
        z-index: 290;
    }

    .unten_start h2 {
        font: 2.4rem ExoItalic;
        font-variation-settings: 'wght' 400, 'wdth' 80;
        text-transform: none;
        color: #fff;
    }

    /* Folgeseiten */
    .sec {
        display: grid;
        grid-template-columns: 12fr 1fr 3fr 12fr;
        grid-template-rows: 6fr;
        grid-template-areas: "text s-gap ill s-bild"
        "text s-gap ill s-bild"
        "text s-gap ill s-bild"
        "text s-gap ill s-bild";
        width: 90vw;

        z-index: 60;

    }


    /* grid-items-Zuordnung */
    .gtext {
        grid-area: text;
        padding-right: 2rem;
        text-decoration: none;
    }

    .gbild {
        grid-area: s-bild;
        /*transform: translateY(-5px);*/
        width: 100%;         /* Nimmt 100% der verfügbaren Breite des Elterncontainers ein */
        margin: 0;           /* Entfernt äußere Abstände, falls vorhanden */
        padding: 0;          /* Entfernt innere Abstände, falls vorhanden */
    }

    .gbild img {
        display: block;      /* Entfernt mögliche Lücken um das Bild herum */
        width: 100%;         /* Stellt sicher, dass das Bild die volle Breite des Containers einnimmt */
        height: auto;        /* Beibehaltung des Seitenverhältnisses, um Verzerrungen zu vermeiden */
        max-width: 100%;     /* Verhindert, dass das Bild größer als der Container wird */
    }

    .illu {
        grid-area: ill;
        margin-top: 50px;
    }

    .ggap {
        grid-area: s-gap;
    }

    .sec > div {
        color: #fff;
        padding-top: 40px;
    }

    /*.gbild {
        min-height: 600px;
    }*/

    .sec p {
        line-height: 1.5rem;
        margin-bottom: 2rem;
        color: #fff;
    }

    .sec > img {
        width: 100%;
        height: 100%;

    }

    .gtext p {
        font: 1rem ExoItalic;
        font-variation-settings: 'wght' 200, 'wdth' 60;
    }

    .gtext a {
        text-decoration: none;
        color: inherit;
    }

    section h2 {
        color: #fff;
        font-variation-settings: 'wght' 400, 'wdth' 100;
        text-align: left;
    }

    section h3 {
        color: #fff;
        font-variation-settings: 'wght' 400, 'wdth' 100;
        text-align: center;
    }

    section p {
        line-height: 1.5rem;
        margin-bottom: 4rem;
        color: #fff;
    }


    span a {
        display: block;
        width: 210px;
        height: auto;
        border: 1px solid #fff;
        padding: 10px;
        text-decoration: none;
        color: #fff;
    }

    .superspalter_auflistung {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }

    #art13, #art14 {
        margin-bottom: 10px;
    }

    #art25 {
        margin-top: 200px;
        margin-bottom: 300px;
    }

    #art25 .gbild {
        margin-top: 40px;
    }

    .auflistung {
        flex-basis: 50%;
        height: auto;
        color: #fff;
        line-height: 1.3rem;
        text-decoration: none;
        text-align: left;
    }

    .auflistung a {
        text-decoration: none;
        color: inherit;

    }

    .beschreibung {
        text-align: left;
        display: block;

        color: #fff;
        width: 60vw;
    }

    section ul {
        list-style-type: none;
        line-height: 1.6rem;
        color: #fff;
    }

    .abstand_400 {
        margin-bottom: 400px;
    }

    .abstand_200 {
        margin-bottom: 200px;
    }

    .tabelle h3 {
        display: block;
        font: 1.4rem ExoItalic;
        line-height: 2rem;
        font-variation-settings: 'wght' 200, 'wdth' 60;
        padding: 20px 0 16px 0;
        border: 1px solid #fff;
        width: 700px;
        height: auto;
        margin: 2rem 0 1rem 0;
    }

    .tabelle table {
        width: 700px;
        height: auto;
        color: #fff;
        border-collapse: collapse;

    }

    table tr {
        white-space: nowrap;
    }

    .rechts {
        text-align: right;
    }

    .linie-unten td {
        position: relative; /* Damit das ::after-Element relativ zur Zeile positioniert werden kann */
        line-height: 2.6rem;
    }

    .linie-unten td::after {
        content: ""; /* Erforderlich, um das Pseudoelement anzuzeigen */
        display: block; /* Damit die Linie als Blockelement angezeigt wird */
        width: 100%; /* Die Linie soll die gesamte Breite der Zeile einnehmen */
        height: 1px; /* Höhe der Linie */
        background: #fff; /* Farbe der Linie */
        position: absolute; /* Absolut positioniert, um unter der Zeile zu erscheinen */
        bottom: 0; /* Am unteren Ende der Zeile */
        left: 0; /* Links ausgerichtet */
    }

    .tabelle div {
        width: 700px;
        font: 0.6rem Exo;
        font-variation-settings: 'wght' 200, 'wdth' 60;
        margin-top: 0.3rem;
        text-align: right;
        white-space: nowrap;
    }

    .keine-linie-unten tr::after {
        content: ""; /* Erforderlich, um das Pseudoelement anzuzeigen */
        display: block; /* Damit die Linie als Blockelement angezeigt wird */
        width: 100%; /* Die Linie soll die gesamte Breite der Zeile einnehmen */
        height: 0px; /* Höhe der Linie */
        background: #fff; /* Farbe der Linie */
        position: absolute; /* Absolut positioniert, um unter der Zeile zu erscheinen */
        bottom: 0; /* Am unteren Ende der Zeile */
        left: 0; /* Links ausgerichtet */
    }


    #galerie_a320, #galerie_agusta, #galerie_baron {
        margin-bottom: 200px;
    }

    .superspalter {
        display: flex;
        height: 100%;
        justify-content: space-around;
    }

    .superspalter > * {
        align-self: flex-end;
        padding-bottom: 1rem;
    }

    .textbox {
        width: 550px;
        font-size: 0.8rem;
        margin: 1rem 0 1rem;
    }

    /* slanted --------*/
    .wrapper {
        --_gap: .5rem;
        --_offset: 10%;
        --_offset-1: calc(var(--_offset) * 1);
        --_offset-2: calc(var(--_offset) * 2);
        --_offset-3: calc(var(--_offset) * 3);
        --_offset-7: calc(var(--_offset) * 7);
        --_offset-8: calc(var(--_offset) * 8);
        --_offset-9: calc(var(--_offset) * 9);

        width: calc(100% - 4rem);
        max-width: 40vw;
        margin: 2rem auto;
        color: white;
        /*  font-family: system-ui;*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 var(--_gap);
        pointer-events: none;
        transform-style: preserve-3d;
    }

    .wrapper > div {
        position: relative;
        pointer-events: auto;
        aspect-ratio: 1;
        transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
        clip-path: polygon(var(--_clip-path));
        transform: translate3d(0, 0, 0);
    }

    .wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wrapper > div:nth-child(n+4) {
        margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
    }

    /* define clip-path custom properties */
    .wrapper > div:nth-child(1) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;
    }

    .wrapper > div:nth-child(2) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);
    }

    .wrapper > div:nth-child(3) {
        --_clip-path: 0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);
    }

    .wrapper > div:nth-child(4) {
        --_clip-path: 0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7);
    }

    .wrapper > div:nth-child(5) {
        --_clip-path: 0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8);
    }

    .wrapper > div:nth-child(6) {
        --_clip-path: 0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);
    }

    .wrapper > div:nth-child(7) {
        --_clip-path: 0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;
    }

    .wrapper > div:nth-child(8) {
        --_clip-path: 0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;
    }

    .wrapper > div:nth-child(9) {
        --_clip-path: 0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;
    }


    .wrapper > div:hover {
        transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
        scale: 1.3;
        --_clip-path: 0 0, 100% 0, 100% 100%, 0 100%;
        z-index: 180;
        opacity: 1;
    }

    .wrapper:has(:hover) > div:not(:hover) {
        filter: grayscale(1) blur(3px);
        opacity: .5;
        scale: 0.9;
    }

    .wrapper > div:not(:hover) {
        /*animation: zIndexHack 1000ms;*/

    }

    @keyframes zIndexHack {
        0%, 100% {
            z-index: 180;
        }
    }

    /* general styling */
    :root {
        --clr-bg: #233e6d;
        --clr-txt: #F5F5F5;
        --clr-primary: #233e6d;
        --clr-secondary: #233e6d;
        --clr-button: #0369A1;
    }

    html {
        background-color: var(--clr-bg);
    }

    /*  font-family: system-ui;*/
    color: var(--clr-txt);



    body::after {
        content: '';
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: 32px;
        height: 32px;
        background-size: cover;
        background-image: url('data:image/svg+xml,<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1"><g id="surface1"><path fill="rgb(175, 208, 84)" d="M 47.894531 0.789062 C 46.320312 0.878906 45.480469 0.949219 44.601562 1.042969 C 37.023438 1.863281 29.746094 4.394531 23.386719 8.414062 C 20.214844 10.421875 17.402344 12.65625 14.757812 15.285156 C 7.773438 22.222656 3.027344 30.992188 1.113281 40.5 C -0.460938 48.332031 -0.132812 56.378906 2.070312 64.003906 C 4.0625 70.890625 7.507812 77.195312 12.277344 82.675781 C 16.65625 87.714844 22.109375 91.898438 28.074219 94.804688 C 37.914062 99.59375 49.078125 101.03125 59.875 98.886719 C 69.480469 96.976562 78.265625 92.300781 85.253906 85.371094 C 92.304688 78.386719 97.027344 69.65625 98.960938 60.039062 C 99.636719 56.675781 99.902344 53.996094 99.902344 50.285156 C 99.902344 47.910156 99.855469 46.925781 99.660156 45.128906 C 98.671875 35.808594 95.136719 27.136719 89.324219 19.773438 C 86.917969 16.722656 83.851562 13.675781 80.777344 11.285156 C 75.664062 7.304688 69.949219 4.410156 63.695312 2.628906 C 60.5625 1.742188 57.058594 1.128906 53.609375 0.867188 C 52.796875 0.804688 48.566406 0.746094 47.894531 0.789062 Z M 54.105469 24.300781 C 54.105469 24.355469 53.550781 25.921875 52.875 27.773438 L 51.636719 31.148438 L 41.390625 31.148438 C 34.375 31.148438 31 31.167969 30.683594 31.210938 C 27.867188 31.601562 25.414062 33.695312 24.371094 36.621094 C 24.054688 37.503906 23.910156 38.265625 23.839844 39.371094 C 23.800781 40.046875 23.789062 43.769531 23.804688 50.574219 C 23.828125 61.464844 23.816406 60.867188 24.101562 62.066406 C 24.316406 62.976562 24.832031 64.132812 25.339844 64.875 C 26.515625 66.597656 28.074219 67.726562 29.9375 68.203125 C 30.679688 68.394531 31.542969 68.433594 34.851562 68.433594 C 37.878906 68.433594 37.960938 68.441406 37.925781 68.542969 C 37.90625 68.601562 37.34375 70.148438 36.671875 71.972656 L 35.460938 75.296875 L 32.726562 75.296875 C 30.136719 75.296875 29.960938 75.285156 29.269531 75.164062 C 26.808594 74.714844 24.59375 73.707031 22.644531 72.152344 C 22.015625 71.648438 20.859375 70.496094 20.335938 69.847656 C 18.960938 68.15625 17.824219 65.824219 17.285156 63.601562 C 16.824219 61.660156 16.835938 62.175781 16.859375 49.355469 C 16.882812 36.71875 16.847656 37.765625 17.292969 35.953125 C 17.882812 33.523438 18.941406 31.398438 20.515625 29.5 C 21.140625 28.746094 21.625 28.257812 22.417969 27.597656 C 24.695312 25.699219 27.460938 24.53125 30.316406 24.265625 C 30.589844 24.234375 36.054688 24.210938 42.460938 24.207031 C 53.515625 24.199219 54.105469 24.207031 54.105469 24.300781 Z M 66.320312 24.363281 C 69.789062 24.90625 72.703125 26.371094 75.039062 28.757812 C 76.65625 30.402344 77.730469 32.21875 78.382812 34.417969 C 78.683594 35.445312 78.824219 36.347656 78.867188 37.523438 C 78.964844 40.515625 78.066406 43.320312 76.21875 45.777344 C 75.949219 46.136719 75.707031 46.445312 75.675781 46.460938 C 75.558594 46.539062 75.636719 46.605469 76.246094 47 C 80.933594 50.003906 83.621094 55.320312 83.308594 60.960938 C 83.027344 65.992188 80.328125 70.570312 76.113281 73.175781 C 74.453125 74.199219 72.570312 74.894531 70.546875 75.21875 L 69.757812 75.347656 L 56.425781 75.363281 L 43.085938 75.386719 L 43.273438 74.878906 C 43.371094 74.601562 43.949219 73.027344 44.546875 71.386719 L 45.640625 68.40625 L 57.613281 68.375 L 69.582031 68.347656 L 70.167969 68.191406 C 72.121094 67.652344 73.628906 66.617188 74.753906 65.019531 C 75.40625 64.097656 75.960938 62.777344 76.175781 61.632812 C 76.328125 60.832031 76.328125 59.308594 76.175781 58.503906 C 75.867188 56.859375 75.085938 55.316406 73.960938 54.152344 C 72.835938 52.976562 71.722656 52.308594 70.191406 51.894531 L 69.582031 51.730469 L 52.117188 51.703125 L 34.65625 51.671875 L 35.691406 48.835938 C 36.265625 47.273438 36.835938 45.703125 36.96875 45.351562 L 37.207031 44.695312 L 51.269531 44.679688 L 65.328125 44.667969 L 65.941406 44.511719 C 68.972656 43.753906 71.089844 41.820312 71.71875 39.214844 C 71.890625 38.496094 71.898438 37.390625 71.722656 36.699219 C 71.019531 33.839844 68.550781 31.78125 65.21875 31.253906 C 64.984375 31.21875 63.597656 31.171875 62.058594 31.15625 L 59.3125 31.121094 L 60.523438 27.789062 C 61.195312 25.960938 61.769531 24.398438 61.800781 24.324219 L 61.863281 24.183594 L 63.710938 24.21875 C 65.164062 24.242188 65.722656 24.269531 66.320312 24.363281 Z M 66.320312 24.363281 "/></g></svg>');
    }


    code {
        color: var(--clr-secondary);
        border: 1px solid rgba(from var(--clr-secondary) r g b / .25);
        padding-inline: .25rem;
        border-radius: 5px;
    }

    /* Animiertes Fullscreen-Overlay */
    .fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0);
        z-index: 9999;
        cursor: pointer;
        opacity: 0;
        transition: background-color 0.5s ease, opacity 0.5s ease; /* Smooth Übergang: Hintergrund */
    }

    .fullscreen-overlay.visible {
        background-color: rgba(0, 9, 21, 0.85);
        opacity: 1;
    }

    .fullscreen-overlay img {
        max-width: 70%;
        max-height: 70%;
        transform: scale(0.8);
        transition: transform 0.5s ease; /* Smooth Zoom-In/Out vom Bild */
        object-fit: contain;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    }

    .fullscreen-overlay img.visible {
        transform: scale(1); /* Smooth Vergrößerung */
    }

    /* Verhindere Scrollen, wenn der Vollbildmodus aktiv ist */
    body.no-scroll {
        overflow: hidden;
    }


    /* overlay --------------*/
    .overlay {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay_ds {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay_agb {
        display: none; /* Start mit unsichtbarem Overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
        background-color: rgba(1, 9, 19, 0.80);
        justify-content: center;
        align-items: center;
    }

    .overlay-content h2 {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }

    .overlay-content h3 {
        font-size: 1rem;
        margin-top: 3rem;
        margin-bottom: 0.5rem;
    }

    .overlay-content h4 {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 0.4rem;
    }

    .overlay-content h5 {
        font-size: 0.9rem;
        font-variation-settings: 'wght' 400, 'wdth' 60;
        text-transform: none;
        margin-bottom: 0.5rem;
    }

    .overlay-content strong {
        font-variation-settings: 'wght' 460, 'wdth' 60;
    }

    .overlay-content > p, ul {
        margin-bottom: 0.5rem;
    }

    .overlay-content {
        background-color: #001024;
        color: #fff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        padding: 2rem;
        border-radius: 3px;
        position: relative;

        width: 70%;
        max-height: 70%;
        overflow: auto;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 15px;
        font: 1.4rem Exo;
        font-size: 36px;
        z-index: 301;
        cursor: pointer;
    }

    .index-link {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }

    .index li {
        list-style: none;
    }

    .overlay-content > * li {
        list-style: none;
    }

    .textbox a[href] {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }

    .overlay-content a[href] {
        color: rgba(106, 133, 235, 1.00);
        text-decoration: none;
    }


    /* buchungen -----------------------------*/
    #art8 {
        position: relative;
        color: #fff;
    }

    .buchung-container {

        height: 100%;
        margin-bottom: 80px;
    }

    /*
        .buchung-container > *:first-child {
            flex-basis: 35%;
        }

        .buchung-container > *:last-child {
            flex-basis: 65%;
        }*/
    .buchung-container .beschreibung {
        padding-right: 100px;
    }

    /* Grundstil für den Button */
    #selector-button1, #selector-button2, #selector-button3 {

        position: relative; /* Wichtig für die Positionierung der Pseudoelemente */
        /* Platz für den Inhalt */
        background: none;
        border: 1px solid #fff;
        width: 20vw;
        height: 100px;
        padding: 2%;
        text-align: left;
        white-space: nowrap;
        transition: all 0.3s ease;
        overflow: hidden;
    }


    /* Das figure-Element initial verstecken */
    #selector-button1 div,
    #selector-button3 div {
        opacity: 0;
        max-height: 0;
        transition: max-height 1s ease, opacity 1s ease;

    }

    /* Wenn die Klasse .klick vorhanden ist, zeige das figure-Element */
    #selector-button1.klick div {
        opacity: 1;
        min-height: 800px; /* genug groß, um den Inhalt anzuzeigen */
        margin-top: 30px;
    }


    #selector-button3.klick div {
        opacity: 1;
        min-height: 3000px; /* genug groß, um den Inhalt anzuzeigen */
        margin-top: 10px;
    }

    #selector-button1.klick,
    #selector-button3.klick {

        width: 92vw;
        height: auto;
        padding: 2%;
        text-align: left;

        overflow: hidden;
        background: #001024;

    }

    /* Optional: Styling für das figure-Element */
    #selector-button1 div,
    #selector-button3 div {
        width: 100%;
        height: 100%;
        background: #001024;
        padding: 0 40px;
        text-align: left;

    }

    /* footer -----------*/


    #ende {
        position: fixed;
        bottom: 0;
        height: 9vh;
        width: 100vw;
        border-top: 1px solid #fff;
        text-align: left;
        background: #001024;
        color: #fff;
        box-shadow: 0 0 10px #fff;
        z-index: 600;
    }


    /* Effekte bei Hover */
    #footer-nav a:hover, #footer-nav .akt:hover {
        text-shadow: 0 0 14px #fff;

    }


    #footer-nav {
        position: absolute;
        left: 2vw;
        width: 100vw;
        height: 9.5vh;
        bottom: 0.75vh;
        display: flex;
        z-index: 604;

    }


    #footer-nav ul {
        list-style: none;
        margin: 0;
        padding: 2%;
        display: flex;
        gap: 20px;
    }

    #footer-nav ul p {
        font: 1rem Exo;
        font-variation-settings: 'wght' 400, 'wdth' 80;
        visibility: hidden;
    }

    #footer-nav > li {
        position: relative;


    }

    #footer-nav a {
        color: #fff;
        font: 0.9rem Exo;
        font-variation-settings: 'wght' 300, 'wdth' 80;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left;
        padding-left: 0.5rem;
        transform: translateY(0rem);
        line-height: 3.5rem;
        display: block;
        transition: 0.2s ease;

    }

    #footer-nav ul ul a {
        display: block;
        transform: scale(0.9);
        padding-left: 1.3rem;


    }

    #footer-nav ul ul p {
        padding: 15px 0;
        visibility: hidden;
    }

    #footer-nav ul ul {
        display: flex;
        position: absolute;
        bottom: 4.5vh;
        left: 0;
        list-style: none;
        width: 100%;
        height: 1vh;
        opacity: 1;
        visibility: hidden;
        transition: 0.2s ease;
        justify-content: flex-start;
        z-index: 620;
        gap: 5px;


    }

    #footer-nav ul li:hover ul {
        opacity: 1;
        visibility: visible;

    }

    #footer-nav ul ul li a::before {
        visibility: hidden;
    }


    .footer-spalter {
        position: absolute;
        width: 20vw;
        height: 4.5vh;
        bottom: 0;
        right: 8vw;
        display: flex;
        justify-content: flex-start;
        z-index: 620;
        padding-left: 1rem;
        gap: 20px;

    }

    .footer-spalter svg {
        display: block;
        width: 1.2rem;
        height: 1.6rem;
        color: #fff;

        text-decoration: none;
    }

    .social svg:hover {
        filter: drop-shadow(0px 0 14px #fff);
    }

    #ende img {
        position: absolute;
        bottom: 0;
        right: 2vw;
        width: auto;
        height: 9vh;
    }

    /* animation footer ------*/

    #footer-nav a::before {
        content: "";
        position: absolute;
        bottom: -12rem;
        left: -7.5rem;
        display: block;
        background: #fff;
        width: 3px;
        height: 4rem;
        transform: scale(0);
        animation-name: footer_ani_linie;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes footer_ani_linie {
        from {
            transform: skewX(-32deg) translateX(0) scale(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) translateX(0) scale(1) translateY(-10rem);
        }
    }

    #footer-nav .footer-linie:hover a::before {
        background: #fff;
        animation-name: footer-ani_linie6;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes footer-ani_linie6 {
        from {
            transform: skewX(-32deg) scaleY(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) scaleY(1.95) translateY(-5rem);
        }
    }





   .social a::before {
        content: "";
        position: absolute;
        bottom: -11.5rem;
        left: -7.5rem;
        background: #fff;
        width: 3px;
        height: 4rem;
        transform: scale(0);
        animation-name: footer_ani_linie_social;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-delay: 0s;
    }

    @keyframes footer_ani_linie_social {
        from {
            transform: skewX(-32deg) scaleY(0) translateY(0rem);
        }
        to {
            transform: skewX(-32deg) scaleY(1) translateY(-10rem);
        }
    }

}