/* css/styles.css */

/* ===========================================================
   Global Styles (Desktop/Tablet)
   =========================================================== */


@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  src: url('../fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype-variations');
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300 900;
  src: url('../fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf') format('truetype-variations');
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  src: url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  src: url('../fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-display: swap;
}


html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Verhindert vertikales Scrollen auf Desktop/Tablet */
    height: 100%;
    width: 100%;
    font-family: "Open Sans", sans-serif;
    color: #000; /* Normaler Text bleibt schwarz */
}

/* Overlay für den Ladevorgang */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #EFECE7;
    z-index: 3000;
    transform: translateX(0);
    opacity: 1;
}

/* Wenn Klasse "slide" gesetzt, fährt das Overlay nach links 
   sodass nur das linke Drittel übrig bleibt */
.overlay.slide {
    transform: translateX(-66.6667vw);
    transition: transform 1s ease-out;
}

/* Wenn Klasse "fade" gesetzt, blendet das Overlay aus */
.overlay.fade {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Container für alle Sektionen: horizontales Scrollen */
.container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow-x: scroll; /* Direktes horizontales Scrollen */
    scrollbar-width: none; /* Firefox: Scrollbar ausblenden */
    position: relative;
}
.container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera: Scrollbar ausblenden */
}

/* Jede Sektion füllt den Viewport vollständig aus */
.section {
    flex: 0 0 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 40px;
    position: relative;
    background-color: #EFECE7; /* Standard-Hintergrund für alle Sektionen */
}

/* Überschriften und Starttext: Schriftart EB Garamond bzw. Fallbacks */
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.start-text h1 {
    font-family: Merriweather, sans-serif;
    color: #A8855D;
}

/* Speziell für den Starttext: 4rem */
.start-text h1 {
    font-size: 4rem;
    margin: 0;
    line-height: 1.3;
    font-weight: 300;
}

/* Hintergrundfarben für spezielle Sektionen */
#start {
    /* Linke 1/3 #EFECE7, rechte 2/3 Weiß */
    background: linear-gradient(
        to right,
        #EFECE7 0%,
        #EFECE7 33.3333%,
        #FFFFFF 33.3333%,
        #FFFFFF 100%
    );
}
#tee {
    background-color: #FFFFFF;
}
#erdbeben-story1 { background-color: #ffecb3; }
#erdbeben-story2 { background-color: #fff3e0; }
#himmel-story    { background-color: #e3f2fd; }
#familie-story   { background-color: #EFECE7; }
#liebe-story     { background-color: #EFECE7; }

/* 1. Wir definieren die generische Klasse für ausgefadete Ränder */
.faded-edges {
  position: relative;
  background-color: #EFECE7;
  overflow: hidden;
}

/* 2. Verlaufs-Maske darüber */
.faded-edges::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #EFECE7 0%,
    rgba(239, 236, 231, 0) 20%,
    rgba(239, 236, 231, 0) 80%,
    #EFECE7 100%
  );
}

/* Gemeinsame Klasse für identisches Hintergrundbild */
.bg-common {
  /* Hintergrundbild angeben */
  background-image: url('../media/background.svg');
  background-size: cover;      /* Bild immer so skalieren, dass es den Container füllt */
  background-position: center; /* Bild zentrieren */
  background-repeat: no-repeat;

  /* Beispielhöhen, -abstände, – justieren nach Bedarf */
  min-height: 400px;
  padding: 40px;
}


/* ===========================================================
   Start-Sektion: Inhalt (Text & Video)
   =========================================================== */
.start-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Linke 1/3 für den Text */
.start-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 33.3333%;
    padding-left: 20px;
}

/* Video, das von rechts kommt, mit Rand oben/unten */
.start-video {
    position: absolute;
    top: 50%;
    left: 26%;
    right: 0;
    transform: translateY(-50%);
    width: 48%;
    height: auto;
    overflow: hidden;
}
.start-video video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Buchstaben-Reveal-Stil */
.reveal-text span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: reveal 0.3s ease-out forwards;
}
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll-Hinweis in der Start-Sektion (nur Desktop) */
.start-indicator {
    display: none;
}

/* ===========================================================
   Logo oben links (fixed), immer sichtbar
   ===========================================================
   Breite 100px, Höhe automatisch, mit Mauszeiger als Link-Cursor
*/
.logo {
    width: 100px;
    height: auto;
    display: block;
    position: absolute;
    top: 60px;
    left: 60px;
    cursor: pointer;
    z-index: 1000;
}
.logo img {
    width: 100%;
    height: auto;
}

