/*   
Theme Name: FKuebler
Theme URI: https://fkuebler.de
Description: Minimalistisches Template
Author: Frank Kübler
Author URI: https://fkuebler.de
*/

@font-face {
  font-display: swap;
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/bitter-v40-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
}

:root {
    --text-size-standard:16px;
    --text-color:#141412;
    --text-color-2:#07649f;
    --text-size-small:14px;
    --text-size-h1:36px;
    --text-size-h2:28px;
    --text-size-h3:24px;
    --text-size-h4:21px;
    --line-height-headline:1.1;
    --line-height-headline-2:1.2;
    --padding-inner:16px;
    --hover-bgcolor:#F9F5F0;
    --color-5:#F2EAD3;
    --backgroundcolor-green:#e6f4e6;
    --color-green:#36a934;
    --color-violet:#941681;
}
@media (min-width:1024px) {
    :root {
        --text-size-standard:20px;
        --text-size-h1:56px;
        --text-size-h2:48px;
        --text-size-h3:32px;
        --text-size-h4:24px;
    }
}

@keyframes rotate {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}

::selection { background-color:var(--color-5); }
.has-accent-3-background-color ::selection { background-color:#E2DAC6; }

* { box-sizing:border-box; scroll-margin-top:100px; }
html { scroll-behavior:smooth; }
body { font-family:'Source Sans 3',sans-serif; color:var(--text-color); font-weight:400; font-size:var(--text-size-standard); line-height:1.4; margin:0; padding:0; }

body::after { content:''; display:block; width:100%; height:50vw; background:no-repeat url(assets/images/dorfleben-logo-part-one.png) bottom right -10vw / 120vw;
    position:fixed; bottom:0; z-index:-1; opacity:0.065; }
@media (min-width:768px) {
    body::after { background:no-repeat url(assets/images/logo-dorfleben-wrestedt.svg) bottom -20px right 5vw / 60%; }
}
@media (min-width:1280px) {
    body::after { background:no-repeat url(assets/images/logo-dorfleben-wrestedt.svg) bottom -40px right calc(50% - 400px) / 800px; }
}

/* some backend styles */
#adminmenumain,
.components-dropdown__content,
.components-popover__content,
.interface-interface-skeleton__sidebar { font-size:13px; }
.editor-visual-editor__post-title-wrapper { margin-top:0; }
.editor-visual-editor__post-title-wrapper .wp-block-post-title { font-family:'Source Sans 3',sans-serif; font-size:18px; padding:min(5vw,50px); margin-bottom:0; }
.editor-visual-editor__post-title-wrapper .wp-block-post-title::before { content: 'Seitentitel: '; }
.is-root-container > .wp-block-group { padding-top:min(10vw,64px); padding-bottom:min(10vw,64px);  }
.block-editor-block-list__layout.is-root-container > .wp-block-group > * { max-width:min(90%,1008px); margin-left:auto; margin-right:auto; }

h1 { margin:0 0 min(10vw,64px) 0; font-family:'Bitter',serif; font-size:var(--text-size-h1); font-weight:500; line-height:var(--line-height-headline); hyphens:auto; }
h2 { margin:0 0 min(5vw,32px) 0; font-family:'Bitter',serif; font-size:var(--text-size-h2); font-weight:500; line-height:var(--line-height-headline); hyphens:auto; }
h3,
h2.tribe-events-widget-events-list__header-title { margin:0 0 min(5vw,32px) 0; font-family:'Bitter',serif; font-size:var(--text-size-h3); font-weight:500; line-height:var(--line-height-headline); hyphens:auto; }
h4 { margin:0 0 min(4vw,26px) 0; font-family:'Bitter',serif; font-size:var(--text-size-h4); font-weight:500; line-height:var(--line-height-headline); hyphens:auto; }

:is(p:not(.has-small-font-size),ul,ol,.wp-block-buttons) + :is(h1,h2,h3,h4) { margin-top:min(10vw,64px); }
h5,h6 { margin:0 0 8px 0; font-weight:500; font-size:var(--text-size-h4); line-height:var(--line-height-headline-2); }
:is(p:not(.has-small-font-size),ul,ol) + :is(h4,h5,h6) { margin-top:min(5vw,32px); }
figure + h4 { margin-top:16px; }
.has-small-font-size,
.overline { margin-bottom:8px; color:var(--text-color-2); font-family:'Source Sans 3',sans-serif; font-size:var(--text-size-small); font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }
p + .wp-block-buttons,
.wp-block-columns h4 + p:not(.has-small-font-size),
h4+ul,
h4+ol { margin-top:15px; }
@media (min-width:1024px) {
    p + .wp-block-buttons,
    .wp-block-columns h4 + p:not(.has-small-font-size),
    h4+ul,
    h4+ol { margin-top:32px; }
}
img { vertical-align:top; height:auto; max-width:100%; }
a,
a:visited { color:var(--text-color); text-underline-offset:15%; text-decoration-thickness:1px; text-decoration-line:underline; }
a:hover { color:var(--text-color-2); text-underline-offset:15%; text-decoration-thickness:1px; text-decoration-line:underline; }
p { margin:0 0 15px 0; }
p:last-child { margin-bottom:0; }
b,strong { font-weight:700; }
hr { border:0; border-top:solid 2px var(--text-color); margin:40px 0; }
.wp-block-list li + li { margin-top:12px; }

.contentWidth { width:min(90%,1180px); margin-left:auto; margin-right:auto; position:relative; }

/* Header - Logo - Navigation */
.pageHeader { position:fixed; background-color:#fff; box-shadow:rgba(0,0,0,0) 0 1px 3px; top:0; left:0; width:100%; max-height:100vh; overflow:auto; z-index:100; }
.pageHeader .logo { margin-left:5%; display:flex; height:64px; align-items:center; }
.pageHeader .logo a { display:block; }
.pageHeader .logo img { width:min(calc(100% - 68px),370px); }

#mobileOpener { display:inline-block; height:44px; width:60px; position:absolute; top:11px; right:calc(5% - 15px); vertical-align:bottom; cursor:pointer; }
#mobileOpener span,
#mobileOpener span:after,
#mobileOpener span:before { display:block; width:30px; height:4px; border-radius:2px; background-color:var(--text-color); position:absolute; transition:0.3s ease; }
#mobileOpener span { top:20px; left:15px; }
#mobileOpener span:after { content:''; top:-9px; left:0; }
#mobileOpener span:before { content:''; top:9px; left:0; }
#mobileOpener.open span { transform:rotate(-45deg); transition:0.3s ease; }
#mobileOpener.open span:after { transform:rotate(-90deg); top:0; }
#mobileOpener.open span:before { opacity:0; }

#mainNavi { font-size:17px; line-height:24px; }
#mainNavi a { color:var(--text-color); }

@media (max-width: 1023px) {
    .pageHeader { transition:all 1.5s; }
    .pageHeader .contentWidth { width:100%; }
    #mainNavi { display:none; font-size:22px; text-align:center; background-color:#fff; height:calc(100vh - 72px); }
    #mainNavi > div > ul { list-style-type:none; margin:0; padding:32px 0 0 0; }
    #mainNavi > div > ul li { display:block; }
    #mainNavi > div > ul > li { padding-bottom:10px; }
/*    #mainNavi > div > ul > li.page_item_has_children::after { position:absolute; top:15px; right:15px; content:''; display:block; width:16px; height:16px; background:url(assets/images/chevron-down-lightgrey.svg) center / contain; transition:all 0.5s; }
    #mainNavi > div > ul > li.active.page_item_has_children::after { transform:rotate(180deg); }*/
    #mainNavi > div > ul a { display:block; padding:12px 0; text-decoration:none; }
    #mainNavi > div > ul > li > ul { padding:0 0 10px 0; }
    #mainNavi > div > ul ul a { padding:8px 0 8px 0; font-size:17px; }
    #mainNavi > div > ul > li.current_page_item:not(.hasSub) > a,
    #mainNavi > div > ul ul li.current_page_item > a { text-decoration-line:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
}

@media (min-width:1024px) {
    .pageHeader { overflow:visible; }
    .pageHeader .logo { padding:6px 0 0 0; margin:0; height:auto; }
    .pageHeader .logo img { height:auto; width:100%; }

    #mobileOpener { display:none; }
    #mainNavi { display:block!important; }
    #mainNavi > div > ul { display:flex!important; justify-content:center; list-style-type:none; padding:0; margin:12px 0 0 0; background-color:#f7f5e7; line-height:46px; }
    #mainNavi > div > ul > li { position:relative; }
    #mainNavi > div > ul > li > a { cursor:pointer; padding:0 20px; white-space:nowrap; text-decoration:none; display:block; }
    #mainNavi > div > ul li.current_page_item > a { text-decoration-line:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
    #mainNavi > div > ul > li a:hover { background-color:#F4991A; color:#fff; transition:all 0.5s; }
    
    #mainNavi > div > ul ul { list-style-type:none; margin:0; padding:0; }
    #mainNavi .sub-menu { display:none; position:absolute; background-color:#f7f5e7; top:46px; left:0; z-index:10; }
    #mainNavi > div li.page_item_has_children.showSub .children,
    #mainNavi .menu-item-has-children:hover > .sub-menu { display:block; }
    #mainNavi .sub-menu a { padding:15px 18px; display:block; line-height:22px; font-size:17px; text-decoration:none; }
    #mainNavi .sub-menu .current_page_item > a { background-color:var(--grey); color:var(--lightgrey)!important; }
}

@media (min-width: 1180px) {
    #mainNavi { font-size: 17px; }
    #mainNavi > div { gap:20px; }
    #mainNavi > div > li > a { padding:12px 18px; }
}

.mainContent { padding-top:69px; max-width:1600px; margin:0 auto; }
@media (min-width: 1024px) {
    .mainContent { padding-top:min(calc(12vw + 46px),202px); }
}
.mainContent :where(figure) { margin-bottom:16px; }
.mainContent figure:last-child { margin-bottom:0; }
.mainContent > .wp-block-group { padding:min(10vw,64px) 0!important; }
.mainContent > * { max-width:min(90%,1180px); margin-left:auto; margin-right:auto; }
/*.mainContent .wp-block-group > .wp-block-columns,
.mainContent .wp-block-group > .wp-block-table { max-width:min(90%,1040px); }*/

.wp-block-group.has-background > * { width:90%; margin-left:auto; margin-right:auto; }

@media (max-width: 599px) {
    .mainContent .wp-block-group > .wp-block-table { max-width:unset; }
    .wp-block-group.has-background { max-width:100%; }
}
.wp-block-columns { margin-top:min(10vw,64px); margin-bottom:min(10vw,64px); column-gap:var(--padding-inner); row-gap:min(10vw,64px); }
.wp-block-columns:first-child { margin-top:0; }
.wp-block-columns:last-child { margin-bottom:0; }
/*
@media (min-width:1024px) {
    .wp-block-column > *:not(figure) { margin-left:var(--padding-inner); margin-right:var(--padding-inner); }
}*/
.wp-block-column figure + .overline,
.wp-block-column figure + .has-small-font-size { margin-top:40px; }
.wp-block-column .wp-block-list { padding-left:16px; }

.mainContent .wp-block-cover,
.mainContent .wp-block-cover-image { min-height:min(54vw,592px); padding:32px 16px; }
.mainContent .wp-block-cover .wp-block-heading { line-height:1; }
.mainContent .has-small-font-size { font-size:14px!important; }

.mainContent .wp-block-table td,
.mainContent .wp-block-table th { /*font-size:var(--text-size-small);*/ font-weight:500; border:0; padding:26px 16px; text-align:left; }
.mainContent .wp-block-table th { padding:5px 16px; }
.mainContent .wp-block-table thead { border-bottom:2px solid #12211F; }
.mainContent .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color:#F2EAD3; }

.wp-block-image.is-style-rounded img,
.wp-block-image .is-style-rounded img { border-radius:92px 0 0 0; }
.wp-block-group.center,
.wp-block-buttons.center { text-align:center; justify-content:center; }
.wp-element-button,
.wp-block-button__link { color:#fff!important; text-decoration:none!important; transition:0.5s; }
.wp-element-button:hover,
.wp-block-button__link:hover { color:#fff; background-color:var(--color-violet); } 

.wp-block-buttons .is-style-outline > div, 
.mainContent .wp-block-button.is-style-outline a { border-color:var(--text-color); color:var(--text-color)!important; }
.mainContent .wp-block-button.is-style-outline a:hover { color:#fff!important; background-color:#39685D; border-color:#39685D; }

.wp-block-table th { white-space:nowrap; }

/* Footer */
.pageFooter { color:#fff; background-color:#220e10; font-size:18px; padding:min(10vw,50px) 5%; }
.pageFooter .contentWidth { display:flex; flex-direction:column; gap:40px; text-align:center; }
.pageFooter .footerLogo a { display:block; margin-bottom:22px; }
.pageFooter h3 { color:#fff; }
.pageFooter a,
.pageFooter a:visited { color:#fff; text-decoration:none; }
.pageFooter a:hover { color:#fff; text-underline-offset:15%; text-decoration-thickness:1px; text-decoration-line:underline; }
.footerLogo img { width:min(24vw,180px); animation:rotate 35s linear infinite; }

.footerNavi { background-color:#f7f5e7; padding:15px; text-align:center; }
.footerNavi ul { list-style-type:none; margin:0; padding:0; }
.footerNavi li { display:inline-block; margin:0 10px; }
.footerNavi a { font-size:14px; color:#686758!important; }

@media (min-width:1023px) {
    .pageFooter .contentWidth { flex-direction:row; justify-content:space-between; text-align:left; }
    .pageFooter .footerLogo { width:17%; }
    .footerLogo img { width:100%; }
}

.wp-block-buttons + p { margin-top:15px; }
.wp-block-details + .wp-block-details { margin-top:15px; }


.tribe-events-widget .tribe-events-widget-events-list__event-date-tag { background-color:#eee; padding:8px 0; margin-right:15px; }
.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-datetime { justify-content:center; }
.tribe-common--breakpoint-xsmall.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-daynum {  font-size:30px; }
.tribe-common h3 { font-size:var(--text-size-standard); font-family:'Source Sans 3',sans-serif; }
.tribe-events-calendar-list__event-date-tag-datetime { background-color:#eee; height:65px; }
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-top-bar,
.tribe-common button[disabled] { display:none; }

.wp-block-latest-posts__list li + li { margin-top:26px; }

#searchform { display:flex; width:300px; }
input#s { height:40px; width:220px; }
#search_submit { background-color:var(--color-green); appearance:none; border:none; border-radius:0; color:#fff; padding-left:10px; padding-right:10px; }