/*
 Theme Name:  GeneratePress Child
 Theme URI:   https://generatepress.com
 Description: Default GeneratePress child theme
 Author:      Rocky Beach Studio
 Author URI:  https://www.rockybeachstudio.de
 Template:    generatepress
 Version:     0.1
*/

:root {
--wp--preset--font-size--small:0.83rem;
--wp--preset--font-size--medium:1.5rem;
--wp--preset--font-size--large:2rem;
--wp--preset--font-size--x-large:3.27rem;
--bgcolor:var(--primary);
--bgmouseover:var(--primary2);
--icon:var(--primary);
--mouseover:var(--primary2);
--buttonmouseover:var(--base);
--navbase:var(--base);
}

@media screen and (max-width:781px) {

:root {
--wp--preset--font-size--small:0.7rem;
--wp--preset--font-size--medium:1.3rem;
--wp--preset--font-size--large:1.65rem;
--wp--preset--font-size--x-large:2rem;
}

}

.home .category-betreiber article.gb-loop-item,
.category-betreiber {
--icon:var(--betreiber);
--mouseover:var(--betreiber2);
}

.home .category-designer article.gb-loop-item,
.category-designer {
--icon:var(--designer);
--mouseover:var(--designer2);
}

.home .category-entwickler article.gb-loop-item,
.category-entwickler {
--icon:var(--entwickler);
--mouseover:var(--entwickler2);
}

.home .category-texter article.gb-loop-item,
.category-texter {
--icon:var(--texter);
--mouseover:var(--texter2);
}

.home .category-agenturen article.gb-loop-item,
.category-agenturen {
--icon:var(--agenturen);
--mouseover:var(--agenturen2);
}

.betreiber,
body.category-betreiber,
body.category-betreiber .site-content {
--bgcolor:var(--betreiber);
--bgmouseover:var(--betreiber2);
}

.designer,
body.category-designer,
body.category-designer .site-content {
--bgcolor:var(--designer);
--bgmouseover:var(--designer2);
}

.entwickler,
body.category-entwickler,
body.category-entwickler .site-content {
--bgcolor:var(--entwickler);
--bgmouseover:var(--entwickler2);
}

.texter,
body.category-texter,
body.category-texter .site-content {
--bgcolor:var(--texter);
--bgmouseover:var(--texter2);
}

.agenturen,
body.category-agenturen,
body.category-agenturen .site-content {
--bgcolor:var(--agenturen);
--bgmouseover:var(--agenturen2);
}

html, body {
width:100%;
/*overflow-x:hidden;*/
}

body {
-webkit-text-size-adjust:none;
}

code {
font-size:inherit;
}

* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-text-size-adjust:none;
}

.silbentrennung {
hyphens:auto;
}

a, b, span, div, ul, li, td, th, form, fieldset, input, select, textarea, p, h1, h2, h3, h4 {
/*font-family:Roboto,Arial,Helvetica,sans-serif;*/
outline:none;
border:0;
}

.entry-content > .gb-container:not(.alignwide):not(.alignfull),
.entry-content > .wp-block-columns:not(.alignwide):not(.alignfull),
.entry-content > .wp-block-group:not(.alignwide):not(.alignfull) {
margin:0 auto !important;
max-width:1140px !important;
}

.entry-content > .gb-container.alignwide,
.entry-content > .wp-block-columns.alignwide,
.entry-content > .wp-block-group.alignwide {
margin:0 auto !important;
max-width:1920px !important;
}

.entry-content > .gb-container.alignfull,
.entry-content > .wp-block-columns.alignfull,
.entry-content > .wp-block-group.alignfull {
margin:0 -40px !important;
max-width:2640px !important;
}

a {
color:var(--contrast);
text-decoration:none;
transition:all .25s;
border-bottom:2px solid transparent;
}

blockquote,
article.gb-loop-item {
border:1px solid #fff;
transition:border-color .5s;
}

