/*
Theme Name: Nofeo Official Web Site
*/

/* ==========================================================================
   GFIOREZIO — PROFESSIONAL DESIGN ENHANCEMENTS v2
   RTL-Support · Arabisch-optimiert · Dekorationen · Mobile-perfect
   Behält alle PHP-Funktionen, ACF-Calls, WooCommerce-Logik & Klassen unangetastet.
   ========================================================================== */

/* Arabische Schriftart laden (Cairo: elegant, modern, gut lesbar) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@300;400;500;600&display=swap');

:root {
    --primary: #cc7774;
    --primary-dark: #b86461;
    --primary-light: #d99592;
    --primary-soft: #f4e4e2;
    --primary-cream: #faf3f1;
    --gold: #c9a86a;
    --gold-light: #e8d5a8;
    --gray-text: #2d333a;
    --gray-soft: #6c7075;
    --gray-light: #f8f6f5;
    --shadow-soft: 0 4px 20px rgba(204, 119, 116, 0.08);
    --shadow-medium: 0 10px 40px rgba(45, 51, 58, 0.08);
    --shadow-strong: 0 20px 60px rgba(45, 51, 58, 0.12);
    --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   ARABIC RTL SUPPORT
   ========================================================================== */
html[dir="rtl"] body,
html[lang="ar"] body,
.rtl body {
    font-family: 'Cairo', 'acumin-pro', system-ui, sans-serif;
}

html[dir="rtl"] .font-serif-primary,
html[lang="ar"] .font-serif-primary {
    font-family: 'Cormorant Garamond', 'bennet-banner', Georgia, serif;
    font-weight: 400;
}

html[dir="rtl"] .font-sans-primary,
html[lang="ar"] .font-sans-primary {
    font-family: 'Cairo', 'acumin-pro', system-ui, sans-serif;
}

/* Arabic text needs slightly more line-height */
html[dir="rtl"] .leading-tight,
html[lang="ar"] .leading-tight {
    line-height: 1.4;
}

html[dir="rtl"] .leading-relaxed,
html[lang="ar"] .leading-relaxed {
    line-height: 1.85;
}

/* RTL spacing fixes */
html[dir="rtl"] .space-x-3 > :not(template) ~ :not(template),
html[dir="rtl"] .space-x-10 > :not(template) ~ :not(template) {
    margin-right: 0;
}

html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

/* RTL flip for chevron icons and decorative arrows */
html[dir="rtl"] .fa-chevron-left::before { content: "\f054"; }
html[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }

/* ==========================================================================
   GLOBAL TYPOGRAPHY POLISH
   ========================================================================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.font-serif-primary {
    letter-spacing: -0.01em;
}

.font-sans-primary.uppercase {
    letter-spacing: 0.12em;
}

html { scroll-behavior: smooth; }

::selection { background: var(--primary); color: #fff; }

/* ==========================================================================
   DECORATIVE ORNAMENTS (CSS-only, no images needed)
   ========================================================================== */
.deco-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 14px;
    opacity: 0.85;
}

.deco-divider::before,
.deco-divider::after {
    content: "";
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.deco-divider__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    transform: rotate(45deg);
}

.deco-leaf {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cc7774'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
}

.deco-corner-tl,
.deco-corner-tr,
.deco-corner-bl,
.deco-corner-br {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
    opacity: 0.3;
}

.deco-corner-tl { top: 12px; left: 12px; border-top: 1px solid var(--primary); border-left: 1px solid var(--primary); }
.deco-corner-tr { top: 12px; right: 12px; border-top: 1px solid var(--primary); border-right: 1px solid var(--primary); }
.deco-corner-bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--primary); border-left: 1px solid var(--primary); }
.deco-corner-br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--primary); border-right: 1px solid var(--primary); }

/* Subtle organic background pattern */
.bg-pattern-soft {
    background-color: #faf7f6;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(204, 119, 116, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(201, 168, 106, 0.05) 0%, transparent 50%);
}

