/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://example.com/twentytwentyfive-child/
Description: A child theme of the Twenty Twenty-Five WordPress theme
Author: BYOND
Author URI: https://byond.ie
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/* ==========================================================================
   1) RESET / BASIS
   ========================================================================== */

main { margin-bottom: 200px; }
strong { font-weight: 500; }
.wp-site-blocks { padding-bottom: 0 !important; padding-top:0 !important }
/* Gutenberg content: responsive on mobile */
@media (max-width: 900px) {
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: min(100% - 2 * var(--wp--preset--spacing--40, 1rem), var(--wp--style--global--content-size, 1100px));
    }
}

/* Focus: nur bei Keyboard sichtbar, nicht bei Klick/Tap */
:where(.wp-site-blocks *:focus) {
    outline: none;
}
:where(.wp-site-blocks *:focus-visible) {
    outline: 2px solid #f25652;
    outline-offset: 2px;
}
/* Button-Focus (WP Global Styles generiert Spezifität 0,1,1 via theme.json) */
.wp-element-button:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) {
    outline: none;
}
/* Tap-Highlight auf Touch-Geräten entfernen */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   2) TYPOGRAFIE BASIS
   ========================================================================== */

body {
    color: rgb(62, 78, 89) !important;
    background-color:#f9f9f9;
    margin: 0 !important;
    padding: 0 !important;
}

:root :where(p) {
    color: rgb(62, 78, 89)  ;
}

.site-header {
    background-color:#ffffff !important;
    padding-top:15px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.5em 0;
}


/* hero spezifischer text */
p.hero-text {
    font-family: 'new-science-extended', sans-serif;
    color: #f6f6f6;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    margin: 1em 0;
    font-size: 40px;
}

/* ==========================================================================
   3) NAVIGATION
   ========================================================================== */

/* grundfarben & dropdown look (desktop) */
.wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--accent-2); }
ul.wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--accent-2) !important;
    padding:1px;
    border-radius:5px;
    box-shadow:
            rgba(0,0,0,.09) 0 2px 1px,
            rgba(0,0,0,.09) 0 4px 2px,
            rgba(0,0,0,.09) 0 8px 4px,
            rgba(0,0,0,.09) 0 16px 8px,
            rgba(0,0,0,.09) 0 32px 16px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    background: var(--wp--preset--color--accent-2) !important; color: var(--wp--preset--color--custom-white) !important; font-weight:400;
    text-decoration:none; text-transform:uppercase;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
    background: var(--wp--preset--color--custom-white) !important; color: var(--wp--preset--color--accent-2) !important; text-decoration:none !important;
}
.wp-block-navigation a:not(.wp-element-button):hover{ text-decoration:none; }

/* keine zeilenumbrueche in der hauptleiste */
.wp-block-navigation__container > li { white-space: nowrap; }

/* eigener hamburger (icon austauschen) */
button.wp-block-navigation__responsive-container-open svg{ display:none; }
button.wp-block-navigation__responsive-container-open::after{
    content:url('/wp-content/themes/twentytwentyfive-child/assets/images/hamburger_big.svg');
    display:block;
}
button.wp-block-navigation__responsive-container-open{ width:50px; height:50px; }




/* Hamburger Button ab 900px und kleiner anzeigen */
@media (max-width: 900px) {
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* Mobile Container NUR anzeigen wenn geöffnet */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
}