/*a.wpel-icon-right,*/
blockquote,
article.gb-loop-item:hover,
article.gb-loop-item:focus,
article.gb-loop-item:focus-within,
article.gb-loop-item:hover a,
article.gb-loop-item:focus a,
article.gb-loop-item:focus-within a,
.generate-columns-container article:hover a,
.generate-columns-container article:focus a,
.generate-columns-container article:focus-within a,
a:focus,
a:hover {
border-color:var(--mouseover);
}

.clearfix {
*zoom:1;
}

       .clearfix:before, .clearfix:after {
       content:' ';
       display:table;
       }

       .clearfix:after {
       clear:both;
       }

.has-text-align-center {
margin-left:auto;
margin-right:auto;
}


/* Navigation */

.site-header {
position:fixed; left:0px; top:0px;
width:100%;
z-index:9998;
background:none;
}

.admin-bar .site-header {
top:32px;
}

.site-logo {
margin-left:auto;
}

.nav-float-right #site-navigation {
margin-left:60px;
margin-right:auto;
}

.main-navigation, 
.main-navigation ul ul {
background:none;
}

.main-navigation .main-nav > ul > li {
margin:0 20px;
}

.main-navigation .main-nav > ul > li a,
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a, 
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):focus > a, 
.main-navigation .main-nav > ul > li.sfHover:not([class*="current-menu-"]) > a, 
.main-navigation .menu-bar-item:hover > a, 
.main-navigation .menu-bar-item.sfHover > a,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
position:relative;
color:inherit;
line-height:1.5;
background:transparent;
transition:all .5s;
padding:0;
border:0;
}

.main-navigation .main-nav ul li a:after {
content:'';
position:absolute; left:0px; bottom:0px;
width:100%; height:2px;
background:transparent;
transition:all .25s;
}

.main-navigation .main-nav ul li a:focus:after,
.main-navigation .main-nav ul li a:hover:after {
background-color:var(--bgcolor);
}

.read-more.button,
.wp-block-button .wp-block-button__link,
.wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link.has-background {
position:relative;
line-height:1.5;
transition:color .5s;
background:transparent !important;
z-index:1;
padding:10px 50px;
}

@media screen and (max-width:781px) {

.read-more.button,
.wp-block-button .wp-block-button__link,
.wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link.has-background {
padding:10px 20px;
}

}

.read-more.button:before,
.wp-block-button .wp-block-button__link:before,
.wp-block-button .wp-block-button__link.has-background:before {
content:'';
position:absolute; left:0px; top:0px;
width:100%; height:100%;
transform:skew(-10deg);
z-index:-1;
background-color:var(--base);
transition:background-color .5s;
}

.read-more.button:before,
.wp-block-button .wp-block-button__link:before,
.wp-block-button .wp-block-button__link:not(.has-background):before,
.wp-block-button .wp-block-button__link.has-background:before,
.wp-block-button .wp-block-button__link.has-background.has-accent-background-color:before {
background-color:var(--bgcolor);
}

.has-inline-mobile-toggle #site-navigation {
z-index:99 !important;
}

.inside-header {
max-width:100%;
background:var(--base);
}

@media screen and (max-width:1279.9px) {

.main-navigation .main-nav > ul {
position:fixed;
right:0px; top:0px;
display:block;
padding-top:104px;
min-width:376px; min-height:100vh;
background:var(--base);
box-shadow:0 0 20px rgba(0,0,0,.4);
float:none;
transition:right .5s ease-in-out;
}

.admin-bar .main-navigation .main-nav > ul {
top:32px;
}

.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
display:block;
right:-500px;
}

.has-inline-mobile-toggle #site-navigation.toggled {
margin:0;
}

.main-navigation .main-nav ul li a {
font-size:1.5rem;
padding:0 2em;
min-width:426px;
}

.main-navigation .main-nav > ul > li:not(.icon) > a:before {
content:'';
position:relative; top:5px;
display:inline-block;
width:25px; height:25px;
background:url('img/pfeil.svg') no-repeat;
background-size:100% 100%;
margin-right:15px;
}

