.elementor-1104 .elementor-element.elementor-element-53e8179d{--display:flex;--min-height:80vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:90px;--padding-bottom:90px;--padding-left:20px;--padding-right:20px;}.elementor-1104 .elementor-element.elementor-element-53e8179d:not(.elementor-motion-effects-element-type-background), .elementor-1104 .elementor-element.elementor-element-53e8179d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kleine-hoffnungshelden.de/wp-content/uploads/2026/03/Marienkaefer_Max_aquarelliert-scaled.jpg");background-position:center right;background-repeat:no-repeat;background-size:cover;}.elementor-1104 .elementor-element.elementor-element-53e8179d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1104 .elementor-element.elementor-element-2c77fc58{--display:flex;--justify-content:center;}.elementor-1104 .elementor-element.elementor-element-3536e1c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:120px;--padding-bottom:90px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1104 .elementor-element.elementor-element-15464b84 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-1104 .elementor-element.elementor-element-15464b84 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-1104 .elementor-element.elementor-element-cc2e238{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:90px;--padding-bottom:90px;--padding-left:20px;--padding-right:20px;}.elementor-1104 .elementor-element.elementor-element-f88e6fb{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;}.elementor-1104 .elementor-element.elementor-element-6a578c6 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1104 .elementor-element.elementor-element-952b8e1 > .elementor-widget-container{--e-transform-rotateZ:-26deg;margin:0px 0px -60px 0px;}.elementor-1104 .elementor-element.elementor-element-952b8e1{z-index:1;text-align:end;}.elementor-1104 .elementor-element.elementor-element-952b8e1 img{width:100px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1104 .elementor-element.elementor-element-53e8179d{--min-height:40vh;--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-1104 .elementor-element.elementor-element-53e8179d:not(.elementor-motion-effects-element-type-background), .elementor-1104 .elementor-element.elementor-element-53e8179d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;}.elementor-1104 .elementor-element.elementor-element-3536e1c9{--padding-top:90px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-1104 .elementor-element.elementor-element-15464b84 .elementor-heading-title{font-size:25px;}.elementor-1104 .elementor-element.elementor-element-cc2e238{--padding-top:90px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}}@media(max-width:767px){.elementor-1104 .elementor-element.elementor-element-53e8179d{--min-height:37vh;}.elementor-1104 .elementor-element.elementor-element-53e8179d:not(.elementor-motion-effects-element-type-background), .elementor-1104 .elementor-element.elementor-element-53e8179d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center right;}.elementor-1104 .elementor-element.elementor-element-cc2e238{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for shortcode, class: .elementor-element-dc7af83 */.player-controls-extra {
    display: none!important;
}

span.track-index {
    display: none;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bf8e44f *//* Container für alle Lieder */
.song-list-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* Die einzelne Song-Karte */
.song-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 25px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.song-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Header Bereich */
.song-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 10px;
}

.song-title {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
    font-weight: 700;
}

.song-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}

/* Audio Player Styling */
.song-player {
    margin-bottom: 20px;
}

.song-player audio {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    outline: none;
}

/* Lyrics Bereich */
.song-lyrics h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.lyrics-content {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace; /* Monospace ist gut zum Lesen von Takten */
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    max-height: 250px; /* Maximale Höhe, damit lange Texte nicht das Design sprengen */
    overflow-y: auto; /* Scrollbar, wenn der Text zu lang ist */
    border-left: 4px solid #0073aa; /* Akzentfarbe (anpassbar) */
}

/* Scrollbar verschönern (optional für Webkit Browser) */
.lyrics-content::-webkit-scrollbar {
    width: 6px;
}
.lyrics-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.lyrics-content {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    /* Wir nutzen eine gut lesbare Schrift, Monospace ist bei HTML-Input oft nicht mehr nötig,
       es sei denn du willst den Schreibmaschinen-Look behalten: */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    max-height: 250px;
    overflow-y: auto;
    border-left: 4px solid #0073aa;
}

/* WICHTIG: Abstände der HTML-Elemente im Text normalisieren */
.lyrics-content p {
    margin-top: 0;
    margin-bottom: 10px; /* Kleinerer Abstand zwischen Absätzen */
}

.lyrics-content p:last-child {
    margin-bottom: 0;
}

/* Falls <hr> Linien (wie im Screenshot) zu breit sind oder stören */
.lyrics-content hr {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 15px 0;
}/* End custom CSS */