/* Mobile Navigation - NUR unter 900px */
@media (max-width: 900px) {

    figure.header-logo, figure.wp-block-video {
        min-width:250px;
    }

    /* Desktop Navigation verstecken (nur Header, nicht Footer) */
    .wp-block-navigation.site-nav > .wp-block-navigation__container {
        display: none !important;
    }

    /* Transitions nur auf Container deaktivieren, nicht auf alle Kinder */
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-dialog,
    .wp-block-navigation__responsive-close,
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-content {
        transition: none !important;
        animation: none !important;
    }

    /* Verhindere Transform-Animationen auf dem Container */
    .wp-block-navigation__responsive-container {
        transform: none !important;
    }

    /* Mobile Navigation Overlay Styling */
    .wp-block-navigation__responsive-container {
        background: var(--wp--preset--color--accent-2) !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        display: flex !important;
    }

    .wp-block-navigation__responsive-dialog {
        position: relative !important;
        transform: none !important;
        margin: 0 !important;  /* Kein Auto-Margin */
        margin-left: 0 !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Close Button Container */
    .wp-block-navigation__responsive-close {
        position: relative !important;
        transform: none !important;
    }

    /* Close Button mit deinem SVG */
    .wp-block-navigation__responsive-container-close {
        color: var(--wp--preset--color--custom-white) !important;
        padding: 1.5rem !important;
        position: fixed !important;  /* Fixed statt absolute - bleibt oben */
        top: 30px !important;
        right: 2rem !important;
        z-index: 10000 !important;  /* Noch höher für ganz oben */
        display: none !important;
        transform: none !important;
    }

    .is-menu-open .wp-block-navigation__responsive-container-close {
        /*display: block !important;*/
        display: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
        padding: 5px !important;
    }

    .wp-block-navigation__responsive-container-close:hover {
        opacity: 0.7;
    }

    /* Verstecke das Standard SVG und zeige dein eigenes */
    .wp-block-navigation__responsive-container-close svg {
        display: none;
    }

    .wp-block-navigation__responsive-container-close::after {
        content: url('/wp-content/themes/twentytwentyfive-child/assets/images/close_big.svg');
        display: block;
        width: 24px;
        height: 24px;
    }

    /* Navigation Container */
    .wp-block-navigation__responsive-container-content {
        padding: 2rem 0 2rem 1rem !important;  /* Viel weniger padding-top */
        transform: none !important;
        opacity: 1 !important;
        text-align: left !important;
        display: block !important;
    }

    /* Main Menu Items */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 0 !important;
        padding: 0 !important;  /* Kein Padding mehr - ganz links */
        margin: 0 !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        width: auto !important;
        text-align: left !important;
    }

    /* Navigation Links */
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        color: var(--wp--preset--color--custom-white) !important;
        padding: 0.8rem 1rem !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        display: inline-block !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
        width: auto !important;  /* Auto statt fixed width */
        min-width: 180px !important;  /* Mindestbreite */
        text-align: left !important;
        font-size: 17px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 10px !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--wp--preset--color--accent-2) !important;
    }

    /* Current/Active Page - gleicher Stil wie Hover */
    .wp-block-navigation__responsive-container .current-menu-item .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content[aria-current="page"] {
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--wp--preset--color--accent-2) !important;
    }

    /* Submenu Toggle Button - Als kleines Icon neben Services */
    .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle {
        color: var(--wp--preset--color--custom-white) !important;
        padding: 0.8rem 0.5rem !important;
        margin: 0 !important;
        display: inline-flex !important;
        transition: transform 0.2s ease !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle svg {
        stroke: var(--wp--preset--color--custom-white);
        width: 16px;
        height: 16px;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
        transform: rotate(180deg);
    }

    /* Submenu Container */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        background: rgba(0, 0, 0, 0.2) !important;
        padding: 0 !important;
        margin: 0 0 8px 30px !important;  /* Normal spacing, bottom margin für Abstand zu MY WORK */
        border: none !important;
        box-shadow: none !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    /* WordPress versteckt Submenus automatisch - wir überschreiben NUR die Einrückung */

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        border-bottom: none !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
        margin-bottom: 0 !important;
    }

    /* Submenu Links */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-size: 15px !important;  /* Etwas kleiner */
        padding: 0.7rem 0.8rem !important;  /* Etwas weniger Padding */
        margin: 0 !important;
        color: var(--wp--preset--color--custom-white) !important;
        opacity: 1;
        display: inline-block;
        width: auto !important;  /* Auto width */
        min-width: 160px;  /* Mindestbreite */
        text-align: left !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 10px;
        transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--wp--preset--color--accent-2) !important;
    }

    /* Active Submenu Item - gleicher Stil wie Hover */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
        opacity: 1;
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--wp--preset--color--accent-2) !important;
    }

    /* Hamburger Button Styling */
    .wp-block-navigation__responsive-container-open {
        color: var(--wp--preset--color--accent-2) !important;
        position: relative !important;
        z-index: 1001 !important;
    }

    .wp-block-navigation__responsive-container-open svg {
        fill: var(--wp--preset--color--accent-2);
    }
}















