.custom-card {
    padding: 20px;
    border-radius: 15px; /* Abgerundete Ecken wie in der Vorlage */
    /* Semi-transparenter Hintergrund (rgba: 0.1 Deckkraft) */
    background-color: rgba(0, 0, 0, 0); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.202);
    /* Der magische Blur-Effekt */
    backdrop-filter: blur(30px); 
    /*Ein feiner, Sorgt für gleich hohe Karten im Bootstrap*/ 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    height: 100%;
    /* NEU: Erzwingt Hardware-Beschleunigung gegen Flackern */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* NEU: Isoliert die Karte vom Hintergrund (Stoppt das Flackern) */
    isolation: isolate;
    position: relative;
    z-index: 1;
}

/* Bild-Styling innerhalb der Custom-Card */
/* Statisches Bild-Styling */
.custom-card-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    /* Keine Transition oder Transform mehr vorhanden */
}

/* Hover-Effekt nur für den Rahmen und Glow, keine Bewegung */
.custom-card:hover {
    border-color: var(--bloom-color);
    box-shadow: 0 0 20px rgba(255, 238, 0);
    /* transform: translateY(-5px); <-- Entfernt, falls die ganze Karte stillstehen soll */
}

/* Bootstrap Textfarben wurden im HTML verwendet: 
.text-success -> Grün für "Einfach & effektiv"
.text-info -> Blau für "Unterschied"
.text-primary -> Violett/Pink für "Muslime"
.text-warning -> Gelb für "Hadith-Sammlung" */

.skewed-badge {
    background-color: #2f2f35b0; /* Dunkelgrüner Hintergrund */
    border: 2px solid #00ff00; /* Hellergrüner Rahmen */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 0 20px rgb(255, 238, 0); /* Leuchteffekt */
    /* Die Box um -10 Grad neigen */
    transform: skewX(-10deg); 
    display: inline-block;
}

.badge-content {
    /* Den Inhalt um +10 Grad zurückneigen, um ihn gerade anzuzeigen */
    transform: skewX(10deg); 
}

.skewed-badge p {
    /* Farben aus dem Bild */
    color: #ffd000; 
}

.skewed-badge .h1 {
    font-weight: 900; /* Extra fett */
}

.skewed-badge .m-0 {
    font-style: italic; /* Kursiver Stil für die untere Zeile */
    border-top: 1px solid #ffcc00; /* Gelbe Linie */
    padding-top: 5px;
    margin-top: 5px !important;
}

/* Animation für Mobile: Kurz zeigen, dann zusammenklappen */
@keyframes mobileBadgeFade {
    0% { opacity: 1; max-height: 600px; margin-bottom: 1rem; } /* Platz erhöht, damit Logo ganz zu sehen ist */
    70% { opacity: 1; max-height: 600px; margin-bottom: 1rem; } 
    100% { opacity: 0; max-height: 0; margin-bottom: 0; padding: 0 !important; border: none; } /* Verschwindet komplett */
}

/* NEU: Korrektur-Animation mit Transform (Umgeht das !important Problem) */
@keyframes mobileTextSlide {
    0% { transform: translateY(0); }
    70% { transform: translateY(0); } /* Warten bis Logo verschwindet */
    100% { transform: translateY(40px); } /* Schiebt den Text wieder runter auf Normalposition */
}

/* Mobile Anpassung für das 100% HALAL Badge */
@media (max-width: 768px) {
    .skewed-badge {
        padding: 10px !important;
        max-width: 100%; /* Verhindert, dass es über den Rand ragt */
        overflow: hidden; /* Wichtig, damit der Text beim Zusammenklappen nicht übersteht */
        
        /* Animation starten: 5 Sekunden Gesamtdauer, bleibt am Ende weg (forwards) */
        animation: mobileBadgeFade 5s forwards ease-in-out;
    }
    .skewed-badge .h1 {
        font-size: 1.5rem !important; /* Schrift deutlich kleiner */
    }
    .skewed-badge .m-0 {
        font-size: 0.7rem !important; /* Untertitel kleiner */
    }

    /* Logo (neben dem Text) auch ausblenden */
    .custom-card .col-md-3 {
        overflow: hidden;
        animation: mobileBadgeFade 8s forwards ease-in-out;
        margin-top: -40px !important; /* Logo etwas höher ziehen */
    }

    /* FIX für Header: Kein Grid, sondern untereinander & volle Breite */
    .custom-card .header-row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* FIX für Header: Negativen Abstand entfernen, damit es nicht über die Navbar rutscht */
    .custom-card .header-row .col-md-9 {
        margin-top: -85px !important; /* Text weiter nach oben ziehen */
        width: 100% !important; /* Text nutzt den ganzen Platz */
        animation: mobileTextSlide 8s forwards ease-in-out; /* Animation aktivieren */
    }
}