.main-navigation .main-nav > ul > li[class*="current-menu-"] > a:before,
.main-navigation .main-nav > ul > li[class*="current-page-"] > a:before,
.main-navigation .main-nav > ul > li.sfHover > a:before,
.main-navigation .main-nav > ul > li > a:hover:before,
.main-navigation .main-nav > ul > li > a:focus:before {
filter:invert(100%);
}

.main-navigation.toggled .menu-item-has-children:not([class*="current-menu-"]):hover .dropdown-menu-toggle .gp-icon svg,
.main-navigation.toggled .menu-item-has-children:not([class*="current-menu-"]):focus .dropdown-menu-toggle .gp-icon svg,
.main-navigation.toggled .menu-item-has-children:not([class*="current-page-"]):hover .dropdown-menu-toggle .gp-icon svg,
.main-navigation.toggled .menu-item-has-children:not([class*="current-page-"]):focus .dropdown-menu-toggle .gp-icon svg {
fill:var(--base);
stroke:var(--base);
}

.main-navigation .main-nav > ul > li[class*="current-menu-"] > a,
.main-navigation .main-nav > ul > li[class*="current-page-"] > a {
padding:0 2em;
background:var(--bgcolor);
color:var(--base);
}

.main-navigation .main-nav > ul > li[class*="current-menu-"] > .sub-menu a:hover,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > .sub-menu a:focus,
.main-navigation .main-nav > ul > li[class*="current-page-"] > .sub-menu a:hover,
.main-navigation .main-nav > ul > li[class*="current-page-"] > .sub-menu a:focus {
color:var(--bgcolor);
}

.main-navigation.toggled .main-nav li.icon {
display:inline-block;
width:auto;
margin:1em 20px 0 0;
}

.main-navigation.toggled .main-nav .sub-menu {
border:0;
box-shadow:none;
}

.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
display:inline;
height:unset;
float:none;
padding-left:10px;
padding-right:10px;
}

.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle .gp-icon {
display:inline;
}

.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle .gp-icon svg {
width:35px; height:35px;
top:10px;
}

.main-navigation .main-nav ul ul li a {
font-size:1.5rem;
font-weight:300;
padding:10px 60px 10px 70px;
}

.main-navigation .main-nav ul ul li a:before {
position:absolute; left:50px; top:8px;
content:'- ';
}

.main-navigation .main-nav ul li li[class*="current-menu-"] > a {
font-weight:700;
color:var(--bgcolor);
}

}

@media screen and (max-width:768px) {

.inside-header {
padding-left:4%;
padding-right:4%;
}

}

.has-base-background-color {
--bgcolor:var(--base);
}

.has-base-2-background-color {
--bgcolor:var(--base-2);
}

.has-contrast-background-color {
--bgcolor:var(--contrast);
}

.has-accent-background-color {
--bgcolor:var(--accent);
}

.has-primary-background-color,
.main-navigation .main-nav > ul > li {
--bgcolor:var(--primary);
}

.has-primary2-background-color {
--bgcolor:var(--primary2);
}

.has-betreiber-background-color,
.main-navigation .main-nav > ul > li.betreiber {
--bgcolor:var(--betreiber);
}

.has-designer-background-color,
.main-navigation .main-nav > ul > li.designer {
--bgcolor:var(--designer);
}

.has-entwickler-background-color,
.main-navigation .main-nav > ul > li.entwickler {
--bgcolor:var(--entwickler);
}

.has-texter-background-color,
.main-navigation .main-nav > ul > li.texter {
--bgcolor:var(--texter);
}

.has-agenturen-background-color,
.main-navigation .main-nav > ul > li.agenturen {
--bgcolor:var(--agenturen);
}

.main-navigation .main-nav > ul > li.sfHover > a:after,
.main-navigation .main-nav > ul > li:hover > a:after,
.main-navigation .main-nav > ul > li:focus > a:after,
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a:after, 
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):focus > a:after, 
.main-navigation .main-nav > ul > li.sfHover:not([class*="current-menu-"]) > a:after,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a:after,
.main-navigation .main-nav > ul > li > a:hover:after,
.main-navigation .main-nav > ul > li > a:focus:after {
background-color:var(--bgcolor);
}

