body {
            font-family: Arial, sans-serif;
            background-color: #051a34; /* Dunkelblau */ /* Hintergrundfarbe */
	    color: #fff; /* Überschrift */
            margin: 0;
            padding: 10px;
        }

	.title-container {
	    width: 82%;
	    justify-content: flex-start; /* Links bündig ausrichten */
	    margin: 0 auto; /* Zentriert das Element */
	}

	.tab-container {
	    width: 80%;
	    justify-content: flex-start; /* Links bündig ausrichten */
	    margin: 0 auto; /* Zentriert das Element */
	    z-index: 5;
	}
	
	.tab {
	    background-color: #051a34; /* Dunkelblau */
	    color: #fff;
	    padding: 10px 20px;
	    border: none;
	    cursor: pointer;
	    transition: background-color 0.3s ease, color 0.3s ease;
	    position: relative;
	    border-top-left-radius: 10px; /* Abrundung der oberen linken Ecke */
	    border-top-right-radius: 10px; /* Abrundung der oberen rechten Ecke */
	    border-bottom-left-radius: 0px; /* keine Abrundung der oberen rechten Ecke */
	    border-bottom-right-radius: 0px; /* keine Abrundung der oberen rechten Ecke */
	    margin-right: -1px; /* Negativer Margin, um den Abstand zwischen den Reitern zu verringern */
	    box-shadow: 0 0 2px rgba(255, 255, 255, 0.8); /* Leichtes weißes Leuchten um den Rand */
	}

	.tab:hover {
	    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Leichtes weißes Leuchten um den Rand */
	}

	.tab.active {
	    background-color: #c0f7ed; /* Hellblau */
	    color:  #051a34; /* Dunkelblau */
   	    font-weight: bold; /* Schrift in bold */
	}

	.form-section {
	    width: 80%; /* Breite */
	    background-color: #c0f7ed; /* Hellblau */
	    color: #051a34; /* Dunkelblau */
	    border-radius: 5px;
	    padding: 20px;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	    margin: 0 auto; /* Zentriert das Element mit oben/unten Abstand */
	    z-index: 15;
	}

        input[type="text"], input[type="email"], textarea,
        select {
            width: calc(100% - 22px);
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #051a34; /* Dunkelblau */
            border-radius: 4px;
            transition: all 0.3s ease; /* Übergangseffekt */
        }

        .hidden {
            display: none;
        }

        .sub-section {
            margin-top: 10px; /* Abstand zwischen den Unterabschnitten */
        }

        .faded-text {
            font-size: smaller;
            color: #051a34; /* Dunkelblau */
            opacity: 0.7;
        }

        /* Hover-Effekte für die Eingabefelder */
        input[type="text"]:hover, textarea:hover, .weiter-btn:hover, button:hover,
        select:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Leichtes schwarzes Leuchten um den Rand */
        }

    	/* Stil für den Platzhalter in der Textarea */
    	textarea::placeholder {
   	     font-family: Arial, sans-serif; /* Schriftart für den Platzhalter */
   	     font-size: 14px; /* Schriftgröße für den Platzhalter */
 	     color: #000; /* Farbe des Platzhalters */
	     opacity: 0.7; /* Opazität des Platzhalters */
	}

	/* Buttons */
        button, button [type="submit"],
	.weiter-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #051a34; /* Dunkelblau */
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
            cursor: pointer;
        }
        /* Versteckter Inhalt zum Weiter-Button */
        .hidden-content1,
	.hidden-content3 {
            display: none;
        }


	/* Zeug_innen hinzufügen */
        .error-message {
            color: red;
            font-weight: bold;
        }

        .hidden {
            display: none;
        }