/* Burger-Icon (Desktop unsichtbar, Mobile sichtbar) */
.burger {
    display: none; /* nur auf Mobile sichtbar */
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1000;
}
.burger span {
    display: block;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
}

/* Sprachauswahl oben rechts (Desktop) */
.lang-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}
.lang-switch a {
    text-decoration: none;
    margin: 0 5px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
}

/* Desktop-Navigation unten links */
.menu {
    position: absolute;
    bottom: 60px;
    left: 60px;
    z-index: 1000;
    text-transform: uppercase;
}
.menu-link {
    text-decoration: none;
    margin-right: 15px;
    font-size: 1rem;
    color: #333;
    font-weight: normal;
    cursor: pointer;
}
.menu-link.active {
    font-weight: bold;
    color: black;
}

/* Impressum, Kontakt, Datenschutz unten rechts (Desktop) */
.footer {
    position: absolute;
    bottom: 60px;
    right: 20px;
    z-index: 1000;
}
.footer-menu {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
}
.footer-link {
    text-decoration: none;
    color: gray;
    cursor: pointer;
    transition: color 0.3s;
}
.footer-link:hover {
    color: #000;
}

/* Scroll-Indikator (Desktop) */
.scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 800px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    z-index: 1000;
}
.scroll-indicator .scroll-progress {
    width: 0%;
    height: 100%;
    background-color: #333;
    transition: width 0.1s ease-out;
}
.scroll-indicator .scroll-hint {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: #333;
    user-select: none;
}

/* Modal-Grundlagen (Desktop & Mobile) */
.modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed; /* Bleibt im Viewport, egal wie weit gescrollt wurde */
    z-index: 2000;   /* Über allen anderen Elementen */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Falls Modal-Inhalt größer wird */
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
}
.modal-content {
    position: absolute; /* Immer in der Mitte des Bildschirms */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    
    width: 80%;
    max-width: 500px;
    z-index: 2001; /* Über dem halbtransparenten Hintergrund */
}
.modal-content .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    /* Body: vertikales Scrollen erlauben, horizontales ausblenden */
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }

    /* Container: auf Column (vertikales Scrollen) umschalten
       und zusätzlichen Abstand oben einfügen, damit Logo/Burger
       nicht über den Inhalt ragen */
    .container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth; /* Vertikal sanft scrollen */
        padding-top: 70px;       /* Puffer oben, damit Logo/Burger frei stehen */
    }

    /* Sektionen: Minimum Viewport-Höhe, damit sie bei Bedarf höher scrollen */
    .section {
        flex: 0 0 auto;
        width: 100vw;
        min-height: 100vh;
        padding: 20px;
    }

    /* Start-Sektion: Text und Video untereinander */
    .start-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .start-text {
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    .start-video {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
    }
    .start-video video {
        width: 100%;
        height: auto;
    }

    /* Start-Indikator ausblenden */
    .start-indicator {
        display: none;
    }

    /* Logo auf Mobile: nur 40px breit, Höhe automatisch */
    .logo {
        width: 40px;
        height: auto;
        top: 15px;
        left: 15px;
    }

    /* Burger-Icon oben rechts fixiert, immer sichtbar */
    .burger {
        display: flex;       /* Nur auf Mobile sichtbar */
        position: fixed;     /* Fixiert beim Scrollen */
        top: 15px;
        right: 15px;
        width: 30px;
        height: 25px;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 1000;
    }
    .burger span {
        display: block;
        height: 3px;
        background-color: #333;
        border-radius: 2px;
    }

    /* Desktop-Menü und Footer-Links ausblenden */
    .menu {
        display: none;
    }
    .footer-links {
        display: none;
    }

    /* Sprachauswahl oben rechts (Desktop) ausblenden */
    .lang-switch {
        display: none;
    }

    /* Scroll-Indikator ausblenden */
    .scroll-indicator {
        display: none;
    }

    /* Mobile-Menü (off-canvas) */
    .mobile-menu {
        display: none;           /* Standardmäßig eingeklappt */
        position: fixed;
        top: 0;
        right: 0;
        width: 260px;
        height: 100%;
        background-color: #fff;
        box-shadow: -2px 0 8px rgba(0,0,0,0.2);
        z-index: 1500;
        flex-direction: column;
        padding-top: 60px;       /* Platz für Logo und Burger-Icon oben */
        overflow-y: auto;        /* Menü scrollbar, falls Bildschirm klein */
    }
    .mobile-menu.open {
        display: flex;           /* Sichtbar, wenn .open gesetzt */
    }
    .mobile-menu a {
        text-decoration: none;
        padding: 15px 20px;
        font-size: 1.1rem;
        color: #333;
        border-bottom: 1px solid #eee;
        cursor: pointer;
    }
    .mobile-menu a:hover,
    .mobile-menu a.active {
        background-color: #f5f5f5;
        font-weight: bold;
    }

    /* Sprachauswahl am Ende des Mobile-Menüs (ohne margin-top: auto) */
    .mobile-lang {
        padding: 15px 20px;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: center; /* Zentriert DE | EN | JP */
    }
    .mobile-lang a {
        text-decoration: none;
        margin: 0 8px;
        font-size: 1rem;
        color: #333;
        cursor: pointer;
    }

    /* Modal (Mobile) – bleibt immer im Viewport und zentriert */
    .modal {
        display: none;
        position: fixed;   
        z-index: 2000;    /* Über der mobilen Navigation */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .modal-content {
        position: fixed;     /* Immer in der Bildschirmmitte */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        
        width: 80%;
        max-width: 500px;
        z-index: 2001;       /* Über dem halbtransparenten Hintergrund */
    }
    .modal-content .close {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
        cursor: pointer;
    }
}

/* ===========================================================
   Zusätzliche Animation / Anzeige für den Start-Indikator
   (nur Desktop, min-width: 769px)
   ===========================================================
*/
@media screen and (min-width: 769px) {
    .start-indicator {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1rem;
        color: #333;
        user-select: none;
        opacity: 0.7;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 0.4; transform: translateX(-50%) scale(1); }
        50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
        100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    }
}

