.section-column.left img,
        .section-column.center img,
        .section-column.right img {
            max-width: 80%;
            max-height: 80%;
            padding: 10px;
            object-fit: contain;
        }

        /* Styles pour les écrans en-dessous de 1000px */
    @media (max-width: 1000px) {

        .sticky-phone-menu {
            position: sticky;
            top: var(--hh);
            height: 56px;
            width: 100%;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            padding: 0;
        }
        .sticky-phone-menu ul {
            list-style: none; /* Supprime les points de liste */
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* drei gleich breite Felder: Team steht exakt in der Mitte */
            align-items: center;
            width: 100%; /* Définit une largeur pour centrer la liste dans le menu */
            padding: 0;
            margin: 0;
            font-size: clamp(15px, 4vw, 25px);
        }

        .sticky-phone-menu ul li {
            margin: 0;
            text-align: center;
        }
        .sticky-phone-menu a { display: block; padding: 16px 0; }   /* ganze Feld-Breite antippbar */

        .sticky-phone-menu a {
            color: #999;
            text-decoration: none;
            font-weight: bold;
        }

        .sticky-phone-menu a.selected {
            color: white;
        }

        .others-title { display: none; }   /* am Handy überflüssig: die Tabs zeigen schon, wo man ist */

        .others-sections {
            flex-direction: column;
            width: 100%;
            overflow: visible;
        }

        /* Jeder Abschnitt ist mindestens bildschirmhoch, damit auch Team und Impressum ganz nach oben scrollen können */
        .others-section { min-height: calc(100vh - 111px); min-height: calc(100lvh - 111px); }

        /* Les sections prennent 100% de largeur et sont affichées en pile */
        .others-section {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;

        }

        /* Cache le fade et autres effets pour le mobile */
        .impressum-column-fade,
        .section-column.fade {
            display: none;
        }

        /* Les colonnes gauche, centre et droite occupent 100% de largeur en colonne */
        .section-column.left,
        .section-column.center,
        .section-column.right {
            width: 100%;
            height: auto;
        }

    }

    @media (min-width: 1000px) {

        .sticky-phone-menu {
            display: none;
        }


    .others-title {
        position: relative;
        height: 8%;
        padding: 15px;
        padding-left: 30px;
        margin: 0;
        box-sizing: border-box;
    }

    .others-sections {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 92%;
        overflow: hidden;
    }

    .others-section {
        position: absolute;
        width: 60%;
        height: 100%;
        padding: 0px;
        box-sizing: border-box;
        transition: all 0.5s ease;
        z-index: 1;
        color: #BBB;

    }

    .others-section.expanded {
        width: 60%;
        z-index: 5;
        color: black;
    }

    .impressum-column-fade {
        position: absolute;
        z-index: 5;
        width: 100px;
        height: 90%;
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        cursor: pointer;
    }

    h2, p, img{
        cursor: pointer;
    }

    h2.expanded {
        font-size: clamp(25px, 3vw, 40px);
        transition: all 0.5s ease;
        color: black;
        transform: translateY(-20px); /* Remplace margin-top */

    }
    h2.non-expanded {
        font-size: clamp(15px, 1.7vw, 25px);
        transition: all 0.5s ease;
        color: #BBB;
        transform: translateY(-10px); /* Remplace margin-top */
    }



    .section-content.expanded img {
        opacity: 100%;
        transition: all 0.5s ease;
    }
    .section-content.non-expanded img {
        opacity: 30%;
        transition: all 0.5s ease;
    }

    p {
        padding: 10px;
        margin: 0;
    }





    #about { z-index: 1; }
    #team { z-index: 2; }
    #impressum { z-index: 3;}


    .section-content {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .h2-section {
        position: absolute;
        height: 7vh;
        display: flex;
        align-items: flex-start; /* Centre verticalement */
        margin-bottom: 0px;
        padding-left: 30px;
    }

    .section-column {
        position: relative;
        top: 7vh;
        left: 0%;
        overflow: hidden;
        padding: 0px;
        box-sizing: border-box;
        background-color: rgb(255, 255, 255, 1);
        border: 0px solid black;
    }
    .section-column.fade {
        position: absolute;
        left: -25%;
        height: 100%;
        width: 25%;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    }


    .section-column.left {
        width: 25%;
        padding-left: 20px;
    }

    .section-column.center {
        width: 38%;
    }
    .section-column.right {
        width: 25%;
    }

    #team .section-column.left {
        width: 25%;
    }
    #team .section-column.center {
        width: 25%;
    }
    #team .section-column.right {
        width: 37%;
    }
    #team p {
        padding-top: 5px;
    }

    #about .section-column.left {
        width: 30%;
    }
    #about .section-column.center {
        width: 30%;
    }
    #about .section-column.right {
        width: 33%;
    }

    .others-section img {
        opacity: 50%;
    }
    .others-section.expanded img {
        opacity: 100%;
    }




}

/* Handy: Abschnittstitel wie der Seitentitel „Articles“ (Rhymes 31,2 px, 15 px vom Rand),
   Tabs im schwarzen Block in Rhymes, genau so groß wie die Menüpunkte im Burgermenü */