.bg-pattern-cream {
    background-color: #fcf9f8;
    background-image:
        linear-gradient(135deg, transparent 49.5%, rgba(204, 119, 116, 0.04) 49.5%, rgba(204, 119, 116, 0.04) 50.5%, transparent 50.5%);
    background-size: 60px 60px;
}

/* ==========================================================================
   BUTTONS — REFINED INTERACTION
   ========================================================================== */
a.transition--default[class*="border"] {
    position: relative;
    overflow: hidden;
    transition: all 0.45s var(--transition-smooth);
    letter-spacing: 0.1em;
}

a.transition--default[class*="border"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.7s var(--transition-smooth);
    pointer-events: none;
}

a.transition--default[class*="border"]:hover::before { left: 100%; }
a.transition--default[class*="border"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ==========================================================================
   LINKS
   ========================================================================== */
.link:before, .link:after { transition: width 0.4s var(--transition-smooth); }
.link:hover:before { width: 0; }
.link:hover:after { width: 100%; }
.link--transparent:hover:after { width: 100%; left: 0; right: auto; }
.link--transparent { transition: color 0.3s ease; }
.link--transparent:hover { color: var(--primary) !important; }

/* ==========================================================================
   IMAGE TREATMENT
   ========================================================================== */
picture { overflow: hidden; display: block; }

picture img,
.relative.overflow-hidden img {
    transition: transform 0.9s var(--transition-smooth), filter 0.6s ease;
}

a.block.group:hover picture img,
.group:hover picture img {
    transform: scale(1.08);
}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
a.block.group {
    transition: transform 0.5s var(--transition-smooth);
}

a.block.group .bg-gray-50 {
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
    border-radius: 4px;
}

a.block.group:hover .bg-gray-50 {
    background-color: #fdfaf9 !important;
    box-shadow: var(--shadow-medium);
}

a.block.group:hover { transform: translateY(-8px); }

a.block.group .font-serif-primary {
    transition: color 0.4s ease;
}

a.block.group:hover .font-serif-primary {
    color: var(--primary) !important;
}

/* ==========================================================================
   HERO BANNERS
   ========================================================================== */
[style*="background-image"][style*="cover"] {
    position: relative;
}

@media (min-width: 1024px) {
    [style*="background-image"][style*="cover"][data-parallax] {
        background-attachment: fixed;
    }
}

/* ==========================================================================
   SLIDESHOW POLISH
   ========================================================================== */
.flickity__slide picture img {
    transition: transform 8s var(--transition-smooth);
}

.flickity__slide.is-selected picture img {
    transform: scale(1.05);
}

/* ==========================================================================
   FORM POLISH (Contact Form 7)
   ========================================================================== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e0dcdb;
    padding: 12px 0;
    font-family: 'Cairo', acumin-pro, system-ui, sans-serif;
    font-size: 14px;
    color: var(--gray-text);
    margin-bottom: 18px;
    transition: border-color 0.4s ease, padding 0.3s ease;
    outline: none;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-bottom-color: var(--primary);
    padding-bottom: 14px;
}

.wpcf7 textarea { resize: vertical; min-height: 120px; }

.wpcf7 input[type="submit"] {
    background: var(--gray-text);
    color: #fff;
    border: 0;
    padding: 16px 36px;
    font-family: 'Cairo', acumin-pro, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s var(--transition-smooth);
    margin-top: 12px;
}

.wpcf7 input[type="submit"]:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(204, 119, 116, 0.35);
}

/* ==========================================================================
   SOCIAL ICONS
   ========================================================================== */
a[class*="rounded-full"][class*="border"] {
    transition: all 0.4s var(--transition-bounce) !important;
}

a[class*="rounded-full"][class*="border"]:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   HEADER NAVIGATION
   ========================================================================== */
#site-header nav ul li a {
    position: relative;
    transition: color 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.06em;
}

#site-header nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width 0.4s var(--transition-smooth);
}

#site-header nav ul li a:hover::after { width: 100%; }
#site-header nav ul li a:hover { color: var(--primary); }

