.jin {
    position: relative;
    line-height: 24px;
    padding: 0 1rem;
    border-bottom: 3px solid #35454a;
    color: #5e5e5e;
    text-align: center;
    margin-bottom: 30px;
    /* text-transform: uppercase; */
    letter-spacing: 4px;
    font-family: 'UnifrakturMaguntia';
    font-size: 32px;
    font-weight: 500;
    text-shadow: 0px 1px 0px black;
}

.jin::before,
.jin::after {
    position: absolute;
    left: 50%;
    transform:translate(-50%);
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.jin::before {
    background-color: #35454a;
}

.jin::after {
    bottom: -11px;
    background-color: #191f20;
}


.mybb-header-container {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 10px 0;
    }

    /* Die kalligraphische Schriftart mit Schatten */
    .mybb-header-title {
        font-family: "Fleur De Leah", cursive !important;
        font-size: 54px !important;
        color: #d4a5a5 !important; /* Altrosa */
        
        /* HIER IST DER NEUE SCHATTEN */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important; 
        
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0.8 !important; /* Zieht den Text nah an die Ranke */
        position: relative;
        z-index: 2;
    }

    /* Die Blumenranke von Imgur */
    .mybb-header-image {
        width: 100%;
        max-width: 400px; /* Breite der Ranke */
        height: 50px;     /* Höhe des Bildbereichs */
        
        background-image: url(https://i.imgur.com/dxipS6p.png);
        
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        
        /* Schiebt die Ranke nach oben, damit sie die Schrift fast berührt */
        margin-top: -26px !important; 
        position: relative;
        z-index: 1;
    }

.divider-box {
        text-align: center !important;
        margin: 30px auto !important;
        width: 100% !important;
        display: block !important;
    }

    .elegant-line {
        display: inline-block !important;
        /* Die Linie wird dünner (2px) */
        height: 2px !important;
        width: 95% !important;
        max-width: 500px !important;

        /* Ein 3-Stufen-Verlauf: 
           Transparent -> Pastelgrün -> Transparent */
        background: linear-gradient(to right, 
            rgba(178, 194, 162, 0) 0%, 
            rgba(178, 194, 162, 1) 50%, 
            rgba(178, 194, 162, 0) 100%) !important;

        border: none !important;
        /* Ein extrem zarter Glow statt eines harten Schattens */
        box-shadow: 0 1px 2px rgba(178, 194, 162, 0.3) !important;
    }


.rosen-list-row {
        display: table !important;
        width: auto !important;
        margin-bottom: 10px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    /* Die Blüte als Tabellenzelle links */
    .rosen-bullet-cell {
        display: table-cell !important;
        vertical-align: middle !important; /* Zentriert die Blüte zum Text */
        padding-right: 12px !important;    /* Abstand zum Text */
        color: #d4a5a5 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        text-shadow: 0 0 4px rgba(212, 165, 165, 0.4) !important;
        white-space: nowrap !important;    /* Verhindert Umbruch der Blüte */
    }

    /* Der Text als Tabellenzelle rechts */
    .rosen-text-cell {
        display: table-cell !important;
        vertical-align: middle !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }



@import url(https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Great+Vibes&display=swap);

.guru-header-container {
  text-align: center;
  padding: 20px;
  background: transparent; /* Passt sich jedem Hintergrund an */
}

.guru-title {
  /* Spirituelle, edle Schriftart */
  font-family: 'Cinzel', serif; 
  font-size: 20px;
  font-weight: 500;
  color: #fff9e6; /* Ganz helles Creme-Gold */
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 3px;
  
  /* Der Heiligenschein-Effekt (Glow) */
  text-shadow: 
    0 0 10px rgba(255, 215, 0, 0.8),  /* Goldener Kern */
    0 0 20px rgba(255, 223, 0, 0.5),  /* Mittlerer Schein */
    0 0 40px rgba(255, 255, 255, 0.3); /* Weißer Außenkranz */
}

.fancy-line {
    margin: 10px auto;
    width: 83%;
    height: 2px;
    background: linear-gradient(to right, transparent, #ffd700, #fff9e6, #ffd700, transparent);
    position: relative;
}

/* Das kleine Extra-Symbol in der Mitte der Linie */
.fancy-line::after {
  content: '✧'; /* Ein spiritueller Stern/Funke */
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffd700;
  font-size: 1.5rem;
  text-shadow: 0 0 10px #fff;
}

.halo-line-pure {
    /* Abstand oben und unten */
    margin: 20px auto; 
    /* Breite der Linie */
    width: 97%; 
    /* Dicke der Linie */
    height: 2px; 
    
    /* Der magische Farbverlauf: Transparent -> Gold -> Weiß-Gold -> Gold -> Transparent */
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 215, 0, 0.4), 
        #ffd700, 
        #fff9e6, 
        #ffd700, 
        rgba(255, 215, 0, 0.4), 
        transparent
    ); 

    /* Ein weicher Glow-Effekt, der die Linie umgibt */
    box-shadow: 0 0 10px rgba(255, 223, 0, 0.5);
    
    /* Macht die Enden der Linie etwas runder/weicher */
    border-radius: 2px;
}







.lenora-header-news {
    text-align: center;
    padding: 0px 0px;
    max-width: 650px;
    margin: 0 auto;
    background: transparent;
}

.news-headline {
    font-family: 'UnifrakturCook', serif;
    font-size: 63px; /* Schön groß und präsent */
    color: #1a1a1a; /* Ein fast-schwarzes Anthrazit für den Zeitungs-Look */
    line-height: 0.9;
    text-shadow: 2px 2px 0px rgba(139, 0, 0, 0.2); /* Ganz dezenter blutiger Schatten */
    margin-bottom: 0px;
    letter-spacing: -1px;
}

.news-line {
    height: 3px;
    background: #1a1a1a;
    width: 80%;
    margin: 3px auto;
    /* Doppelte Linie für den klassischen Zeitungs-Look */
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
}

.news-caps {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 4px; /* Weites Spacing für einen edlen, kühlen Look */
    color: #555;
    margin-top: 6px;
    line-height: 1.6;
}






/* Container-Setting (transparent & zentriert) */
.coke-profile-header {
    padding: 0px 0;
    text-align: center;
    background: transparent; /* Kein Hintergrund */
}

/* Die Hauptüberschrift (Coca-Cola Style) */
.coke-text-main {
    font-family: 'Pacifico', cursive;
    font-size: 39px;
    color: #6f372b; /* Coke-Rot */
    line-height: 1.1;
    margin: 0;
    /* Ein weißer Umriss sorgt für bessere Lesbarkeit auf jedem Grund */
    text-shadow: 2px 2px 0px #717171, 4px 4px 0px rgba(0,0,0,0.1);
    transform: rotate(-2deg); /* Der typische dynamische Schwung */
    display: block;
}

/* Unterüberschrift (80er Jahre Light-Stil) */
.coke-text-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10px;
    color: #959595; /* Silber-Grau */
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 5px;
    display: block;
}

/* Die markante rote Linie */
.coke-divider {
    height: 3px;
    background: #6f372b;
    width: 304px;
    margin: 10px auto 0;
    border-radius: 50px;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
}





/* Cool gestylte Trennlinie */
.funfact-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
    width: 80%; /* Breite der Trennung */
}