/* Infoboxen */

	.info-icon {
	    width: 20px;           /* Breite des Kreises */
	    height: 20px;          /* Höhe des Kreises */
	    border-radius: 50%;    /* Macht den Kreis rund */
	    background-color: #051a34; /* Hintergrundfarbe (z.B. Blau) */
	    color: white;          /* Textfarbe */
	    display: flex;         /* Flexbox für Zentrierung */
	    justify-content: center; /* Horizontale Zentrierung */
	    align-items: center;   /* Vertikale Zentrierung */
	    font-family: 'Courier New', Courier, monospace;
	    font-size: 18px;       /* Schriftgröße */
	    cursor: pointer;       /* Zeigt an, dass es anklickbar ist */
	    transition: background-color 0.3s; /* Übergangseffekt für die Hintergrundfarbe */
	}

	.info-icon:hover {
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Leichtes schwarzes Leuchten um den Rand */
	}

	.info-symbol {
	    display: inline-flex; /* Damit die Info-Symbole in einer Zeile angezeigt werden */
	    align-items: center; /* Vertikale Zentrierung */
	}

	.info-container {
	    display: flex; /* Flexbox aktivieren */
	    justify-content: center; /* Horizontale Zentrierung */
	}

	.hidden-info {
	    display: none; /* Klasse für versteckte Info-Kästen */
	}

	.visible-info {
	    display: block; /* Klasse für sichtbare Info-Kästen */
	    width: 90%; 
	    border: 1px solid #ccc; /* Rahmen für den Infokasten */
	    background-color: #eee; /* Hintergrundfarbe */
	    display: flex;
	    padding: 10px; /* Innenabstand */
	    margin-top: 10px; /* Abstand nach oben */
	}

/* Checkboxen */

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-container input {
    display: none; /* Versteckt die Standard-Checkbox */
}

.checkmark {
    width: 20px;       /* Breite der Box */
    height: 20px;      /* Höhe der Box */
    border: 2px solid #051a34; /* Rahmenfarbe */
    border-radius: 4px; /* Ecken abrunden */
    margin-right: 10px; /* Abstand zwischen Box und Text */
    position: relative;
    background-color: white; /* Hintergrundfarbe */
}

.checkbox-container input:checked + .checkmark {
    background-color: #051a34; /* Hintergrundfarbe bei aktiviertem Zustand */
}

.checkmark::after {
    content: "";
    position: absolute;
    display: none; /* Versteckt das Häkchen */
}

.checkbox-container input:checked + .checkmark::after {
    display: block; /* Zeigt das Häkchen an */
}

.checkbox-container .checkmark::after {
    left: 6px; /* Position des Häkchens */
    top: 1px; /* Position des Häkchens */
    width: 5px; /* Breite des Häkchens */
    height: 10px; /* Höhe des Häkchens */
    border: solid white; /* Farbe des Häkchens */
    border-width: 0 2px 2px 0; /* Form des Häkchens */
    transform: rotate(45deg); /* Häkchen drehen */
}

/* Accordion Mahr, Inhalte & Zeug_innen */

.accordion {
    width: 95%;
    margin: 0 auto;
    border-radius: 8px;
}

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

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    font-size: 18px;
    cursor: pointer;
    background-color: #051a34;
    color: white;
    border-radius: 4px;
}

.accordion-header:hover {
    background-color: #1e335a;
}

.accordion-content {
    display: none;
    padding: 15px;
    background-color: #c0f7ed;
    color: #051a34;
}

.arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #051a34;
    border-bottom: 2px solid #051a34;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.accordion-item.active .arrow {
    transform: rotate(225deg);
}

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

/* Tabellen*/

th {
    background-color: #fff;
    color: #051a34;
    text-align: left; /* Linksbündiger Text */
    padding: 10px; /* Innenabstand für Zellen */
}

tbody {
    background-color: #c0f7ed;
    color: #051a34;
    text-align: left; /* Linksbündiger Text */
}

td {
    padding: 10px; /* Innenabstand für Zellen */
    border: 0.5px solid #051a34; /* Rand um jede Zelle */
}

/* Standard-Linkfarbe in der Tabelle */
table a {
    color: #051a34;
    text-decoration: none; /* Kein Unterstrich */
    text-decoration: underline; /* Immer unterstrichen */
}