.fa-shopping-bag {
    transition: transform 0.4s var(--transition-bounce);
}

a:hover > .fa-shopping-bag {
    transform: scale(1.18) rotate(-5deg);
    color: var(--primary);
}

/* ==========================================================================
   STAR RATINGS — Beautify
   ========================================================================== */
.fa-star {
    color: var(--gold);
    transition: transform 0.3s ease;
}

.flex.space-x-px:hover .fa-star {
    color: var(--gold);
}

/* ==========================================================================
   FEATURE SECTION (testimonials/product features on home)
   ========================================================================== */
.feature-section-card {
    background: linear-gradient(135deg, #ffffff 0%, #faf7f6 100%);
    border: 1px solid rgba(204, 119, 116, 0.1);
    border-radius: 4px;
    padding: 40px 32px;
    position: relative;
    box-shadow: var(--shadow-soft);
}

.feature-section-card::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--primary);
}

/* ==========================================================================
   SPECIAL FOOTER SECTION (where the empty layout was)
   ========================================================================== */
.special-footer-section {
    background: linear-gradient(180deg, #ffffff 0%, #faf7f6 100%);
    position: relative;
}

.special-footer-section .image-side {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.special-footer-section .text-side {
    background: linear-gradient(135deg, #f6f2f3 0%, #faf3f1 100%) !important;
    position: relative;
    overflow: hidden;
}

.special-footer-section .text-side::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204, 119, 116, 0.08) 0%, transparent 70%);
}

.special-footer-section .text-side::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 106, 0.08) 0%, transparent 70%);
}

/* ==========================================================================
   WOOCOMMERCE SINGLE PRODUCT (for the broken single product page)
   ========================================================================== */
.gfio-product-wrap {
    background: linear-gradient(180deg, #faf7f6 0%, #ffffff 100%);
    padding: 60px 0;
}

.gfio-product-image {
    position: relative;
    background: linear-gradient(135deg, #faf3f1 0%, #f4e4e2 100%);
    border-radius: 4px;
    padding: 40px;
    overflow: hidden;
}

.gfio-product-image::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
}

.gfio-product-image img {
    position: relative;
    z-index: 2;
    max-height: 600px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(45,51,58,0.15));
    transition: transform 0.6s var(--transition-smooth);
}

.gfio-product-image:hover img {
    transform: translateY(-8px);
}

.gfio-product-info {
    padding: 40px 24px;
}

.gfio-product-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
    margin-bottom: 20px;
}

.gfio-product-title {
    font-family: 'Cormorant Garamond', 'bennet-banner', serif;
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--gray-text);
    margin-bottom: 16px;
}

html[dir="rtl"] .gfio-product-title {
    font-family: 'Cairo', serif;
    font-weight: 600;
}

.gfio-product-price {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}

.gfio-product-divider {
    height: 1px;
    width: 60px;
    background: var(--primary);
    margin: 24px 0;
}

.gfio-product-desc {
    font-size: 0.95rem;
    line-height: 1.85;
    color: #555;
    margin-bottom: 28px;
}

.gfio-product-features {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.gfio-product-features li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    color: var(--gray-text);
    display: flex;
    align-items: center;
    gap: 12px;
}

.gfio-product-features li i {
    color: var(--primary);
    font-size: 0.85rem;
}

.gfio-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 24px;
    font-size: 0.8rem;
    color: var(--gray-soft);
}

.gfio-product-meta span strong {
    color: var(--gray-text);
    font-weight: 600;
}

/* WooCommerce add-to-cart button polish */
.gfio-product-info .single_add_to_cart_button,
.gfio-product-info button[type="submit"].button {
    background: var(--gray-text) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 16px 40px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: all 0.4s var(--transition-smooth) !important;
    margin-top: 16px !important;
    display: inline-block !important;
}

.gfio-product-info .single_add_to_cart_button:hover {
    background: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(204, 119, 116, 0.35) !important;
}

.gfio-product-info .quantity input {
    width: 80px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    margin-right: 12px;
}

