/*
Theme Name: Gedankenraum Bonn
Theme URI: https://github.com/elementor/hello-theme/
Description: websplash | Agentur für Internet und Mediendesign
Author: websplash
Author URI: https://websplash.de/
Template: hello-elementor
Version: 1.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


.elementor-widget-text-editor p:last-of-type,
.elementor-widget-theme-post-content p:last-of-type {
    /* to remove margin of last p in text widget */
    margin-bottom: 0;
}

.websplash input {
    /* to hide weird shadow on some iOS input fields */
    outline: 0 !important;
}

.websplash .elementor-field-option input[type="checkbox"],
.websplash .elementor-field-option input[type="radio"] {
    /* align fields middle */
    vertical-align: middle;
}

input[type="date"] {
    /* iOS datefield fix */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.websplash .elementor-field-option label {
    /* pointer cursor for labels of options (checkbox etc.) */
    cursor: pointer;
}

.websplash input[type="checkbox"] {
    /* fix iOS Bug if label is too long not to shrink the input */
    min-width: 20px;
}

.websplash .elementor-field-group .elementor-field-textual:focus {
    /* to not focus fields with border on hover */
    box-shadow: none;
    outline: 0;
}

/* hover effect for icons in buttons */
.elementor-widget-button a.elementor-button .elementor-button-icon {
    -webkit-transition: left 0.2s ease-in;
    -moz-transition: left 0.2s ease-in;
    -o-transition: left 0.2s ease-in;
    -ms-transition: left 0.2s ease-in;
    transition: left 0.2s ease-in;
    left: 0;
    position: relative;
}

.elementor-widget-button a.elementor-button:hover .elementor-align-icon-right {
    left: 10px;
}

/* align the acceptence form checkbox in a way, that it stay left, even the label text is multiple lines long */
.elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.elementor-field-type-acceptance .elementor-field-option input {
    top: 7px;
    position: relative;
}

.elementor-field-type-acceptance .elementor-field-option label {
    padding-left: 10px;
}

.elementor-select-wrapper select:focus {
    box-shadow: none;
}

.elementor-select-wrapper select option {
    color: var(--e-global-color-text);
}

/* hide recaptcha badge if active */
.grecaptcha-badge {
    visibility: hidden;
}

.elementor-video {
    /* fix height issue, after video has been unblocked by borlabs cookie banner */
    height: 100%;
}

/* style pw form on page pw protection at least a little bit nicer per default */
body.elementor-page form.post-password-form {
    display: flex;
    padding: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #eee;
}


.websplash .logo_main {
    z-index: 1;
    position: relative;
    width: 100%;
  max-width:800px;
}


.gr-hero {
    position: relative;
    min-height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.gr-script {
    font-family: 'Parisienne', cursive;
    font-size: clamp(3.6rem, 12vw, 7.4rem);
    color: #3d4a3a;
    line-height: 1
}

.gr-sub {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 6vw, 3.3rem);
    letter-spacing: .36em;
    color: #3d4a3a;
    text-transform: uppercase;
    margin-left: .36em
}

.gr-tag {
    margin-top: 24px;
    font-family: 'Jost', sans-serif;
    font-size: .72rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: #5f6e54
}

.gr-splat {
    position: absolute;
    width: var(--w);
    height: var(--h);
    top: var(--t, auto);
    left: var(--l, auto);
    right: var(--r, auto);
    bottom: var(--b, auto);
    mix-blend-mode: multiply;
    opacity: 0;
    transform: scale(.4);
    pointer-events: none;
    z-index: 5 !important
}

.gr-splat.in {
    animation: grBloom 2.8s cubic-bezier(.16, .8, .3, 1) forwards
}

.gr-slow.in {
    animation-duration: 3.6s
}

@keyframes grBloom {
    0% {
        opacity: 0;
        transform: scale(.35) rotate(-6deg)
    }
    60% {
        opacity: .9
    }
    100% {
        opacity: .82;
        transform: scale(1)
    }
}

.gr-splat svg {
    width: 100%;
    height: 100%;
    display: block
}

.gr-speckle {
    position: absolute;
    border-radius: 50%;
    background: #8b9083;
    opacity: 0;
    mix-blend-mode: multiply;
    pointer-events: none
}

.gr-speckle.in {
    animation: grPop 2s ease forwards
}

@keyframes grPop {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    70% {
        opacity: .5
    }
    100% {
        opacity: .38;
        transform: scale(1)
    }
}





.elementor-location-header .elementor-nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: var(--sage);
  transition: width .35s;
}