/* ==========================================================================
   4) HEADER
   ========================================================================== */

header.site-header.wp-block-template-part{
    /*position: sticky;*/
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    /*transition: transform .35s ease-out, opacity .35s ease-out;*/
}

/* hidden-state: optisch rausgeschoben, bleibt aber im layout */
body.header-hidden header.site-header.wp-block-template-part{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}



/* ==========================================================================
   5) VIDEO BLOECKE
   ========================================================================== */

.wp-block-video video {
    width: 100%;
    height: auto;
    max-width: 340px;
}

@media (max-width: 900px){
    .wp-block-video video {
        width: 75%;
        height: auto;
        max-width: 340px;
    }
}

/* siteorigin button tweak */
.ow-button-base .sowb-button { border: none !important; }

/* ==========================================================================
   6) EXPERTISE BILDER HOVER (optional, basis)
   ========================================================================== */

#img1 img, #img2 img, #img3 img, #img4 img, #img5 img, #img6 img, #img7 img, #img8 img {
    transition: transform 0.3s ease-out;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

/* beispiel hovers waren auskommentiert und bleiben so
#img1 img:hover { transform: scale(1.03); }
... */

/* ==========================================================================
   7) IMAGEBAR
   ========================================================================== */

.imagebar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: space-between !important; /* fix: !important an richtiger stelle */
}

.imagebar .wp-block-column  {
    transition: transform 0.3s ease-out;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.imagebar .wp-block-column.hover-shadow {
    transform: scale(1.03);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

/* 801–1250px: 2 spalten */
@media (min-width: 801px) and (max-width: 1250px) {
    .imagebar > .wp-block-column {
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }
}

/* ≤800px: 1 spalte */
@media (max-width: 800px) {
    .imagebar > .wp-block-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   8) CTA BOX
   ========================================================================== */
.cta-box {
    position: relative;
    padding: 2rem;
    background: #f9f9f9;
    border-radius: 1rem;
    border: none;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.1), -5px -5px 0px white;
    padding: 40px !important;
    transform-origin: center;
    will-change: transform;
    z-index: 0;
    transition: transform 0.3s ease-in-out, background 0.4s ease;  /* background transition hinzugefügt */
    cursor: pointer;
}

.cta-box:before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: #999;
    background-size: 200% 100%;
    transform: translate3d(5px, 10px, 0) scale(0.97);
    filter: blur(5px);
    opacity: 0.6;
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    border-radius: inherit;
    backface-visibility: hidden;
    perspective: 1000px;
}

.cta-box:hover {
    transform: scale(1.02);
    background: #fcfcfc;
}

.cta-box:hover::before {
    transform: translate3d(15px, 25px, 0) scale(0.95);
    filter: blur(18px);
    opacity: 0.5;
}