.main-navigation .main-nav > ul > li.logo a {
top:-3px;
line-height:1.25 !important;
}

.main-navigation .main-nav > ul > li.logo.sfHover > a:after,
.main-navigation .main-nav > ul > li.logo:hover > a:after,
.main-navigation .main-nav > ul > li.logo:focus > a:after,
.main-navigation .main-nav > ul > li.logo:not([class*="current-menu-"]):hover > a:after, 
.main-navigation .main-nav > ul > li.logo:not([class*="current-menu-"]):focus > a:after, 
.main-navigation .main-nav > ul > li.logo.sfHover:not([class*="current-menu-"]) > a:after,
.main-navigation .main-nav > ul > li.logo[class*="current-menu-"] > a:after,
.main-navigation .main-nav > ul > li.logo > a:hover:after,
.main-navigation .main-nav > ul > li.logo > a:focus:after {
background-image:linear-gradient(to right, var(--betreiber) 20%, var(--designer) 40%, var(--entwickler) 60%, var(--texter) 80%, var(--agenturen) 100%);
}

.main-navigation .main-nav > ul > li > ul {
--mouseover:var(--primary);
}

.main-navigation .main-nav > ul > li.betreiber > ul {
--mouseover:var(--betreiber);
}

.main-navigation .main-nav > ul > li.designer > ul {
--mouseover:var(--designer);
}

.main-navigation .main-nav > ul > li.entwickler > ul {
--mouseover:var(--entwickler);
}

.main-navigation .main-nav > ul >li.texter > ul {
--mouseover:var(--texter);
}

.main-navigation .main-nav > ul > li.agenturen > ul {
--mouseover:var(--agenturen);
}

.main-navigation .main-nav > ul > li > ul> li.sfHover > a,
.main-navigation .main-nav > ul > li > ul> li:hover > a,
.main-navigation .main-nav > ul > li > ul> li:focus > a,
.main-navigation .main-nav > ul > li > ul> li:not([class*="current-menu-"]):hover > a, 
.main-navigation .main-nav > ul > li > ul> li:not([class*="current-menu-"]):focus > a, 
.main-navigation .main-nav > ul > li > ul> li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav > ul > li > ul> li > a:hover,
.main-navigation .main-nav > ul > li > ul> li > a:focus, 
.main-navigation .main-nav ul ul .menu-bar-item:hover > a, 
.main-navigation .main-nav ul ul .menu-bar-item.sfHover > a {
background:none;
color:var(--mouseover);
}

.read-more {
position:relative;
margin-left:20px;
}

.read-more:before {
content:'';
position:absolute; left:-18px; top:7px;
border-style:solid;
border-color:var(--icon);
border-width:0 2px 2px 0;
display:inline-block;
padding:4px;
transform:rotate(-45deg);
}

.read-more:hover:before,
.read-more:focus:before {
border-color:var(--mouseover);
}

.read-more.button:hover,
.read-more.button:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
color:var(--buttonmouseover) !important;
}

.read-more.button:hover:before,
.read-more.button:focus:before,
.wp-block-button .wp-block-button__link:hover:before,
.wp-block-button .wp-block-button__link:focus:before {
background-color:var(--bgmouseover) !important;
}

.main-navigation .icon svg {
position:relative;
width:29px; height:29px;
stroke:#000;
fill:#000;
transition:all .5s;
}

.main-navigation .icon.fb svg {
top:5px;
}

.main-navigation .icon.ig svg {
top:6px;
}

.main-navigation .icon.wa svg {
top:5px;
}

.main-navigation .icon.mail svg {
top:6px;
}

