/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme
Description: Hello Elementor Child Theme
Author: GDA Technology
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

h1, h2, h3, h4, h5, h6 {
    hyphens: auto;
    word-break: break-word;
}

.elementor-location-header {
    /* Stellschrauben fuer den kompakten Zustand. */
    --gda-header-bg: #ffffff;
    --gda-header-text: #1a1a1a;
    --gda-logo-height: 150px;
    --gda-logo-height-compact: 56px;
    --gda-header-padding-compact: 6px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: translateY(0);
    will-change: transform;
    /* Gilt beim Einfahren (Klasse wird entfernt): schnell zurueck. */
    transition: transform 250ms ease-out;
}

body.hide-header .elementor-location-header {
    transform: translateY(-100%);
    /* Gilt beim Ausfahren (Klasse wird gesetzt): langsam nach oben raus. */
    transition: transform 600ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
    .elementor-location-header,
    body.hide-header .elementor-location-header {
        transition: none;
    }
}

/* --- Kompakter Zustand: sobald die Seite nicht mehr ganz oben steht --- */

/* Der aeussere Elementor-Container traegt den Hintergrund und das Padding. */
.elementor-location-header > .e-con {
    transition: background-color 250ms ease-out, padding 250ms ease-out;
}

body.solid-header .elementor-location-header > .e-con {
    background-color: var(--gda-header-bg);
}

/* Die inneren Container bringen eigene vertikale Abstaende mit. Im kompakten
   Zustand raus damit - nur so wird der Header wirklich flacher, ohne dass
   sich an den Schriftgroessen etwas aendert. */
body.solid-header .elementor-location-header > .e-con > .e-con-inner,
body.solid-header .elementor-location-header .e-con.e-child {
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --margin-block-start: 0px;
    --margin-block-end: 0px;
}

/* Logo verkleinern. Der Ausgangswert muss zur aktuellen Logo-Groesse passen
   (siehe min-height in inc/assets/css/basic.min.css). */
.elementor-location-header .elementor-widget-image img {
    height: auto;
    width: auto;
    max-height: var(--gda-logo-height);
    transition: max-height 250ms ease-out;
}

/* min-height sticht max-height - im kompakten Zustand muss sie deshalb weg,
   sonst bleibt das Logo auf seiner vollen Hoehe stehen und ragt aus dem
   Header heraus. */
body.solid-header .elementor-location-header .elementor-widget-image img {
    min-height: 0;
    max-height: var(--gda-logo-height-compact);
}

/* Menuefarben auf weissem Grund. Loeschen, falls der Text ohnehin dunkel ist. */
body.solid-header .elementor-location-header .e-n-menu {
    --n-menu-title-color-normal: var(--gda-header-text);
    --n-menu-title-color-hover: var(--gda-header-text);
    --n-menu-title-color-active: var(--gda-header-text);
}

@media (prefers-reduced-motion: reduce) {
    .elementor-location-header > .e-con,
    .elementor-location-header .elementor-widget-image img {
        transition: none;
    }
}

/* --- Kachel-Grid (Loop Grid): Hover-Zoom, Schweben, wandernder Schatten --- */

.gda-tile-grid {
    /* Stellschrauben fuer den Hover-Effekt. */
    --gda-tile-scale: 1.03;
    --gda-tile-shadow-color: rgba(0, 0, 0, 0.30);
    --gda-tile-sun-duration: 14s;
    --gda-tile-transition: 400ms;
}

/* Die Kacheln liegen mit 1px Abstand buendig nebeneinander. Ohne eigenen
   Stapelkontext schiebt sich die vergroesserte Kachel unter die naechste. */
.gda-tile-grid .e-loop-item {
    position: relative;
    z-index: 0;
}


.gda-tile-grid .e-loop-item:nth-of-type(1) > .elementor-element:before {
    background: rgba(94, 177, 174, 0.5);
}
.gda-tile-grid .e-loop-item:nth-of-type(2) > .elementor-element:before {
    background: rgba(245, 156, 0, 0.5);
}
.gda-tile-grid .e-loop-item:nth-of-type(3) > .elementor-element:before {
    background: rgba(27, 27, 27, 0.5);
}
.gda-tile-grid .e-loop-item:nth-of-type(4) > .elementor-element:before {
    background: rgba(0, 159, 227, 0.5);
}


.gda-tile-grid .e-loop-item:hover,
.gda-tile-grid .e-loop-item:focus-within {
    z-index: 2;
}

/* Das verlinkte <a> ist der eigentliche Kachel-Container (.e-con). */
.gda-tile-grid .e-loop-item > .e-con {
    position: relative;
    transition: transform var(--gda-tile-transition) cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Eigene Ebene nur fuer den Schatten: so kann er weich ein- und ausblenden,
   waehrend die Wander-Animation unabhaengig davon laeuft. Ausserhalb des
   Hovers ist die Animation pausiert - sie friert beim Verlassen im
   aktuellen Winkel ein und kostet im Ruhezustand keine Rechenzeit. */
.gda-tile-grid .e-loop-item > .e-con::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--gda-tile-transition) ease;
    animation: gda-tile-sun var(--gda-tile-sun-duration) linear infinite;
    animation-play-state: paused;
}