@keyframes smoothShadowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.cta-box h1, .cta-box h2, .cta-box h3,
.cta-box p, .cta-box .wp-element-button {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.cta-box::after {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
}
/* wp gruppen spacing */
.wp-block-group-is-layout-flex { column-gap: 1rem !important; gap: 1rem !important; }

/* ==========================================================================
   9) BUTTONS
   ========================================================================== */

.wp-element-button {
    background: linear-gradient(180deg, #f25652, #d83733);
    color: #fff;
    padding: 12px 24px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.8s ease;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}
.wp-element-button:hover {
    background: linear-gradient(180deg, #3e4e59, #2d3d49);
}

/* ==========================================================================
   10) SERVICES KACHELN
   ========================================================================== */

section.services { display: flex; flex-wrap: wrap; gap:30px; }

.kachel-link-overlay { position: absolute; inset: 0; z-index: 10; }

.kachel-container {
    flex: 0 0 calc(50% - 20px);
    box-sizing: border-box;
    background-color: #3e4e59;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding:30px;
}
.kachel-container:hover {
    background-color:#f25652;
    animation: myAnim 0.7s ease 0s 1 normal forwards;
}

@keyframes myAnim {
    0%   { transform: scale3d(1, 1, 1); }
    20%  { transform: scale3d(1.01, 0.99, 1); }
    35%  { transform: scale3d(0.99, 1.01, 1); }
    50%  { transform: scale3d(1.005, 0.995, 1); }
    65%  { transform: scale3d(0.995, 1.005, 1); }
    80%  { transform: scale3d(1.001, 0.999, 1); }
    100% { transform: scale3d(1, 1, 1); }
}

/* headings in kachel: konsistente groessen */
.kachel-container h2 { color:#fff; margin-top:0; font-size:42px; }
.kachel-container h3 { color:#fff; margin-top:0; font-size:32px; }

.kachel-button {
    background: #d8dcde;
    font-weight:bold;
    color: #3e4e59;
    padding: 12px 24px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.8s ease;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    font-size:0.8em;
}
.kachel-container:hover .kachel-button { background: #fcdddc; }

@media (max-width: 600px) {
    .kachel-container { flex: 0 0 100%; }
}

.kachel-container .text {
    font-size:22px;
    color:white;
    margin-bottom:20px;
    min-height:100px;
    max-width: 70%;
}

.kachel-container .bgimg {
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0; display: block;
}
.kachel-container .bgimg img {
    position: absolute;
    top: 20px; right: 20px;
    width: 30%; height: auto;
    opacity: 0.15;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
}

/* ==========================================================================
   11) HERO VOLLBREITE
   ========================================================================== */

.wp-block-cover.alignfull.hero-full {
    position: relative;
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
    overflow-x: clip;
    margin-bottom:150px !important;
}
.wp-block-cover.alignfull.hero-full > .wp-block-cover__image-background,
.wp-block-cover.alignfull.hero-full > .wp-block-cover__background {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: none !important;
}
.has-global-padding .wp-block-cover.alignfull.hero-full {
    padding-left: 0;
    padding-right: 0;
}
.wp-block-cover.alignfull.hero-full > .wp-block-cover__inner-container {
    max-width: var(--wp--style--global--content-size, 72rem);
    margin-inline: auto;
    padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 32px));
    padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 32px));
    box-sizing: border-box;
}
.wp-block-cover.alignfull.hero-full,
.wp-block-cover.alignfull.hero-full > .wp-block-cover__image-background {
    contain: layout paint;
    backface-visibility: hidden;
    transform: translateZ(0);
}
html, body, .wp-site-blocks { overflow-x: clip; }

/* ==========================================================================
   12) FOOTER – einfarbiger Hover + Kettenreaktion; Einzel-Icon = nur Zoom
   ========================================================================== */

/* Footer-Wrapper: Grundzustand orange, nichts abschneiden */
footer,
footer > div,
footer .footer-inner,
footer .wp-block-group,
footer .wp-block-group.is-layout-constrained {
    position: relative;
    z-index: 0;
    overflow: visible !important;       /* verhindert Abschneiden beim Bounce/Zoom */
    background: #f25652;                /* Ruhezustand: Orange */
    isolation: isolate;                 /* saubere Ebenen fuer Overlay */
}

/* Inhalt immer ueber Overlay */
footer > div > *,
footer .footer-inner > *,
footer .wp-block-group > *,
footer .wp-block-group.is-layout-constrained > * {
    position: relative;
    z-index: 1;
}

/* Einfarbiges Blau beim Hover ueber Footer (kein Verlauf) */
footer::before,
footer > div::after,
footer .footer-inner::after,
footer .wp-block-group::after,
footer .wp-block-group.is-layout-constrained::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(62, 78, 89);        /* EIN Farbton */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
footer:hover::before,
footer:hover > div::after,
footer:hover .footer-inner::after,
footer:hover .wp-block-group::after,
footer:hover .wp-block-group.is-layout-constrained::after,
footer.footer-touched::before,
footer.footer-touched > div::after,
footer.footer-touched .footer-inner::after,
footer.footer-touched .wp-block-group::after,
footer.footer-touched .wp-block-group.is-layout-constrained::after {
    opacity: 1;
}

/* =========================
   Social Icons – Struktur
   ========================= */

/* Liste nicht beschneiden */
footer .wp-block-social-links { overflow: visible !important; }

/* LI: Traeger fuer Kettenreaktion (Bounce) – KEIN Hintergrund mehr hier */
footer .wp-block-social-links .wp-social-link {
    width: 36px;
    height: 36px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #f25652;                      /* Icon-Farbe im Ruhezustand */
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform;
    /* keine transform-transition hier, sonst Konflikte mit Animation */
}

/* A: weisser Kreis + Icon, zoomt beim Einzel-Icon-Hover */
footer .wp-block-social-links .wp-social-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;

    color: inherit;                      /* Icon-Farbe von LI erben */
    background: #fff;                    /* weisser Kreis liegt jetzt auf dem A */
    border-radius: 50%;
    transform: translateZ(0) scale(1);
    transition: transform 220ms cubic-bezier(.22,1,.36,1), color 0.22s ease;
}

/* SVG sauber faerben */
.wp-social-link a svg path { fill: currentColor; }
.wp-block-social-links .wp-social-link svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.wp-block-social-links .wp-social-link svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.wp-block-social-links .wp-social-link a svg {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
}

/* =========================
   Kettenreaktion beim Footer-Hover – laeuft auf LI (transform)
   ========================= */

@keyframes footer-burst-smooth {
    0%   { transform: translate3d(0,0,0) scale(1); }
    24%  { transform: translate3d(0,-10px,0) scale(1.24);
        animation-timing-function: cubic-bezier(.22,1,.36,1); }
    48%  { transform: translate3d(0, 2px,0) scale(0.992);
        animation-timing-function: cubic-bezier(.22,1,.36,1); }
    68%  { transform: translate3d(0,-1px,0) scale(1.012);
        animation-timing-function: cubic-bezier(.22,1,.36,1); }
    84%  { transform: translate3d(0,0,0) scale(0.998);
        animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

/* Beim Hover ueber den Footer:
   – LI bekommt einmalig den Bounce
   – Farbe auf Blau umstellen (vererbt an A/SVG) */
footer:hover .wp-block-social-links .wp-social-link,
footer.footer-touched .wp-block-social-links .wp-social-link,
footer.footer-scrolled .wp-block-social-links .wp-social-link {
    animation: footer-burst-smooth 700ms linear 1 both;
}

/* Farbe NUR bei Hover und Touch, NICHT bei Scroll */
footer:hover .wp-block-social-links .wp-social-link,
footer.footer-touched .wp-block-social-links .wp-social-link {
    color: rgb(62, 78, 89) !important;   /* gleiches Blau wie Hintergrund */
}

/* Staffelung fuer Kettenreaktion */
footer:hover .wp-block-social-links .wp-social-link:nth-child(1),
footer.footer-touched .wp-block-social-links .wp-social-link:nth-child(1),
footer.footer-scrolled .wp-block-social-links .wp-social-link:nth-child(1) { animation-delay:   0ms; }
footer:hover .wp-block-social-links .wp-social-link:nth-child(2),
footer.footer-touched .wp-block-social-links .wp-social-link:nth-child(2),
footer.footer-scrolled .wp-block-social-links .wp-social-link:nth-child(2) { animation-delay:  80ms; }
footer:hover .wp-block-social-links .wp-social-link:nth-child(3),
footer.footer-touched .wp-block-social-links .wp-social-link:nth-child(3),
footer.footer-scrolled .wp-block-social-links .wp-social-link:nth-child(3) { animation-delay: 160ms; }
footer:hover .wp-block-social-links .wp-social-link:nth-child(4),
footer.footer-touched .wp-block-social-links .wp-social-link:nth-child(4),
footer.footer-scrolled .wp-block-social-links .wp-social-link:nth-child(4) { animation-delay: 240ms; }
footer:hover .wp-block-social-links .wp-social-link:nth-child(5),
footer.footer-touched .wp-block-social-links .wp-social-link:nth-child(5),
footer.footer-scrolled .wp-block-social-links .wp-social-link:nth-child(5) { animation-delay: 320ms; }

/* =========================
   Einzel-Icon-Hover – nur Zoom auf A, kein Bounce
   ========================= */

/* nur das gehoverte Icon zoomt weich rein und beim Mouseout wieder raus */
footer .wp-block-social-links .wp-social-link:hover > a,
footer .wp-block-social-links .wp-social-link:focus-within > a {
    color: rgb(62, 78, 89);              /* Farbangleich */
    transform: translateZ(0) scale(1.10);
}

/* wichtig: NICHT die Animation des LI ueberschreiben,
   damit beim Mouseout KEIN Bounce erneut startet */
footer .wp-block-social-links .wp-social-link:hover {
    /* keine animation-aenderung hier */
}

/* Barrierearmut */
@media (prefers-reduced-motion: reduce) {
    footer::before,
    footer > div::after,
    footer .footer-inner::after,
    footer .wp-block-group::after,
    footer .wp-block-group.is-layout-constrained::after { transition: none; }
    footer:hover .wp-block-social-links .wp-social-link { animation: none; }
    footer .wp-block-social-links .wp-social-link a { transition: color 0.22s ease; }
}

footer{
    position: relative;
    /* overflow: visible;  // falls du Schatten ausserhalb sehen willst */
    isolation: isolate;    /* sauberer Layer für Pseudo-Elemente */
}

footer::before{
    content: "";
    position: absolute;
    inset: -24px -24px 10px -24px; /* lässt den Blur über den Rand hinausreichen */
    z-index: -1;  /* hinter dem Inhalt, aber noch im selben Kontext */
    background: linear-gradient(90deg,
    #f25652 0%, #3e4e59 25%, #f25652 50%, #3e4e59 75%, #f25652 100%);
    background-size: 200% 100%;
    animation: smoothShadowMove 8s linear infinite;

    /* Schatten-Feeling */
    transform: translate3d(5px, 10px, 0) scale(0.98);
    filter: blur(20px);
    opacity: 0.4;
    border-radius: inherit;
    pointer-events: none;
    will-change: background-position, transform, filter, opacity;
    backface-visibility: hidden;
}

/* unbedingt nötig */
@keyframes smoothShadowMove{
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}


/* optionale wellen-varianten sind bewusst auskommentiert geblieben */
/* ... */

.inset {
    background-color: #f9f9f9 !important;
}
.inset {
    background-color: #f9f9f9 !important;
    box-shadow: 8px 8px 8px rgba(0,0,0,0.1),
    -5px -5px 0px white;
    padding:40px !important;
}

/* ==========================================================================
   13) FOOTER – Mobile: linksbündig stacken
   ========================================================================== */

@media (max-width: 781px) {
    /* Nav + Social-Icons linksbündig */
    footer .is-content-justification-right {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    /* Nav-Items linksbündig (UL hat eigenes align-items: flex-end + Browser-Default padding) */
    footer .wp-block-navigation__container {
        align-items: flex-start !important;
        padding-inline-start: 0 !important;
    }
    /* Copyright-Zeile stacken und linksbündig */
    footer .is-content-justification-space-between {
        justify-content: flex-start !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* Constrained-Layout-Kinder: margin-left: auto Override entfernen */
    footer .is-layout-constrained > * {
        margin-left: 0 !important;
    }
    /* Copyright rechter Absatz linksbündig */
    footer .has-text-align-right {
        text-align: left !important;
    }
}

/* Footer Tablet (782–1200px): Logo und Copyright bündig zur Spalten-Kante */
@media (min-width: 782px) {
    footer .wp-block-site-logo {
        margin-left: 0 !important;
    }
    footer .wp-block-group.alignfull {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}