/* Hover-Effekt für Links in der Tabelle */
table a:hover {
    color: #fff;
    text-shadow: 0 0 3px #051a34;
    text-decoration: underline;
}

/* Klick-Effekt (aktive Links) in der Tabelle */
table a:active {
    color: #ffffff; /* Weiß */
    text-shadow: 0 0 3px #000;
    text-decoration: underline; /* Immer unterstrichen */

}


/* Header */

.logo {
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; /* Edle Schriftart */
            font-size: 35px;
            color: #d4a54d; /* Hellere Farbe, die an metallisches Gold erinnert */
            text-align: center; /* Zentriert den Text */
            text-transform: none; /* Keine Großbuchstaben */
            letter-spacing: 2px; /* Abstand zwischen Buchstaben */
            text-shadow: 
                2px 2px 5px rgba(0, 0, 0, 0.3),
                4px 4px 8px rgba(0, 0, 0, 0.3),
                6px 6px 10px rgba(0, 0, 0, 0.3); /* Mehrere Schatten für einen 3D-Effekt */
            background: linear-gradient(to right, #ffd700 10%, #d4a54d 30%, #ffd700 70%); /* Farbverlauf für Glanz und Schatten */
            -webkit-background-clip: text; /* Durchsichtige Texturierung für den Farbverlauf */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Textfarbe transparent machen */
            margin: 10px; 0;
        }

	.underline_nav {
	    position: -webkit-sticky; /* Für Safari */
	    position: sticky;
 	    background-color: #fff;
	    height: 2px;
	    width: 100%;
	    z-index: 899; /* Weniger als der Header, aber mehr als der Inhalt */
	}

/* CSS für das iFrame */
        #header-iframe {
            width: 100%;  /* Nimmt die volle Breite ein */
            border: none; /* Entfernt den Rahmen des IFrames */
            display: block; /* Verhindert Lücken unter dem IFrame */
            position: sticky;
            position: -webkit-sticky; /* Für Safari */
            top: 0px;
            background-color: rgba(5, 26, 52, 0.9);
            color: #fff;
            padding: 0px;
            text-align: center;
            height: 100px;
            overflow: hidden;
            line-height: 1.5;
	    z-index: 9;
        }

#footer-iframe {
            width: 100%;  /* Nimmt die volle Breite ein */
            border: none; /* Entfernt den Rahmen des IFrames */
            display: block; /* Verhindert Lücken unter dem IFrame */
            position: sticky;
            position: -webkit-sticky; /* Für Safari */
            background-color: #051A34;
            color: #fff;
	    padding-top: 1%;  
            font-size: 8px;
            text-align: center;
            position: fixed;
            bottom: 0;
	    height: 4.75%;
	    overflow: hidden;
}

/* Links auf dem ganzen Webseite */

a {
    color: white;
    text-decoration: underline;
}
a:hover,
a:active {
    background-color: #fff;
    color: #051A34;
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6); /* Weißer Schimmer */
    border-radius: 4px; /* Optional: abgerundete Ecken für den Effekt */
    transition: background-color 0.3s, box-shadow 0.3s; /* Sanfte Übergänge */
}

/* Überschriften */

h1, h2, h3, h4, strong {
    color: #c0f7ed;
}

title-container h1, h2, h3, strong {
    color: #051A34;
}


  /* Cookie-Banner Elemente für unscharfen Hintergrund und passende Box im Voredergrund */
  /* Stil für den unscharfen Hintergrund */
  .blurred {
    filter: blur(6px); /* Ändere den Wert, um die Stärke des Blurs anzupassen */
    pointer-events: none; /* Stellt sicher, dass Benutzer nicht auf unscharfe Elemente klicken können */
    z-index: 998;
  }

  /* Stil für den schwebenden Kasten */
  .floating-box {
    font-size: 12px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #051A34;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 999; /* Stellt sicher, dass der Kasten über allem anderen schwebt */
  }