html[dir="rtl"] .gfio-product-info .quantity input {
    margin-right: 0;
    margin-left: 12px;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }

[data-aos].aos-animate,
[data-aos="move-up"].aos-animate { opacity: 1; transform: translateY(0); }
[data-aos="fade-in"].aos-animate { opacity: 1; }

[data-aos="move-up"] {
    transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
}
[data-aos="fade-in"] { transition: opacity 1s ease; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: var(--gray-text);
    color: rgba(255, 255, 255, 0.85);
    padding: 80px 0 32px;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.site-footer__brand img {
    max-width: 160px;
    margin-bottom: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.site-footer__heading {
    font-family: 'Cormorant Garamond', 'bennet-banner', Georgia, serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: 0.01em;
}

html[dir="rtl"] .site-footer__heading {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }

.site-footer ul li a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.site-footer ul li a:hover {
    color: var(--primary-light);
    padding-left: 4px;
}

html[dir="rtl"] .site-footer ul li a:hover {
    padding-left: 0;
    padding-right: 4px;
}

.site-footer__social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    margin-right: 8px;
    transition: all 0.4s var(--transition-bounce);
}

html[dir="rtl"] .site-footer__social a {
    margin-right: 0;
    margin-left: 8px;
}

.site-footer__social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.site-footer__bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.site-footer__newsletter input[type="email"] {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 0;
    color: #fff;
    width: 100%;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.site-footer__newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.site-footer__newsletter input[type="email"]:focus {
    border-bottom-color: var(--primary);
}

.site-footer__newsletter button {
    background: var(--primary);
    color: #fff;
    border: 0;
    padding: 12px 28px;
    margin-top: 16px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.4s var(--transition-smooth);
}

.site-footer__newsletter button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(204, 119, 116, 0.4);
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 640px) {
    .font-serif-primary.text-2xl,
    .font-serif-primary.text-3xl,
    .font-serif-primary.text-4xl,
    .font-serif-primary.text-5xl {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
        line-height: 1.25;
    }

    .py-12 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .py-28 { padding-top: 3.5rem; padding-bottom: 3.5rem; }

    .gfio-product-image { padding: 24px; }
    .gfio-product-info { padding: 24px 16px; }
    .gfio-product-title { font-size: 1.6rem; }

    .site-footer { padding: 56px 0 28px; }
    .site-footer__bottom { flex-direction: column; text-align: center; }

    /* Mobile menu typography */
    .bg-white.pt-40 nav ul li a {
        font-size: 1.4rem;
        font-weight: 400;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .px-screen-1\/10 { padding-left: 5%; padding-right: 5%; }
}

/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .fixed, #site-header, .site-footer { display: none !important; }
    body { color: #000; background: #fff; }
}

/* ==========================================================================
   MOBILE HAMBURGER FIX
   Verhindert, dass die 3 Striche rechts abgeschnitten werden und
   stellt sicher, dass der Klick funktioniert.
   ========================================================================== */
@media (max-width: 767px) {
    /* Header-Container: rechtes Padding reduzieren damit nichts abgeschnitten wird */
    #site-header > div > div.w-full {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    /* ml-auto Wrapper: kein negatives Overflow, genug Platz */
    #site-header > div > div.w-full > div.ml-auto {
        flex-shrink: 0;
        overflow: visible !important;
    }

    /* Hamburger-Button: grosses Touch-Target, kein Clipping, klickbar */
    #site-header div.block.ml-5 {
        margin-left: 12px !important;
        overflow: visible !important;
        position: relative;
        z-index: 10000 !important;
    }

    #site-header div.block.ml-5 > a {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 28px !important;
        height: 28px !important;
        padding: 4px 0;
        cursor: pointer;
        pointer-events: auto !important;
        position: relative;
        z-index: 10000 !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Die 3 Linien sichtbar machen */
    #site-header div.block.ml-5 > a > div {
        width: 100% !important;
        height: 2px !important;
        background-color: #2d333a !important;
        display: block !important;
        pointer-events: none;
    }
}