/* ===========================================================
   TEE-Sektion: Inhalt (Text & Bild)
   =========================================================== */
.tee-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Linkes 1/3 für den animierten Text */
.tee-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 33.3333%;
    padding-left: 20px;
}

/* Rechtes 2/3 für das Bild */
.tee-image {
    position: absolute;
    top: 50%;
    left: 33.3333%;
    transform: translateY(-50%);
    width: 30%;
    height: auto;
    overflow: hidden;
    left: 40%;
}
.tee-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Zeilenweise Reveal-Animation */
.reveal-line {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: reveal 0.5s ease-out forwards;
}

/* Keyframes für das Reveal */
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================
   TEE-Sektion: Inhalt (Text & Bild)
   =========================================================== */
.tee-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Linkes 1/3 für den animierten Text */
.tee-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 33.3333%;
    padding-left: 20px;
}

/* Rechtes 2/3 für das Bild */
.tee-image {
    position: absolute;
    top: 50%;
    left: 33.3333%;
    transform: translateY(-50%);
    width: 30%;
    height: auto;
    overflow: hidden;
    left: 40%;
}
.tee-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Zeilenweise Reveal-Animation */
.reveal-line {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: reveal 0.5s ease-out forwards;
}

/* Keyframes für das Reveal */
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================
   TEE-STORY-Sektion: Layout mit überlappendem Bild, Textbox und zweitem Bild
   =========================================================== */
.tee-story-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Erstes Foto links, überlappt die Sektion leicht */
.tee-story-image-1 {
    flex: 1;
    position: relative;
    left: -50px; /* Lässt das Bild etwas in die vorherige Sektion hineinragen */
}
.tee-story-image-1 img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* Textbox mit weißem Rahmen und Hintergrund */
.tee-story-textbox {
    flex: 2;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #fff;
    padding: 20px;
    margin: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    max-width: 600px;
}
.tee-story-textbox h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2rem;
    color: #333;
}
.tee-story-textbox p {
    font-size: 1rem;
    line-height: 1.5;
    color: #444;
}

/* Zweites Foto rechts */
.tee-story-image-2 {
    flex: 1;
    position: relative;
}
.tee-story-image-2 img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* ===========================================================
   TEE-Sektion: Inhalt (Text & Bild)
   =========================================================== */
.tee-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Linkes 1/3 für den animierten Text */
.tee-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 33.3333%;
    padding-left: 20px;
}