.floating-box h2, h3, h4, strong {
    color: #c0f7ed;
}

  .scrollable-content {
    max-height: 200px; /* Höhe der Scrollbox */
    overflow-y: auto; /* Vertikales Scrollen aktivieren */
  }

        /* Menü Button */
        .floating-menu {
            position: fixed;
            top: 5px;
            right: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 919;
        }

        /* Cookie Button */
        .floating-cookie {
            position: fixed;
            bottom: 10px;
            left: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 919;
        }
        /* Kreise */
        .floating-circles {
            position: fixed;
            bottom: 40px;
            right: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1;
        }

        .circle {
            width: 50px;
            height: 50px;
            background-color: #fff;
            color: #051A34;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            text-decoration: none;
        }
        .circle:hover {
            box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
            background-color: #fff;
            border-radius: 50%;
            color: #051A34;
        }

        .circle:active {
            box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
            background-color: #fff;
            border-radius: 50%;
            color: #051A34;
        }

/* Im HTML Datenschutz, die Erklärung aus Datei aufrufen in folgende Box */
  .scrollable-content2 h2 {
    	    color: #c0f7ed;
  }

/* Animation für das Menü */
@keyframes slideIn {
    from {
        left: 100%; /* Startpunkt außerhalb des Bildschirms rechts */
    }
    to {
        left: calc(100% - 340px); /* Endpunkt am gewünschten Platz, angepasst an die Breite des Quadrats */
    }
}

/* Klasse für das Menü */
#black-square.slide-in {
    animation: slideIn 0.5s ease-out forwards; /* 0.5s für die Dauer, kannst du anpassen */
    z-index: 10;
    width: 300px;
    height: 100%;
    position: sticky;
    background-color: #c0f7ed;
    color: #051A34;
    padding: 20px;
    overflow-y: auto;
    display: block; /* Sicherstellen, dass das Element als Block angezeigt wird */
}

/* Kategorie-Überschriften: größerer Text, dickere Linie oben */
.header a {
    font-size: 1.4em; /* größere Schriftgröße für Überschriften */
    font-weight: bold;
    display: block;
    padding: 10px 0;
    border-top: 2px solid #051A34; /* dicke Linie für Kategorien */
    color: #051A34;
    text-decoration: none;
}

/* Einträge in den Unterkategorien: normaler Text, dünnere Linie */
.content {
    font-size: 1em;
    padding: 5px 0;
    border-top: 1px solid #38e5a1; /* dünne Linie für Einträge */
    margin-left: 15px;
}

.content a {
    color: #051A34;
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

        .custom-button {
            background-color: #c0f7ed; /* Hellblaue Hintergrundfarbe */
            color: #051a34; /* Dunkelblaue Schriftfarbe */
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .custom-button:hover {
            box-shadow: 0 0 10px 2px white; /* Weißer Schein bei Hover */
        }

        .custom-button:active {
            box-shadow: 0 0 15px 4px white; /* Weißer Schein bei aktivem Klick */
            transform: scale(0.98); /* Leichte Verkleinerung bei Klick */
        }

// Akkordeon bei Info/Übersicht zu Nikah

/* Grundstruktur für das Akkordeon */
.faq-nikah {
    width: 100%;
    max-width: 600px;
    margin: 15px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(250, 250, 250, 0.1);
}

.faq-nikah summary {
    color: #FFF;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.faq-nikah summary:hover {
    color: #c0f7ed;
    font-weight: bold;
}

.faq-nikah[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-nikah[open] {
    outline: 1px solid #c0f7ed;
    border-radius: 8px;
}

.faq-nikah summary:focus {
    outline-offset: 2px;
    color: #c0f7ed;
    font-weight: bold;
}

.faq-nikah p {
    padding: 10px 10px;
    margin: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #FFF;
}

    iframe#bestellFrame {
      width: 100%;
      height: 800px; /* Höhe anpassen */
      border: none;
    }