/* 2. Modernes Button-Styling */
.modern-btn {
  /* Link-Standard-Styling entfernen */
  text-decoration: none; /* Entfernt die Unterstreichung */
  color: #212529;        /* Dunkler Text statt Blau */
  
  /* Form und Farbe */
  background-color: #ffca28; /* Modernes Sonnengelb */
  padding: 16px 32px;
  border-radius: 12px;   /* Sanft abgerundete Ecken */
  display: inline-block;
  
  /* Schrift-Details */
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  
  /* Schatten und Übergänge */
  box-shadow: 0 4px 15px rgba(255, 202, 40, 0.4);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. Interaktionen */
.modern-btn:hover {
  background-color: #ffd54f; /* Etwas helleres Gelb */
  color: #000000;            /* Text bleibt dunkel */
  transform: translateY(-3px); /* Hebt sich leicht an */
  box-shadow: 0 8px 20px rgba(255, 202, 40, 0.6);
  text-decoration: none;      /* Stellt sicher, dass kein Unterstrich erscheint */
}

.modern-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 202, 40, 0.4);
}

/* AKKORDEON STYLING (BOOTSTRAP ÜBERSCHREIBEN) */
.accordion-item {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border) !important;
    margin-bottom: 12px;
    border-radius: 15px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-button {
    background: transparent !important;
    color: var(--bloom-color) !important;
    font-weight: 600;
    box-shadow: none !important;
    padding: 1.2rem;
}
/* Bootstrap Pfeil-Farbe auf Gold anpassen */
.accordion-button::after {
    filter: invert(85%) sepia(50%) saturate(1000%) hue-rotate(350deg);
}


.accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgb(255, 184, 5) !important; /* Deine Gold-Farbe */
}

.accordion-body {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--glass-border);
}

/* Glow für die Regel-Boxen beim Hover */
.accordion-item:hover {
    border-color: var(--bloom-color) !important;
    box-shadow: 0 0 20px rgba(255, 217, 0, 0.2);
}


/* Bilder im Accordion-Header (neben dem Titel) */
.rule-icon {
    width: 35px; height: 35px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
    border: 1px solid var(--bloom-color);
}

/* Vergrößert das Icon leicht, wenn die Regel offen ist */
.accordion-button:not(.collapsed) .rule-icon {
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--bloom-color);
}

/* Bild innerhalb der Regel (Content) */
.rule-content-img {
    width: 100%;
    max-width: 400px;
    border-radius: 15px;
    margin-top: 15px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Flexbox für den Header, damit Bild und Text fluchten */
.accordion-button {
    display: flex !important;
    align-items: center !important;
}

/* Styling für das Bild im rechten Bereich */
.rule-collapse-img {
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

/* Kleiner Zoom-Effekt beim Öffnen */
.accordion-item:not(.collapsed) .rule-collapse-img {
    transform: scale(1.05);
}

/* Fix gegen Bildstörung/Zittern */
.accordion-item, .nav-container {
    backface-visibility: hidden;
    will-change: transform;
}


/* Mobile Optimierung: Bild unter den Text schieben, wenn der Platz nicht reicht */
/* 4. Texte skalieren, damit sie in die 70%-Spalte passen */
.custom-card h1 {
    font-size: 1.6rem !important; /* Hauptüberschrift deutlich größer */
    line-height: 1.2;
    margin-bottom: 10px;
}

.custom-card h2 {
    font-size: 1.2rem !important;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    /* 1. Die Card nutzt die volle Breite des Handys */
    .custom-card {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    /* 2. Layout-Anpassung: Inhalte untereinander stapeln statt nebeneinander quetschen */
    /* FIX: Search-Cards ausschließen, damit sie 2-spaltig bleiben */
    .custom-card:not(.search-card) .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    /* 3. Bootstrap-Spalten neutralisieren (damit sie nicht stapeln) */
    .custom-card .col-md-8, 
    .custom-card .col-md-4 {
        width: 100% !important;
        padding: 0 15px !important; /* Erzwingt 15px Abstand links und rechts */
        flex: none !important;
    }

    /* 4. Texte skalieren für bessere Lesbarkeit auf Handys */
    .custom-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: 8px;
    }
    .custom-card h4, .custom-card h5 {
        font-size: 1.05rem !important;
        line-height: 1.4;
    }

    .custom-card p, .custom-card li {
        font-size: 1rem !important; /* Fließtext auf Standardgröße */
        line-height: 1.5;
        margin-bottom: 12px;
    }

    /* 5. Bild in der 30%-Spalte fixieren */
    .custom-card-img, .rule-collapse-img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* 6. Button kompakt machen */
    .modern-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
        }
    
    /* SICHERHEIT: Verhindert, dass Buttons trotz d-none angezeigt werden */
    .modern-btn.d-none {
        display: none !important;
    }

    /* 7. Accordion Schriftgrößen anpassen */
    .accordion-button h3 {
        font-size: 1.1rem !important; /* Titel deutlich kleiner */
    }
    
    .accordion-body p, .accordion-body .fs-5 {
        font-size: 1rem !important; /* Text auf Standardgröße reduzieren */
    }

    /* 8. Vertrag/Checkbox Bereich mobil optimieren */
    #contractSection .p-5 {
        padding: 1.5rem !important; /* Viel weniger Innenabstand als p-5 */
        margin-top: 1.5rem !important;
    }

    #acceptContract {
        width: 2.5rem !important; /* Checkbox kleiner */
        height: 2.5rem !important;
        flex-shrink: 0; /* Verhindert Quetschen */
    }

    #acceptContract:checked::before {
        font-size: 1.5rem !important; /* Haken kleiner */
    }

    .form-check-label {
        font-size: 1.1rem !important; /* Text kleiner */
        margin-left: 10px !important;
    }

    #submitBtn {
        font-size: 1.2rem !important; /* Button-Text kleiner */
        padding: 15px !important;      /* Button kompakter */
        width: 100% !important;        /* Volle Breite */
    }
}