/* Die Linie selbst mit Verlauf-Effekt */
.funfact-separator::before,
.funfact-separator::after {
    content: "";
    flex: 1;
    height: 2px;
    /* Verlauf von Transparent zu deiner Wunschfarbe #6f372b */
    background: linear-gradient(to var(--direction, right), transparent, #6f372b);
}

.funfact-separator::after {
    --direction: left;
}

/* Das Zierelement in der Mitte */
.funfact-separator-icon {
    width: 10px;
    height: 10px;
    background-color: #6f372b;
    transform: rotate(45deg); /* Macht aus dem Quadrat einen Diamanten */
    margin: 0 15px;
    box-shadow: 0 0 5px rgba(111, 55, 43, 0.4);
}






/* Google Fonts Einbindung */
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@800&family=JetBrains+Mono:wght@300&display=swap);

.noir-investigation-box {
    display: inline-block;
    padding: 20px 40px 20px 15px;
    border-left: 12px solid #1a1a1a; /* Die "schwere" Kante links */
    background: linear-gradient(90deg, #f4f4f4 0%, transparent 100%);
    position: relative;
    margin: 20px 0;
}

/* Die Hauptüberschrift: Massiv und stylisch */
.noir-title {
    font-family: 'Syne', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 0.9;
    text-transform: none; /* Keine Capslock hier, wie gewünscht */
    letter-spacing: -2px;
    position: relative;
    z-index: 2;
}

/* Die Unterüberschrift: Technisch, klein, weit gespreizt */
.noir-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #8b0000; /* Tiefes Blutrot */
    text-transform: uppercase;
    letter-spacing: 8px; /* Extrem weit für den High-Fashion/Noir Look */
    margin-top: 12px;
    display: block;
    opacity: 0.8;
}