.main-navigation .main-nav > ul > li:not(.menu-item-has-children):hover > a svg, 
.main-navigation .main-nav > ul > li:not(.menu-item-has-children):focus > a svg, 
.main-navigation .main-nav > ul > li.sfHover:not(.menu-item-has-children) > a svg {
stroke:var(--mouseover);
fill:var(--mouseover);
} 

.main-navigation .main-nav > ul > li.menu-item-has-children>a {
padding-right:20px;
}

.mobile-menu-control-wrapper .menu-toggle, 
.mobile-menu-control-wrapper .menu-toggle:hover, 
.mobile-menu-control-wrapper .menu-toggle:focus, 
.has-inline-mobile-toggle #site-navigation.toggled {
padding:0;
background:none;
}

@media screen and (max-width:781px) {

.inside-header {
padding-bottom:20px;
}
       
.site-logo {
margin-left:0;
}

}

.menu-toggle .gp-icon svg {
top:10px;
width:40px; height:auto;
stroke:#575756;
fill:#575756;
}

/* Footer */

.site-footer {
display:flex;
flex-direction:column;
}

@media screen and (min-width:781.001px) {

.site-footer {
flex-direction:column-reverse;
}

.site-footer .footer-widgets-container .footer-widget-1 {
padding-right:3em;
flex:2 1 0;
}

.site-footer .footer-widgets-container .footer-widget-2 {
padding-right:3em;
flex:2 1 0;
}

}

.footer-widgets {
width:100%;
max-width:1174px;
margin:0 auto;
}

.site-footer .footer-widgets-container .inside-footer-widgets {
margin:0;
}

.footer-widgets .widget {
margin-bottom:.75em;
}

.site-footer .footer-widgets-container .inner-padding {
padding:0;
}

.footer-widgets .wp-block-heading,
.footer-widgets .wp-block-image {
margin-bottom:1em !important;
}

.footer-widget-5 {
display:flex;
flex-direction:row;
}

.site-footer .icon {
display:inline-block;
width:50px; height:50px;
background:var(--bgcolor);
border-radius:50%;
padding:5px;
text-align:center;
transition:all .5s;
margin-top:-10px;
}

.site-footer .icon + .icon {
margin-left:15px;
}

.site-footer .icon svg {
position:relative;
width:30px; height:30px;
stroke:#fff;
fill:#fff;
transition:all .5s;
}

.site-footer .icon.fb svg {
top:5px;
}

.site-footer .icon.ig svg {
top:5px;
}

.site-footer .icon:hover, 
.site-footer .icon:focus {
background:#fff;
}

.site-footer .icon:hover svg, 
.site-footer .icon:focus svg {
stroke:var(--bgcolor);
fill:var(--bgcolor);
} 

@media screen and (max-width:781px) {

.copyright-bar span {
display:block;
width:100%; height:1px;
overflow:hidden;
text-indent:-10000px;
}

}


@media screen and (min-width:1400.001px) {

.mobil {
display:none;
}

}

@media screen and (max-width:1400px) {

.desktop {
display:none;
}

}


/* Content */

@media screen and (min-width: 769px) {
    .sidebar.is-right-sidebar > .inside-right-sidebar {
        position: sticky;
        top: 100px;
    }
    .home .sidebar.is-right-sidebar > .inside-right-sidebar {
        top: calc(100vh - 1850px);
    }
}

@media screen and (max-width: 1279.9px) {
    .site-content {
        flex-direction: column;
    }
    .container .site-content .content-area {
        width: auto;
    }
    .is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }
    #main {
        margin-left: 0;
        margin-right: 0;
    }
    body:not(.no-sidebar) #main {
        margin-bottom: 0;
    }
    .inside-right-sidebar div[class^=gb-looper] {
    /*flex-direction:row;*/
    column-gap:40px;
    }
    
}

body #page {
padding-top:104px;
}


@media screen and (max-width:781px) {

body #page {
padding-top:100px;
}

}

.generate-columns-container {
height:1500px;
gap:20px;
margin:0 20px;
align-items:flex-start;
flex-flow:column wrap;
align-content:space-between;
}