/* Rechtes 2/3 für das Bild */
.tee-image {
    position: absolute;
    top: 50%;
    left: 33.3333%;
    transform: translateY(-50%);
    width: 66.6667%;
    height: auto;
    overflow: hidden;
}
.tee-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Zeilenweise Reveal-Animation */
.reveal-line {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: reveal 0.5s ease-out forwards;
}

/* Keyframes für das Reveal */
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================
   TEE-Sektion: Inhalt (Text & Bild)
   =========================================================== */
.tee-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Linkes 1/3 für den animierten Text */
.tee-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 33.3333%;
    padding-left: 20px;
}

/* Rechtes 2/3 für das Bild */
.tee-image {
    position: absolute;
    top: 50%;
    left: 33.3333%;
    transform: translateY(-50%);
    width: 66.6667%;
    height: auto;
    overflow: hidden;
}
.tee-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Zeilenweise Reveal-Animation */
.reveal-line {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: reveal 0.5s ease-out forwards;
}

/* Keyframes für das Reveal */
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================
   TEE-STORY-Sektion: Layout mit überlappendem Bild, Textbox und zweitem Bild
   =========================================================== */
.tee-story-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Erstes Foto links, überlappt die Sektion leicht */
.tee-story-image-1 {
    flex: 1;
    position: relative;
    left: -50px; /* Lässt das Bild etwas in die vorherige Sektion hineinragen */
}
.tee-story-image-1 img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* Textbox mit weißem Rahmen und Hintergrund */
.tee-story-textbox {
    flex: 2;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #fff;
    padding: 20px;
    margin: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
;
    max-width: 600px;
}
.tee-story-textbox h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2rem;
    color: #333;
}
.tee-story-textbox p {
    font-size: 1rem;
    line-height: 1.5;
    color: #444;
}

/* Zweites Foto rechts */
.tee-story-image-2 {
    flex: 1;
    position: relative;
}
.tee-story-image-2 img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* ===========================================================
   TEE-Sektion: Inhalt (Text & Bild)
   =========================================================== */
.tee-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Linkes 1/3 für den animierten Text */
.tee-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 33.3333%;
    padding-left: 20px;
}

/* Rechtes 2/3 für das Bild */
.tee-image {
    position: absolute;
    top: 50%;
    left: 33.3333%;
    transform: translateY(-50%);
    width: 30%;
    height: auto;
    overflow: hidden;
    left: 40%;
}
.tee-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Für ERDBEBEN-Sektion: zwei Bilder übereinander */
.erdbeben-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.erdbeben-images img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* Zeilenweise Reveal-Animation */
.reveal-line {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: reveal 0.5s ease-out forwards;
}

/* Keyframes für das Reveal */
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================
   TEE-STORY-Sektion: Layout mit überlappendem Bild, Textbox und zweitem Bild
   =========================================================== */
.tee-story-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Erstes Foto links, überlappt die Sektion leicht */
.tee-story-image-1 {
    flex: 1;
    position: relative;
    left: -10%; /* Lässt das Bild etwas in die vorherige Sektion hineinragen */
}
.tee-story-image-1 img {
    width: 164%;
    height: auto;
    display: block;
    
}

/* Textbox mit weißem Rahmen und Hintergrund */
.tee-story-textbox {
    flex: 2;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #fff;
    padding: 50px;
    margin: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    max-width: 600px;
    z-index: 2;
}
.tee-story-textbox h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2rem;
    color: #333;
}
.tee-story-textbox p {
    font-size: 1rem;
    line-height: 1.5;
    color: #444;
}

/* Zweites Foto rechts */
.tee-story-image-2 {
    flex: 1;
    position: relative;
}
.tee-story-image-2 img {
    width: 45%;
    height: auto;
    display: block;
    
    position: absolute;
    top: -300px; /* Überlappt die Sektion nach oben */
}

/* ===========================================================
   TEE-STORY-Icon: Teepflanze unten rechts nur in dieser Sektion
   =========================================================== */
#tee-story {
    position: relative; /* Ermöglicht absolutes Positionieren innerhalb */
}
.tee-story-icon {
    position: absolute;
    bottom: 75px;
    right: 20px;
    z-index: 2002;
    width: 200px;
    height: auto;
}
.tee-story-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===========================================================
   Zusätzliche Animationen für Logo und Tee-Icons
   =========================================================== */

/* 1. Sanftes Auf- und Abbewegen des Logos */
@keyframes logoFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.logo img {
    /* Die Animation läuft endlos, dauert 3 Sekunden pro Loop */
    /*animation: logoFloat 3s ease-in-out infinite;*/
}