/* Die stylische Linie: Versetzt und zweifarbig */
.noir-accent-line {
    margin-top: 15px;
    width: 140%; /* Geht über den Text hinaus für Dynamik */
    height: 2px;
    background: #1a1a1a;
    position: relative;
}

.noir-accent-line::after {
    content: "";
    position: absolute;
    top: 4px; /* Versetzt unter der Hauptlinie */
    left: 20px;
    width: 40px;
    height: 5px;
    background: #8b0000; /* Ein roter "Zensurbalken"-Akzent */
}










/* Der Haupt-Container: Zentriert alles */
    .lust-container {
        text-align: center; /* Zentrierung */
        margin: 20px auto;
        padding: 0px;
        display: block;
        width: 100%;
    }

    /* Hauptüberschrift: Graffiti Style */
    .lust-graffiti {
        font-family: 'Permanent Marker', cursive;
        font-size: 35px; /* Mittelgroß - nicht zu klein, nicht zu groß */
        color: #ff0022; /* Sattes, verruchtes Rot */
        display: inline-block;
        position: relative;
        line-height: 1;
        /* LED-Schimmer */
        text-shadow: 
            0 0 10px #ff0000, 
            0 0 20px #8b0000,
            2px 2px 0px #000; /* Schwarze Kante für den Kontrast */
        transition: all 0.3s ease;
    }

    /* Die kleinere Capslock-Schrift darunter */
    .lust-caps {
        font-family: 'Oswald', sans-serif;
        font-size: 11px;
        color: #660000;
        text-transform: uppercase;
        letter-spacing: 8px; /* Verrucht weit auseinander */
        display: block;
        margin-top: 5px;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }

    /* "Accessoires": Kleine rote Diamanten oder Handschellen */
    .lust-graffiti::before, .lust-graffiti::after {
        content: ' ⛓ '; /* Handschellen/Kette */
        font-size: 20px;
        color: #444;
        vertical-align: middle;
        opacity: 0.6;
        text-shadow: none;
    }

    /* Ein leichter Puls-Effekt für das "LED" Glühen */
    .lust-graffiti {
        animation: led-pulse 2s infinite alternate;
    }

    @keyframes led-pulse {
        from { text-shadow: 0 0 8px #ff0000, 0 0 15px #8b0000, 2px 2px 0px #000; }
        to { text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0033, 2px 2px 0px #000; }
    }




.holly-header-container {
        background: #1a1a1a; /* Dunkler Hintergrund für den Kontrast */
        padding: 20px 20px;
        text-align: center;
        border: 2px solid #333;
        position: relative;
        overflow: hidden;
        max-width: 600px;
        margin: 0px 0px 10px 0px;
        font-family: 'Bebas Neue', sans-serif;
    }

    /* Der "Abgefuckt" Effekt: Grunge-Textur im Hintergrund (optional) */
    .holly-header-container::before {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: url(https://www.transparenttextures.com/patterns/asphalt-dark.png);
        opacity: 0.4;
        pointer-events: none;
    }

    .holly-title {
        font-family: 'Permanent Marker', cursive;
        font-size: 33px;
        color: #e6e6e6;
        text-transform: uppercase;
        transform: rotate(-3deg); /* Leichte Schräglage für den Rebell-Look */
        display: block;
        line-height: 1;
        margin-bottom: 10px;
        text-shadow: 3px 3px 0px #cf1b1b; /* "Glitch" oder Blut-Effekt-Schatten */
        letter-spacing: 2px;
    }

    .holly-subtitle {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 11px;
        color: #888;
        letter-spacing: 5px;
        text-transform: uppercase;
        display: block;
        border-top: 1px solid #444;
        border-bottom: 1px solid #444;
        padding: 5px 0;
        width: fit-content;
        margin: 0 auto;
    }

    .skateboard-icon {
        font-size: 12px;
        color: #444;
        margin-top: 15px;
        display: block;
        opacity: 0.6;
    }





.haejin-header {
    padding: 0px 0px;
    text-align: center;
    transition: all 0.5s ease;
}

.main-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 34px;
    letter-spacing: 1px;
    color: #8e9aaf;
    margin: 0;
    padding: 0;
    /* Sanfter Schatten für mehr Tiefe */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 0 0 10px rgba(142, 154, 175, 0.2);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
}

/* Hover-Effekt: Die Schrift weitet sich leicht und wird heller */
.main-title:hover {
    letter-spacing: 6px;
    color: #b8bedd;
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
}

.sub-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 16px;
    color: #b8bedd;
    margin-top: -5px;
    letter-spacing: 2px;
    opacity: 0.8;
    transition: opacity 0.6s ease;
}

/* Wenn man über den Header fährt, wird auch die Unterzeile deutlicher */
.haejin-header:hover .sub-title {
    opacity: 1;
}

.divider {
    margin: 0 10px;
    opacity: 0.5;
}





.roxie-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 0;
    background: transparent;
}