.generate-columns-container::before,
.generate-columns-container::after {
content:'';
flex-basis:100%;
width:0;
order:2;
}

.generate-columns-container > header {
display:none;
}

blockquote,
.about,
article.gb-loop-item,
.generate-columns-container article {
position:relative;
background-color:#fff;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
overflow:hidden;
padding:20px 40px;
align-items:flex-start !important;
}

article.gb-loop-item,
.generate-columns-container article {
min-height:190px;
cursor:pointer;
}

.about {
overflow:visible;
}

.about img {
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.generate-columns-container article {
display:flex;
align-items:flex-start;
padding:20px 40px 20px 320px;
margin:0;
}

.generate-columns-container article:has(svg) {
padding-left:160px;
}

.generate-columns-container article:nth-child(3n+1) { order: 1; }
.generate-columns-container article:nth-child(3n+2) { order: 2; }
.generate-columns-container article:nth-child(3n)   { order: 3; }

.generate-columns-container .generate-columns.grid-33 {
width:calc((100% - 80px) / 3);
}

.generate-columns-container article .inside-article {
padding:0;
}

.inside-article .post-image {
position:absolute; left:-5px; top:0px;
margin:0;
}

.inside-article .post-image:has(svg) {
top:55px;
}

.inside-article .post-image a:after {
display:none;
}

.gb-loop-item .wp-block-post-featured-image svg,
.inside-article .post-image svg {
width:160px; height:150px;
color:var(--icon);
transition:color .5s;
}

.gb-loop-item .wp-block-post-featured-image svg {
margin-left:-30px;
}

.gb-loop-item:hover .wp-block-post-featured-image svg,
.gb-loop-item:focus .wp-block-post-featured-image svg,
.gb-loop-item:focus-within .wp-block-post-featured-image svg,
.inside-article .post-image a:hover svg,
.inside-article .post-image a:focus svg {
color:var(--mouseover);
}

.gb-loop-item .wp-block-post-featured-image img,
.inside-article .post-image img {
max-width:100%; height:auto; /*320px*/
}

/* Single Post */

@media screen and (min-width:1280px) and (max-width:1679.9px) {

.single-post .site-content {
gap:3rem;
}

.single-post .is-right-sidebar {
width:30%;
}

}

@media screen and (min-width:1680px) {

.single-post .site-content {
gap:9%;
}

.single-post .is-right-sidebar {
width:35%;
}

}

.single-post .featured-image:has(img) + .entry-header {
display:flex;
align-items:center;
min-height:7.2rem;
}

.single-post h1.entry-title {
color:var(--primary);
hyphens:auto;
}

.single-post .featured-image img {
object-fit:contain;
width:auto; height:7.2rem;
}

.single-post .featured-image svg {
width:auto; height:3.6rem;
color:var(--icon);
}

.glossary-item-container {
background:none;
border-bottom:2px dashed var(--icon);
}

.glossary-item-container:after {
/*content:'?';*/
position:relative; top:-10px;
margin-left:5px;
display:inline-block;
width:20px; height:20px;
text-align:center;
background:var(--base-2);
border-radius:50%;
font-size:.8rem;
font-weight:400;
line-height:20px;
color:var(--icon);
}

.tippy-tooltip, 
.glossary-item-inner,
.glossary-item-header,
.glossary-item-description {
color:#000 !important;
font-style:normal;
}

.site-content a.wpel-icon-right {
position:relative;
margin-right:25px;
}

.site-content .wpel-icon-right i.wpel-icon.dashicons-before {
position:absolute; right:-23px; top:-3px;
}

.site-content aside .wpel-icon,
footer .wpel-icon {
display:none;
}

aside h3 {
hyphens:auto;
}

aside .category-aktuelles .excerpt {
display:none;
}


/* Bugs */

.home aside.gb-element-3250e231 {
padding:40px 40px 40px 0;
margin:0;
}

.home aside h2.gb-text-864c7128 {
color:var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation:none !important;
    transition:none !important;
  }
}