/* Nur echte Zeigergeraete: auf Touch bleibt :hover sonst nach dem Tippen kleben. */
@media (hover: hover) and (pointer: fine) {
    .gda-tile-grid .e-loop-item:hover > .e-con,
    .gda-tile-grid .e-loop-item:focus-within > .e-con {
        transform: scale(var(--gda-tile-scale));
    }

    .gda-tile-grid .e-loop-item:hover > .e-con::after,
    .gda-tile-grid .e-loop-item:focus-within > .e-con::after {
        opacity: 1;
        animation-play-state: running;
    }
}

/* Der Schattenwurf wandert im Uhrzeigersinn. Die Y-Werte sind bewusst nach
   unten verschoben (-6px bis +18px statt symmetrisch), damit das Licht nie
   von unten zu kommen scheint. */
@keyframes gda-tile-sun {
    0%,
    100%  { box-shadow: -16px   6px 34px var(--gda-tile-shadow-color); }
    12.5% { box-shadow: -11px  -2px 30px var(--gda-tile-shadow-color); }
    25%   { box-shadow:    0   -6px 28px var(--gda-tile-shadow-color); }
    37.5% { box-shadow:  11px  -2px 30px var(--gda-tile-shadow-color); }
    50%   { box-shadow:  16px   6px 34px var(--gda-tile-shadow-color); }
    62.5% { box-shadow:  11px  14px 38px var(--gda-tile-shadow-color); }
    75%   { box-shadow:    0   18px 40px var(--gda-tile-shadow-color); }
    87.5% { box-shadow: -11px  14px 38px var(--gda-tile-shadow-color); }
}

@media (prefers-reduced-motion: reduce) {
    .gda-tile-grid .e-loop-item > .e-con {
        transition: none;
    }

    .gda-tile-grid .e-loop-item:hover > .e-con,
    .gda-tile-grid .e-loop-item:focus-within > .e-con {
        transform: none;
    }

    .gda-tile-grid .e-loop-item > .e-con::after {
        animation: none;
        transition: none;
        box-shadow: 0 12px 32px var(--gda-tile-shadow-color);
    }
}

/* --- Scroll-to-Top-Button unten rechts --- */

/* Sichtbar ist der Button nur beim Runterscrollen. Die Richtung kommt als
   Klasse "gda-scroll-down" am <body> aus inc/assets/js/header-scroll.js -
   der Button laeuft dadurch synchron zum ausfahrenden Header. */
.gda-to-top {
    /* Stellschrauben. */
    --gda-to-top-bg: #003F7A;
    --gda-to-top-bg-hover: #00538f;
    --gda-to-top-color: #ffffff;
    --gda-to-top-size: 64px;
    --gda-to-top-offset: 24px;
    --gda-to-top-in: 250ms;   /* Einfahren: zuegig, wie beim Header. */
    --gda-to-top-out: 400ms;  /* Ausfahren: etwas ruhiger. */

    position: fixed;
    right: var(--gda-to-top-offset);
    bottom: var(--gda-to-top-offset);
    /* Unter dem Header (z-index: 999), aber ueber normalem Seiteninhalt. */
    z-index: 990;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gda-to-top-size);
    height: var(--gda-to-top-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--gda-to-top-bg);
    color: var(--gda-to-top-color);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    appearance: none;

    /* Ruhezustand: ausgeblendet und unter den unteren Rand geschoben.
       visibility haelt den Button dabei aus der Tab-Reihenfolge raus -
       verzoegert, damit die Ausblend-Animation noch sichtbar durchlaeuft. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--gda-to-top-size) + var(--gda-to-top-offset)));
    transition:
        opacity var(--gda-to-top-out) ease-in,
        transform var(--gda-to-top-out) ease-in,
        background-color var(--gda-to-top-in) ease-out,
        visibility 0s linear var(--gda-to-top-out);
}

.gda-to-top svg {
    display: block;
}

body.gda-scroll-down .gda-to-top {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity var(--gda-to-top-in) ease-out,
        transform var(--gda-to-top-in) ease-out,
        background-color var(--gda-to-top-in) ease-out,
        visibility 0s;
}

.gda-to-top:focus-visible {
    outline: 2px solid var(--gda-to-top-bg);
    outline-offset: 3px;
}

/* Nur echte Zeigergeraete: auf Touch bleibt :hover sonst nach dem Tippen kleben. */
@media (hover: hover) and (pointer: fine) {
    body.gda-scroll-down .gda-to-top:hover,
    body.gda-scroll-down .gda-to-top:focus-visible {
        background-color: var(--gda-to-top-bg-hover);
        transform: translateY(0) scale(1.06);
    }
}

/* Auf kleinen Screens etwas naeher an die Ecke, Trefferflaeche bleibt > 44px. */
@media (max-width: 767px) {
    .gda-to-top {
        --gda-to-top-offset: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gda-to-top,
    body.gda-scroll-down .gda-to-top {
        transition: none;
        transform: none;
    }

    /* Ohne Transform darf der Button im Ruhezustand nicht stehen bleiben. */
    .gda-to-top {
        visibility: hidden;
    }

    body.gda-scroll-down .gda-to-top:hover,
    body.gda-scroll-down .gda-to-top:focus-visible {
        transform: none;
    }
}