/* Styling für die Icons in den Karten */
.icon-circle i {
    color: var(--bloom-color); /* Deine Gold-Farbe */
    font-size: 1.5rem;         /* Größe des Icons */
    
    /* Der Bloom-Effekt: Ein sanftes Leuchten um das Icon */
    filter: drop-shadow(0 0 5px var(--bloom-color)); 
}

.gender-card i {
    filter: drop-shadow(0 0 5px currentColor);
}

/* --- SUCHE STARTEN BUTTON (Pulsierender Umriss) --- */
.btn-start-search {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3); /* Start-Rahmen */
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.5);
    animation: pulseBorder 2s infinite; /* Endlos-Animation */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

.btn-start-search:hover {
    background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%) !important;
    transform: translateY(-3px) scale(1.02);
}

@keyframes pulseBorder {
    0% { box-shadow: 0 0 10px rgba(0, 198, 255, 0.4); border-color: rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 30px rgba(0, 198, 255, 0.9), 0 0 15px rgba(255, 255, 255, 1); border-color: #ffffff; }
    100% { box-shadow: 0 0 10px rgba(0, 198, 255, 0.4); border-color: rgba(255, 255, 255, 0.3); }
}

/* --- ÜBER UNS BUTTON (Pulsierend Gold) --- */
.btn-pulse-gold {
    border: 2px solid rgba(255, 255, 255, 0.1); /* Start-Rahmen */
    animation: pulseGoldBorder 2s infinite;
}

@keyframes pulseGoldBorder {
    0% { box-shadow: 0 0 15px rgba(255, 202, 40, 0.4); border-color: rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 35px rgba(255, 202, 40, 0.8), 0 0 10px rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.8); }
    100% { box-shadow: 0 0 15px rgba(255, 202, 40, 0.4); border-color: rgba(255, 255, 255, 0.1); }
}

/* --- SCROLL NAVIGATION BUTTONS (Rechts unten) --- */
.scroll-nav-container {
    position: fixed;
    top: 80%;
    transform: translateY(-50%);
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Pfeilen */
}

.scroll-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); /* Dunkles Glas */
    border: 2px solid var(--bloom-color);
    color: var(--bloom-color);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.scroll-btn:hover {
    background: var(--bloom-color);
    color: #000; /* Text wird schwarz für Kontrast */
    box-shadow: 0 0 25px var(--bloom-color);
    transform: scale(1.1);
}

/* Button deaktiviert (ausgegraut & nicht klickbar) */
.disabled-btn {
    pointer-events: none; /* Verhindert Klicks */
    opacity: 0.4;         /* Macht ihn transparent/dunkel */
    filter: grayscale(100%); /* Entfernt die Farbe */
    box-shadow: none !important; /* Kein Leuchten */
}

/* Mobile Anpassung für Scroll-Buttons */
@media (max-width: 768px) {
    .scroll-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .scroll-nav-container {
        right: 15px;
    }
}

/* Icon Rotation für Filter-Collapse */
.transition-icon {
    transition: transform 0.3s ease;
}
[aria-expanded="true"] .transition-icon {
    transform: rotate(180deg);
}

/* --- NEU: EID CHECKBOX (Für den Schwur bei Allah) --- */
.oath-container {
    background: rgba(255, 217, 0, 0.05);
    border: 1px solid rgba(255, 217, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.oath-container:hover {
    background: rgba(255, 217, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 217, 0, 0.2);
}

.oath-check {
    width: 1.5em;
    height: 1.5em;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--bloom-color); /* Goldene Checkbox */
}

/* --- NEU: KONTAKT ICON VERSCHÖNERUNG --- */
.button-wrapper a[title="Kontakt"] svg {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 2px rgba(255, 184, 5, 0.5));
}

