.dp-ski-hamburger-wrapper {
    display: flex;
    flex-direction: column;
    /* align-items wird durch den PHP-Control 'content_internal_horizontal_alignment' gesetzt */
    /* margin-left/right wird durch den PHP-Control 'widget_horizontal_alignment' gesetzt */
    position: relative;
    cursor: pointer;
    max-width: fit-content;
    -webkit-tap-highlight-color: transparent;
    /* align-self: center; /* Kann nützlich sein, wenn der Parent ein Flex-Container ist */
    /* Wenn der Wrapper ein <a>-Tag ist, möchten wir vielleicht die Standard-Textdeko entfernen */
    text-decoration: none;
}

.dp-ski-hamburger-wrapper:focus { /* Fallback für Browser ohne :focus-visible */
    outline: none; /* Standard-Outline entfernen, wenn wir :focus-visible verwenden */
}
.dp-ski-hamburger-wrapper:focus-visible {
    outline: 2px solid Highlight; /* System-Highlight-Farbe */
    outline: 2px solid -webkit-focus-ring-color; /* Für ältere Webkit-Browser */
    outline-offset: 2px;
    border-radius: 3px; /* Optional: abgerundete Ecken für den Fokusindikator */
}

.dp-ski-hamburger-icon {
    display: block;
    line-height: 1;
    /* Die Breite des Icons wird durch den 'icon_container_width' Control gesteuert.
       Die horizontale Ausrichtung des Icons innerhalb des Wrappers wird durch
       'align-items' auf .dp-ski-hamburger-wrapper gesteuert (via 'content_internal_horizontal_alignment' Control).
    */
}

/* .dp-ski-hamburger-icon a,
.dp-ski-hamburger-icon a:hover {
    text-decoration: none;
    display: block;
} */
/* Entfernt, da der Wrapper selbst der Link ist, nicht das Icon-Span darin */

.dp-ski-hamburger-icon svg {
    display: block;
    width: 100%;
    height: 30px;
    transition: fill 0.3s ease;
}

.dp-ski-hamburger-icon svg.dp-ski-svg {
    overflow: visible;
}

.dp-ski-hamburger-wrapper .dp-ski-group {
    transform-origin: 1px 8.5px;
    transform: rotate(15deg);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.dp-ski-hamburger-wrapper .dp-ski-top,
.dp-ski-hamburger-wrapper .dp-ski-bottom {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.dp-ski-hamburger-wrapper .dp-ski-top {
    transform-origin: 28px 3px;
}
.dp-ski-hamburger-wrapper .dp-ski-bottom {
    transform-origin: 18px 10px;
}

.dp-ski-hamburger-wrapper.is-active .dp-ski-group {
    transform: rotate(0deg);
}

.dp-ski-hamburger-wrapper.is-active .dp-ski-top {
    transform: translate(-5px, 3.5px) rotate(45deg);
}

.dp-ski-hamburger-wrapper.is-active .dp-ski-bottom {
    transform: translate(5px, -3.5px) rotate(-45deg);
}


/* --- Text Styling --- */
.dp-ski-hamburger-text-wrapper {
    position: relative; /* Wichtig für die absolut positionierten Text-Spans darin */
    width: max-content; /* Passt sich der Breite des längsten Textes an. */
    min-width: 60px; /* Mindestbreite, um unschöne Umbrüche bei kurzen Texten zu vermeiden */
    box-sizing: border-box;
    text-align: center;
    min-height: 1.2em; /* Stellt sicher, dass der Wrapper eine Mindesthöhe für die absoluten Text-Spans hat */
    /* margin-top (gesetzt durch Elementor Control 'text_spacing') erzeugt den Abstand ZUM ICON. */
}

.dp-ski-hamburger-text { /* Basis für beide Texte */
    line-height: 1.2;
    display: block;
    position: absolute;
    top: 0;
    left: 50%; /* Horizontale Mitte des Parents als Ausgangspunkt */
    transform: translateX(-50%); /* Verschiebt das Element um 50% seiner EIGENEN Breite nach links */
    width: auto; /* Passt die Breite an den Inhalt an */
    white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Stellt sicher, dass Text nicht klickbar ist, Klick geht an Wrapper */
    transition: opacity 0.2s ease-in-out;
}

/* Sichtbarer normaler Text */
.dp-ski-hamburger-wrapper:not(.is-active) .dp-ski-hamburger-text-normal {
    opacity: 1;
    visibility: visible;
    /* pointer-events: auto; */ /* ENTFERNEN oder auskommentieren */
}

/* Sichtbarer aktiver Text */
.dp-ski-hamburger-wrapper.is-active .dp-ski-hamburger-text-active {
    opacity: 1;
    visibility: visible;
    /* pointer-events: auto; */ /* ENTFERNEN oder auskommentieren */
}

/* Blendet leere Text-Container aus, falls im Editor keine Texte eingegeben wurden */
.dp-ski-hamburger-text-wrapper .dp-ski-hamburger-text-normal:empty,
.dp-ski-hamburger-text-wrapper .dp-ski-hamburger-text-active:empty {
    display: none !important;
}