/* 2. Dezentes Schaukeln der Teepflanze im Tee-Story-Icon */
@keyframes leafSwing {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tee-story-icon img {
    /* Die Animation läuft endlos, dauert 4 Sekunden pro Loop */
    /*animation: leafSwing 4s ease-in-out infinite;
    transform-origin: bottom center;*/
}

/* 3. Generische Klasse für Schwebe-Effekt */
@keyframes generalFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

/* 4. Generische Klasse für leichtes Schaukeln */
@keyframes generalSwing {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Anwendung sowohl auf Container als auch direkt auf img */
.floating img,
.floating {
    /* Diese Klasse erzeugt einen leichten Schwebe-Effekt */
    animation: generalFloat 3s ease-in-out infinite;
}

.swinging img,
.swinging {
    /* Diese Klasse sorgt für ein sanftes Schaukeln */
    animation: generalSwing 4s ease-in-out infinite;
    transform-origin: center bottom;
}

/* ===========================================================
   Herzschlag-Effekt (heartbeat) für Container oder direktes <img>
   =========================================================== */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.heartbeat,
.heartbeat img {
    /* Die Animation läuft in einer Endlosschleife und dauert 1s pro Zyklus */
    animation: heartbeat 3s ease-in-out infinite;
    transform-origin: center center;
}

/* ===========================================================
   Erdbeben-Effekt (shake) für Container oder direktes <img>
   =========================================================== */
@keyframes earthquake {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5px, 0);
    }
    20% {
        transform: translate(5px, 0);
    }
    30% {
        transform: translate(-5px, 0);
    }
    40% {
        transform: translate(5px, 0);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.earthquake,
.earthquake img {
    /* Die Animation läuft kurz (0,5 s pro Loop) und wiederholt sich in Endlosschleife */
    animation: earthquake 0.5s ease-in-out infinite;
}

/* ===========================================================
   Sprachauswahl-Linie (languageLine) animiert unter den Links
   =========================================================== */
/* Container anpassen: position relative, damit Pseudoelement richtig positioniert */
.language-switcher {
    display: inline-block;
}

/* Pseudoelement für die Linie */
.language-switcher::before {
    content: '';
    position: absolute;
    top: 100%; /* direkt unterhalb des Elements */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000; /* Farbe nach Wunsch anpassen */
    /* Linie zunächst außerhalb des Viewports (links) */
    transform: translateX(-100%);
    animation: languageLine 3s ease-in-out infinite;
}

@keyframes languageLine {
    0% { transform: translateX(-100%); }
    25% { transform: translateX(0); /* sichtbar, unter der Sprachauswahl */ }
    75% { transform: translateX(0); }
    100% { transform: translateX(100%); /* fährt nach rechts aus */ }
}

/* Tee-Flattern (teaFlutter) */
@keyframes teaFlutter {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
.tea-flutter,
.tea-flutter img {
    animation: teaFlutter 4s ease-in-out infinite;
    transform-origin: center bottom;
}

/* ===========================================================
   Teeblatt-Hintergrund (teaLeafBg) für Sektionen
   =========================================================== */
.tea-leaf-bg {
    position: relative; /* Container muss relativ positioniert sein */
    overflow: hidden;     /* Damit nichts über den Container hinausragt */
}

.tea-leaf-bg::before {
    content: '';
    position: absolute;
    top: 10px;            /* Abstand von oben (anpassen nach Bedarf) */
    right: 10px;          /* Abstand von rechts */
    width: 100px;         /* Größe des Teeblatts */
    height: 100px;
    background-image: url('../icons/tea-leaf.png'); /* Pfad zum Teeblatt-Bild */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;         /* Transparenz, damit es den Inhalt nicht stört */
    z-index: 1;           /* Hinter dem Inhalt (der standardmäßig z-index: auto = 0 ist) */
    pointer-events: none; /* Damit das Pseudoelement keine Klicks abfängt */
}

/* Optional: Bei sektion internem Inhalt höheres z-index */
.tea-leaf-bg > * {
    position: relative;
    z-index: 2; /* Damit Text und andere Elemente definitiv über dem Teeblatt liegen */
}

.image-desc {
    font-family: Merriweather, sans-serif;
    color: #A8855D;
    font-size: 0.8rem;
    text-align: center;
    width: 100%;
}