/* Massiv, groß, wie eine Mauer */
.top-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 55px;
    color: #ffffff9e;
    line-height: 0.8; /* Zieht die Buchstabenbox eng zusammen */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Die untere Schrift, die von unten in die obere "hineinfließt" */
.bottom-title {
    font-family: 'Staatliches', sans-serif;
    font-size: 16px;
    color: #6b6555;
    text-transform: uppercase;
    
    /* Spiegelung auf dem Kopf */
    transform: scaleY(-1);
    
    /* Hier passiert das "Hineinfließen": 
       Ein negativer Margin, der genau so austariert ist, 
       dass die Oberkanten (jetzt Unterkanten) sich überschneiden */
    margin-top: -11px; 
    
    letter-spacing: 15px; /* Breiter gezogen als oben für den Kontrast */
    opacity: 0.8;
    transition: all 0.4s ease;
    mix-blend-mode: lighten; /* Sorgt dafür, dass die Farben cooler ineinanderlaufen */
}

/* Hover-Effekt: Wenn Roxie die Scharade beendet */
.roxie-header:hover .bottom-title {
    color: #ff0000;
    opacity: 1;
    margin-top: -22px; /* Schiebt sich beim Hover noch ein Stück tiefer rein */
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
}

/* Responsive für Handys */
@media (max-width: 768px) {
    .top-title { font-size: 70px; }
    .bottom-title { font-size: 22px; margin-top: -8px; letter-spacing: 8px; }
}





/* Container */
    .catalina-profile-header {
        text-align: center;
        padding: 0px 0px;
        max-width: 600px;
        margin: 0 auto;
        cursor: crosshair;
    }

    /* Fraktur Überschrift */
    .catalina-main-title {
        font-family: 'UnifrakturMaguntia', serif;
        font-size: 52px;
        color: #d1d1d1; /* Platin/Silber-Look */
        margin: 0;
        line-height: 1.1;
        transition: all 0.8s ease;
        display: block;
    }

    /* Die ausgefallene Trennlinie */
    .catalina-divider {
        position: relative;
        height: 1px;
        width: 100%;
        margin: 8px 0;
        background: linear-gradient(90deg, transparent 0%, #b89f6d 50%, transparent 100%);
        transition: all 0.8s ease;
    }

    /* Die "Diamant"-Spitze in der Mitte der Linie */
    .catalina-divider::after {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        background-color: #b89f6d;
        border: 1px solid #ffffff;
        box-shadow: 0 0 10px rgba(184, 159, 109, 0.8);
    }

    /* Untertitel Capslock */
    .catalina-sub-caps {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: #777;
        letter-spacing: 10px;
        text-transform: uppercase;
        transition: all 0.8s ease;
        display: block;
    }

    /* Hover Effekt */
    .catalina-profile-header:hover .catalina-main-title {
        color: #b89f6d; /* Wechselt zu Gold beim Hover */
        text-shadow: 0 0 20px rgba(184, 159, 109, 0.4);
        transform: scale(1.02);
    }

    .catalina-profile-header:hover .catalina-divider {
        width: 80%; /* Zieht sich elegant zusammen */
        margin-left: 10%;
    }

    .catalina-profile-header:hover .catalina-sub-caps {
        color: #ffffff;
        letter-spacing: 13px;
    }