.button-wrapper a[title="Kontakt"]:hover svg {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 0 10px rgba(255, 184, 5, 0.8));
}

/* Hover Effekt für Links */
.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}

/* Fix für Input-Groups mit Glass-Input (damit Ecken sauber sind) */
.input-group .glass-input:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .glass-input:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Animation für Online-Status Punkt */
@keyframes onlinePulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- DRINGENDES BLINKEN (WICHTIG) --- */
@keyframes urgentFlash {
    0% { opacity: 1; transform: scale(1); text-shadow: 0 0 10px rgba(255, 0, 0, 0.5); }
    50% { opacity: 0.7; transform: scale(1.02); text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 10px rgba(255, 0, 0, 0.5); }
}

.blink-urgent {
    animation: urgentFlash 1.5s infinite ease-in-out;
}

/* --- FIX: ALLE ZEIGEN BUTTON (GELB) --- */
/* Dieser Code steht am Ende, um sicherzustellen, dass er angewendet wird */
.btn-outline-all {
    color: var(--bloom-color);
    border-color: var(--bloom-color);
    background: rgba(255, 217, 0, 0.1);
    font-weight: 700;
    font-size: 1.1rem; /* Größere Schrift */
    padding: 10px 25px; /* Mehr Innenabstand */
}

.btn-outline-all:hover {
    background: var(--bloom-color);
    color: #000000;
    box-shadow: 0 0 15px rgba(255, 217, 0, 0.5);
    transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
}

/* Video/Iframe Styling im Modal (Abgerundete Ecken & Glow) */
.ratio iframe {
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- STATUS TOAST (Unten Rechts) --- */
.custom-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000; /* Erhöht, damit es über dem Device-Overlay liegt */
    min-width: 300px;
    max-width: 350px;
    background: rgba(16, 20, 30, 0.95); /* Sehr dunkles Blau/Schwarz */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--bloom-color);
    border-left: 5px solid var(--bloom-color); /* Dickerer Rand links */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(255, 217, 0, 0.1);
    padding: 15px;
    color: white;
    
    /* Animation: Von rechts reinrutschen */
    transform: translateX(120%);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

.custom-toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* NEU: Auf dem Handy die Nachricht mittig anzeigen, damit man sie besser sieht */
@media (max-width: 768px) {
    .custom-toast {
        left: 50%;
        right: auto; /* Rechts-Positionierung aufheben */
        bottom: 20px;
        transform: translateX(-50%) translateY(120%); /* Startposition (versteckt unten) */
        width: 90%; /* Fast volle Breite */
        max-width: none;
    }
    .custom-toast.show {
        transform: translateX(-50%) translateY(0); /* Endposition (sichtbar) */
    }
}

/* --- FINALE LÖSUNG: BUTTON-STEUERUNG "ÜBER UNS" --- */
/* Diese Regeln steuern die Sichtbarkeit der Buttons auf der "Über uns"-Seite.
   Sie sind stabiler als die vorherige JavaScript-Lösung. */

/* Standard (Ausgeloggt): "Mein Profil" ist versteckt, "Regeln" ist sichtbar. */
body:not(.status-logged-in) #btnProfileFromAbout { display: none !important; }
body:not(.status-logged-in) #btnToRules { display: inline-block !important; }

/* Zustand Eingeloggt: "Mein Profil" wird sichtbar, "Regeln" wird versteckt. */
body.status-logged-in #btnProfileFromAbout { display: inline-block !important; }
body.status-logged-in #btnToRules { display: none !important; }

/* --- NEU: ADMIN BEREICH STEUERUNG --- */
/* Standardmäßig sind Admin-Elemente versteckt. */
.admin-only {
    display: none !important;
}

/* Wenn der Body die Klasse .status-admin hat, werden sie sichtbar. */
body.status-admin .admin-only {
    display: block !important; /* oder 'flex', 'inline-block' etc., je nach Element */
}

/* --- UPDATE GLOW ANIMATION FÜR ADMIN PANEL --- */
@keyframes glowUpdate {
    0% { box-shadow: 0 0 5px rgba(255, 217, 0, 0.2); border-color: rgba(255, 217, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 217, 0, 0.8); border-color: #ffd900; }
    100% { box-shadow: 0 0 5px rgba(255, 217, 0, 0.2); border-color: rgba(255, 217, 0, 0.3); }
}

.glow-update {
    animation: glowUpdate 1.5s infinite ease-in-out;
    position: relative;
    z-index: 5;
}

/* NEU: Leucht-Effekt für die Tabs im Admin-Panel */
.glow-update-tab {
    animation: glowUpdate 1.5s infinite ease-in-out;
    background-color: rgba(255, 217, 0, 0.2) !important;
    border-color: #ffd900 !important;
}