@media (max-width: 1000px) {
    .others-section .h2-section {
        font-family: 'Rhymes', Georgia, serif; font-weight: 400; font-style: normal;
        font-size: 31.2px; line-height: 1.2; color: #000;
        margin: 0; padding: 5px 5px 12px;
    }
    .sticky-phone-menu ul { font-size: clamp(20px, 3vh, 35px); }
    .sticky-phone-menu a {
        font-family: 'Rhymes', Georgia, serif; font-weight: 400;
        padding: 0; line-height: 56px; white-space: nowrap;
    }
}
@media (max-width: 1000px) {
    /* Team exakt mittig, About links- und Legal Notice rechtsbündig mit 15 px Rand (wie die Titel) */
    .sticky-phone-menu ul { grid-template-columns: 1fr auto 1fr; padding: 0 15px; box-sizing: border-box; }
    .sticky-phone-menu ul li:first-child { text-align: left; }
    .sticky-phone-menu ul li:last-child { text-align: right; }
}
@media (max-width: 1000px) {
    /* gleich große Abstände zwischen den drei Tabs (in Menügröße ist "Legal Notice" zu breit, um Team exakt mittig zu halten) */
    .sticky-phone-menu ul { display: flex; justify-content: space-between; }
}
@media (max-width: 1000px) {
    /* Titel auf der Seite weg: das Thema steht nur oben im schwarzen Streifen */
    .others-section .h2-section { display: none; }
    /* endlose Leiste: Themen nebeneinander mit gleichen Abständen (setzt das Skript), das gewählte vorne; was rausrutscht, wird abgeschnitten */
    .sticky-phone-menu { overflow: hidden; justify-content: flex-start; }
    .sticky-phone-menu ul { display: flex; justify-content: flex-start; width: auto; padding: 0 0 0 15px; flex: none; will-change: transform; }
    .sticky-phone-menu ul li, .sticky-phone-menu ul li:first-child, .sticky-phone-menu ul li:last-child { flex: none; text-align: left; }
}

/* Handy: Abschnitte als Stapel. Jeder füllt den Bildschirm unter Kopfzeile und Tab-Leiste (darunter nur Weiß, der nächste ist nicht zu sehen).
   Beim Hochwischen bleibt der Text stehen und der nächste Abschnitt schiebt sich darüber (position: sticky; top setzt das Skript:
   normal direkt unter der Tab-Leiste, bei langen Abschnitten erst, wenn ihr Ende unten angekommen ist). */
@media (max-width: 1000px) {
    .others-section {
        position: sticky; top: calc(var(--hh) + 56px);
        min-height: calc(100vh - var(--hh) - 56px); min-height: calc(100lvh - var(--hh) - 56px);
        height: auto; background: #fff;
        padding: 12px 10px 10px;
    }
    .others-section .section-column > :first-child { margin-top: 0; }
    .others-section .section-content > .section-column:not(.fade) ~ .section-column > :first-child { margin-top: 16px; }
}
@media (max-width: 1000px) {
    /* leere Absätze (Kirbytext in <p> verschachtelt) nicht als Abstand zählen; erster Text direkt oben */
    .others-section .section-column > p:empty { display: none; }
    .others-section .section-column.left > p:empty:first-child + * { margin-top: 0; }
}

/* Handy, Others (ersetzt den Stapel von oben):
   1. Kopfzeile, schwarzer Block und Text wandern zuerst gemeinsam hoch, bis die Kopfzeile weg ist; dann klebt der Block oben.
   2. Der Text klebt unter dem Block, solange in seinem Abschnitt darunter noch Weißraum ist; der nächste Text rückt von unten nach.
   3. Hat der nächste Text angedockt (Abstand wie zwischen zwei Abschnitten), wandern beide zusammen hoch, der obere verschwindet hinter dem Block.
   Jeder Abschnitt ist mindestens so hoch wie der Bildschirm unter dem Block: Tippt man ein Thema an, steht darunter nur Weiß. */
@media (max-width: 1000px) {
    html { --bar-top: var(--hh); }
    html.header-hidden, html.header-engaged { --bar-top: 0px; }
    html.header-engaged .sticky-phone-menu { top: 0; transition: none; }
    .others-section {
        position: relative; top: auto !important; background: none;
        min-height: calc(100vh - 56px); min-height: calc(100lvh - 56px);
        padding: 6px 10px 26px;
    }
    .others-section .section-content { position: sticky; top: calc(var(--bar-top) + 56px + 6px); }
}

/* Handy: Kopfzeile + Tab-Leiste als eine klebende Einheit (.others-top). Normal ist sie um die Kopfzeilenhöhe nach oben geschoben
   (nur die Leiste schaut heraus, ganz oben auf der Seite scrollt die Kopfzeile mit dem Text weg); beim Hochscrollen rutscht sie
   als Ganzes herunter. Ersetzt die feste Kopfzeile und die einzeln klebende Leiste auf dieser Seite. */
@media (max-width: 1000px) {
    .others-top { position: sticky; top: calc(-1 * var(--hh)); z-index: 10; transition: top .18s ease; }
    html.top-revealed .others-top { top: 0; }
    .others-top > .header { position: relative !important; top: 0 !important; left: auto; right: auto; transition: none !important; }
    .others-top > .sticky-phone-menu { position: relative; top: 0 !important; transition: none; }
    body:has(.others-top) main { padding-top: 0; }
    /* Texte kleben direkt unter der Leiste, wo immer sie gerade ist */
    html { --bar-top: 0px; }
    html.top-revealed { --bar-top: var(--hh); }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) { .others-top { transition: none; } }
@media (max-width: 1000px) { .others-section .section-content { transition: top .18s ease; } }
/* Menü oder Suche offen: der schwarze Tab-Block verschwindet (er liegt sonst mit der Kopfzeile über dem Menü) */
@media (max-width: 1000px) {
    html:has(.menu.open) .others-top > .sticky-phone-menu,
    html:has(.search-results.open) .others-top > .sticky-phone-menu,
    html:has(.shop-menu.open) .others-top > .sticky-phone-menu { visibility: hidden; }
}