.elementor-location-header .elementor-nav-menu > li > a:hover::after,
.elementor-location-header .elementor-nav-menu > li > a.elementor-item-active::after {
   width: 100%;
 }




.tagcloud {
    position: relative;
    width: 100%;
}

/*
 * Sichtbarer WordCloud2-Bereich.
 *
 * Weniger Höhe ist hier absichtlich gewählt:
 * Bei nur sieben Begriffen führt ein sehr hoher Container
 * schnell zu einer vertikalen Verteilung.
 */
.tagcloud-output {
    position: relative !important;
    display: block !important;

    width: 100%;
    height: clamp(280px, 43vw, 220px);

    margin: 0;
    padding: 0;
    overflow: hidden;
}

/*
 * WordCloud2 erzeugt im DOM-Modus span-Elemente.
 * Die absolute Positionierung wird zusätzlich abgesichert,
 * falls Elementor oder Theme-CSS die Darstellung beeinflusst.
 */
.tagcloud-output > .tagcloud-word {
    position: absolute !important;
    display: block !important;
    isolation: isolate;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.25;
    white-space: nowrap;

    box-sizing: content-box;
    transform-origin: center center;
}

.tagcloud-output > .tagcloud-word {
    position: absolute !important;
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: 1.25;
    white-space: nowrap;

    /*
     * Eigener Stacking-Kontext.
     */
    z-index: 0;
    isolation: isolate;
}

.tagcloud-output > .tagcloud-word::before {
    content: "";
    position: absolute;

    /*
     * Nicht negativ, damit Elementor das Element
     * nicht hinter anderen Ebenen versteckt.
     */
    z-index: -1;

    inset: -0.25em -0.45em;

    background-color: var(
            --tag-background,
            #c9cac1
    );

    opacity: var(--tag-pulse-opacity, 0.65);

    transform: scale(0.94);
    transform-origin: center;

    animation:
            tagcloud-background-pulse
            var(--tag-pulse-duration, 4s)
            ease-in-out
            var(--tag-pulse-delay, 0s)
            infinite
            alternate;

    pointer-events: none;
    will-change: transform, opacity, filter;
}

@keyframes tagcloud-background-pulse {
    0% {
        opacity: var(--tag-pulse-opacity, 0.65);
        transform: scale(0.94);
        filter: brightness(0.97);
    }

    100% {
        opacity: 1;
        transform: scale(
                var(--tag-pulse-scale, 1.08)
        );
        filter: brightness(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tagcloud-output > .tagcloud-word::before {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/*
 * Ursprungsliste bleibt zunächst als Fallback sichtbar.
 */
.tagcloud > ul {
    margin: 0;
    padding-left: 1.25em;
}

/*
 * Liste erst ausblenden, wenn WordCloud2 erfolgreich
 * Wörter erzeugt hat.
 */
.tagcloud.is-wordcloud-active > ul {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
    border: 0 !important;
}









.gr-contact{position:relative;max-width:680px;margin:0 auto;text-align:center}
.gr-cwrap{position:relative;padding:clamp(44px,7vw,72px) clamp(28px,6vw,60px)}
.gr-drawframe{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.gr-drawframe rect{fill:none;stroke:#3d4a3a;stroke-width:1.5;stroke-dasharray:2320;stroke-dashoffset:2320}
.gr-drawframe.draw rect{animation:grDraw 3.2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes grDraw{to{stroke-dashoffset:0}}
.gr-cinner{position:relative;z-index:2}


.websplash .elementor .e-form-textarea-base {
    font-size:1rem;
}

.websplash .elementor .e-form-submit-button-base {
    background-color: #868A7C!important;
}

.websplash .elementor .e-form-submit-button-base:hover {
    background-color: #3D4B3A!important;
}

#header {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

#header.header-scrolled,
body:not(.home) #header {
    background-color: var(--e-global-color-192ec1b);
    border-bottom:1px solid var(--e-global-color-cb2ff26);
}

main#content {
    overflow: hidden;
}

.elementor-widget-text-editor a:hover {
    text-decoration: underline;
}



/* Tablet */
@media (max-width: 1024px) {
    .tagcloud-output {
        height: 500px;
    }
    .gr-hero {
        min-height: 50vh;
    }

    .gr-cwrap {
        padding:20px;
    }

    .websplash .elementor .e-form-base {
        padding:0;
    }

    .gr-splat {
        max-width: 150px;
    }

    .gr-fx {
        display:none;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .tagcloud-output {
        height: 300px;
    }

    .tagcloud-output > .tagcloud-word {
        white-space: nowrap;
    }
}