@charset "UTF-8";

.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; } img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; } .mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
:root {
--orange: #f0411d;
--bgOrange: #f95645;
--mw: 1312;
--gap: 20;
--gapP: calc((var(--gap) / var(--mw)) * 100%);
--col: 77;
--colP: calc((var(--col) / var(--mw)) * 100%);
--logo: 192;
--logoP: calc((var(--logo) / var(--mw)) * 100%);
--logoImageP: calc((var(--logo) / var(--mw)) * 100%);
--naviwidth: 240;
--naviwidthP: calc((var(--naviwidth) / var(--mw)) * 100%);
--regelwidth: 514;
--regelwidthP: calc(var(--regelwidth) / var(--mw) * 100%);
--fliestextWidth: 560;
--fliestextWidthP: calc(var(--fliestextWidth) / var(--mw) * 100%);
--fliestextWidthHome: 504;
--fliestextWidthHomeP: calc(var(--fliestextWidthHome) / var(--mw) * 100%);
--headerimage: 104x;
--headerimageP: calc(var(--headerimage) / var(--mw) * 100%);
--textblockaufrotheadline: 368;
--textblockaufrotheadlineP: calc(
var(--textblockaufrotheadline) / var(--mw) * 100%
);
--textblockaufrot: 756;
--textblockaufrotP: calc(var(--textblockaufrot) / var(--mw) * 100%);
--linksBildRechtsTextleftbox: 688;
--linksBildRechtsTextleftboxP: calc(
var(--linksBildRechtsTextleftbox) / var(--mw) * 100%
);
--mwipad: 768;
--gapPipad: calc(var(--gap) / var(--mwipad) * 100%);
--colPipad: calc(var(--col) / var(--mwipad) * 100%);
--leftNrightIpad: calc(var(--colPipad) * 0.5 + var(--gapPipad) * 1);
--rightboxIpad: calc(var(--colPipad * 4 + var(--gapPipad) * 3));
--mwiphone: 320;
--leftNrightiphone: calc(10px / var(--mwiphone) * 100%);
--leftNrightiphoneAbsolute: 10px;
--rightboxiphone: calc(222px / var(--mwiphone) * 100%);
--footera: 271;
--footeraP: calc(var(--footera) / var(--mw) * 100%);
--minmainwidth: 1343;
--minmainwidthPX: 1343px;
} :root {
--gridWrapperWidth: 95.55%;
}
@media screen and (min-width: 1200px) {
:root {
--gridWrapperWidth: 67.7%;
}
} #gridoverlay {
position: fixed;
z-index: 10;
pointer-events: none;
}
#gridwrapper {
height: 100vw;
z-index: 1;
}
#gridwrapper #gridoverlay {
height: 100vw;
}
#gridwrapper #gridoverlay > div {
background: rgba(0, 0, 0, 0.1);
}
.gridwrapper {
display: flex;
justify-content: center;
width: var(--gridWrapperWidth);
max-width: 1680px;
margin-inline: auto;
}
.gridbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
flex: 0 1 100%;
gap: var(--gapPercent, 1.1vw);
}
:root {
--desktopTopPosition: translateY(8vw);
}
@media screen and (min-width: 1200px) {
:root {
--desktopTopPosition: translateY(250px);
}
}
body.home {
background-color: #f7eded;
}
body.home:before {
height: 10vw;
margin-top: 8vw;
margin-bottom: 4vw;
}
body:not(.home):before {
margin-top: 9vw;
height: 10vw;
}
body .homelink {
top: 0;
}
@media screen and (min-width: 1200px) {
body .homelink {
display: none;
}
}
header .top {
margin-top: initial;
}
body.home #logo-body-home {
display: none;
}
.hideAnimationOnStart {
z-index: 3;
}
.hideAnimationOnStart + main.fw {
z-index: 2;
}
.hideAnimationOnStart a#logo {
transform: var(--desktopTopPosition);
}
@media screen and (min-width: 1200px) {
body.home #logo {
display: none;
}
body.home #logo-body-home {
position: relative;
grid-column: 4/8;
display: flex;
justify-content: center;
}
body.home #logo-body-home img {
height: auto;
width: 70%;
padding-block: clamp(2vw, 2vw, 40px);
}
body:not(.home) #logo {
margin-top: initial;
}
}
:root {
--menuBackground: #f0411de6;
}
@media screen and (max-width: 1199px) {
body {
padding-top: 0;
}
body > header.hideAnimationOnStart {
background: var(--menuBackground);
}
body > header.hideAnimationOnStart:before {
background: none;
}
body > header.hideAnimationOnStart #mobilemenuetrigger {
background: none;
border-color: transparent;
}
body > header.hideAnimationOnStart #mobilemenuetrigger.active span {
background-color: #fff;
}
body > header.hideAnimationOnStart #mobilemenuetrigger span {
background-color: var(--menuBackground);
}
header .iw #mainMenue > div > ul li a {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/_grfx/pfeile/pfeilnavi-white.svg);
background-color: none;
color: #fff;
}
header .iw #mainMenue > div > ul li a:hover {
background-color: #fff;
color: var(--menuBackground);
}
header .iw #mainMenue > div > ul > li.current-open-submenue > ul.sub-menu > li a {
color: #fff;
}
header .iw #mainMenue > div > ul li.current-open-submenue :is(a, a:hover),
header .iw #mainMenue > div > ul li a:hover {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/_grfx/pfeile/pfeilnavi.svg);
background-color: #fff;
color: var(--menuBackground);
}
header .iw .top.tinyMenuTopRightWrapper {
background: none;
border-top-color: #fff;
color: #fff;
}
header .iw .top.tinyMenuTopRightWrapper a {
color: #fff;
}
}
@media screen and (min-width: 1200px) {
body.menueopen {
overflow-y: hidden;
max-height: 100vh;
}
#mobilemenuetrigger {
display: grid;
grid-template-columns: 30px -webkit-min-content;
grid-template-columns: 30px min-content;
grid-gap: 0.5em;
left: initial;
top: initial;
width: initial;
position: absolute;
height: 30px;
z-index: 4;
transition: all 0.3s ease-out;
transform: translate(calc(2.5vw + 100px), 50px) scale(1.2);
}
#mobilemenuetrigger + .iw {
z-index: 3;
}
#mobilemenuetrigger span {
background-color: var(--bgOrange);
display: block;
align-self: center;
grid-column: 1/2;
grid-row: 1/2;
height: 2px;
transition: all 0.5s ease-out;
}
#mobilemenuetrigger span:first-child {
transform: translateY(-5px);
}
#mobilemenuetrigger span:nth-child(2) {
transform-origin: 0% 50%;
transition: all 0.3s ease-out;
}
#mobilemenuetrigger span:last-child {
transform: translateY(5px);
}
#mobilemenuetrigger:after {
color: var(--bgOrange);
content: "MENÜ";
grid-column: 2/3;
justify-self: right;
align-self: center;
}
body.menueopen #mobilemenuetrigger span {
background-color: #fff;
}
body.menueopen #mobilemenuetrigger span:first-child {
transform: translateY(0) rotate(45deg) scaleX(0.6);
}
body.menueopen #mobilemenuetrigger span:nth-child(2) {
transform: scaleX(0);
}
body.menueopen #mobilemenuetrigger span:last-child {
transform: translateY(0) rotate(-45deg) scaleX(0.6);
}
body.menueopen #mobilemenuetrigger:after {
color: #fff;
}
body header .top {
height: initial;
}
body header .top.tinyMenuTopRightWrapper {
overflow: visible;
}
body header .top #tinyMenuTopRight .menu-tinymenu-container #menu-tinymenu {
display: flex;
justify-content: flex-end;
-moz-column-gap: 1em;
column-gap: 1em;
transform: translateY(7px);
}
body header .top #tinyMenuTopRight .menu-tinymenu-container #menu-tinymenu li a {
color: #000;
background: none;
padding: 0.7em 0;
}
body > header.hideAnimationOnStart #mainMenue {
display: none;
}
body > header.hideAnimationOnStart #mainMenue #menu-mainmenue {
transform: translate(260px, 5vw);
}
body > header.hideAnimationOnStart #mainMenue #menu-mainmenue:before {
content: "";
border-top: 2px solid #fff;
display: block;
margin-bottom: 0.5em;
}
body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li a {
color: #fff;
}
body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li.current-menu-ancestor > a, body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li.current-menu-item > a, body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li.current_page_item > a, body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li:focus > a, body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li:hover > a {
background-color: #fff;
color: var(--bgOrange) !important;
}
body > header.hideAnimationOnStart #mainMenue #menu-mainmenue li:hover ul.sub-menu {
background: none;
}
body > header.hideAnimationOnStart.active #mainMenue {
display: block;
}
body > header.hideAnimationOnStart.active #mainMenue:before {
z-index: -1;
position: fixed;
inset: 0;
background: var(--menuBackground);
display: block;
content: "";
}
body > header.hideAnimationOnStart.active #mainMenue #menu-mainmenue li.hasAnimation a {
color: #fff;
}
body.home > header.hideAnimationOnStart #mainMenue #menu-mainmenue {
transform: translate(260px, 200px);
}
}
.home_header {
--gridTemplateRows: calc((192 / 360) * 100vw) auto;
--fontSizeH1: calc((18 / 360) * 100vw);
--lineHeightH1: calc(1em / (18 / 20));
--fontSizeH1Pt: calc((38 / 360) * 100vw);
--fontSizeRegelInfo: calc((12 / 360) * 100vw);
--regelInfoMt: calc((16 / 360) * 100vw);
--imgshadow: calc((2 / 360) * 100vw);
}
@media screen and (min-width: 1200px) {
.home_header {
--gridTemplateRows: clamp(200px, calc((692 / 1920) * 100vw), 902px) auto;
--fontSizeH1: clamp(12px, calc((84 / 1920) * 100vw), 100px);
--fontSizeH1Pt: calc((135 / 1920) * 100vw);
--fontSizeH1Pt: 1.7em;
--fontSizeRegelInfo: clamp(12px, calc((30 / 1920) * 100vw), 39px);
--regelInfoMt: clamp(10px, calc((73 / 1920) * 100vw), 73px);
}
}
.home_header .gridbox {
grid-template-rows: var(--gridTemplateRows);
}
.home_header .gridbox .rule_and_source {
text-align: left;
grid-area: rule;
}
.home_header .gridbox .rule_and_source h1.regel {
padding-top: var(--fontSizeH1Pt);
color: var(--unnamed-color-f0411d);
text-align: left;
letter-spacing: 0px;
font-weight: normal;
color: var(--orange);
font-size: var(--fontSizeH1);
line-height: var(--lineHeightH1);
}
.home_header .gridbox .rule_and_source h1.regel::first-letter {
margin-left: -0.5em;
}
.home_header .gridbox .rule_and_source div.regelinfo {
font-size: var(--fontSizeRegelInfo);
margin-top: calc(var(--fontSizeRegelInfo) * 2.5);
margin-top: var(--regelInfoMt);
}
.home_header .gridbox .bar {
grid-area: bar;
}
.home_header .gridbox .bar:before {
display: block;
width: 100%;
border-top: 2px solid var(--orange);
content: " ";
overflow: hidden;
}
.home_header .gridbox .image {
display: contents;
}
.home_header .gridbox .image img {
grid-area: imag;
width: 100%;
height: auto;
box-shadow: var(--gapPercent) var(--gapPercent) 0 var(--gapPercent) #444;
box-shadow: var(--gapVW) var(--gapVW) 0 0 #d0d0d0;
box-shadow: var(--imgshadow) var(--imgshadow) 0 0 #d0d0d0;
}
.home_header .gridbox .head {
grid-area: head;
width: 100%;
height: auto;
}
.home_header div.gridbox {
grid-template-areas: ".   rule rule rule    rule rule rule rule   head head head head " "bar imag imag imag    imag imag imag .      head head head head";
}
@media screen and (min-width: 1200px) {
.home_header div.gridbox {
grid-template-areas: "rule rule rule rule  rule rule rule rule   head head head head " "imag imag imag imag  imag imag imag .      head head head head";
}
.home_header .gridbox .rule_and_source {
grid-column: 1/10;
}
.home_header .gridbox .bar {
grid-column: 1/3;
grid-row: 2/3;
position: relative;
}
.home_header .gridbox .bar:before {
width: 75%;
right: calc(100% + 4vw);
position: absolute;
}
}
.home_section_1 {
--fontSizeH1: calc((37 / 360) * 100vw);
--lineHeightH1: 1em;
--fontSizeText1: calc((12 / 360) * 100vw);
--lineHeightText1: calc(1em / (12 / 15));
--mbText1: 1em;
--prText1: 0;
--fontSizeTeaser: clamp(12px, calc((16 / 360) * 100vw), 40px);
--pbTeaserText1: 0;
--pbTeaserText2: 8em;
--lineHeightTeaser: 6vw;
--mtImage: calc((55 / 360) * 100vw);
--mbImage: calc((20 / 360) * 100vw);
--borderImage: calc((10 / 360) * 100vw);
--colorH1: #f0411d;
--teaserTopOffset: 10vw;
--teaser-text-width: 87%;
--rauteWidth: 85%;
--colSpanHrText1: 5 / 7;
--displayHrRaute: none;
}
@media screen and (min-width: 1200px) {
.home_section_1 { --fontSizeH1: clamp(12px, calc((83 / 1920) * 100vw), 104px);
--lineHeightH1: 0.94em;
--fontSizeText1: clamp(16px, calc((37 / 1920) * 100vw), 48px);
--lineHeightText1: 1.35em;
--mbText1: 2.5em;
--prText1: 2em; --fontSizeTeaser: clamp(12px, calc((22 / 1920) * 100vw), 28px);
--lineHeightTeaser: clamp(16px, 3vw, 27px);
--pbTeaserText1: 1em;
--pbTeaserText2: 0em;
--teaser-text-width: initial;
--rauteWidth: 100%;
--mtImage: clamp(20px, 7vw, 60px);
--mbImage: clamp(20px, 7vw, 60px);
--borderImage: clamp(10px, calc((10 / 1920) * 100vw), 20px);
--colSpanHrText1: 7 / 8;
--displayHrRaute: block;
}
}
.home_section_1 > * {
text-align: left;
}
.home_section_1 div.gridbox hr.hr_headline {
all: unset;
border-top: 2px solid var(--colorH1);
grid-column: 1/2;
grid-row: 1/2;
}
.home_section_1 div.gridbox hr.hr_text1 {
all: unset;
border-top: 2px solid #323232;
grid-column: var(--colSpanHrText1);
grid-row: 2/3;
align-self: flex-end;
}
.home_section_1 div.gridbox hr.hr_raute {
all: unset;
border-top: 2px solid #003807;
grid-column: 1/5;
grid-row: 5/6;
align-self: flex-end;
display: var(--displayHrRaute);
}
.home_section_1 div.gridbox h1 {
grid-area: head;
font-size: var(--fontSizeH1);
line-height: var(--lineHeightH1);
color: var(--colorH1);
font-weight: normal;
padding-bottom: 0.4em;
position: relative;
}
.home_section_1 div.gridbox .text1 {
grid-area: tex1;
position: relative;
font-size: var(--fontSizeText1);
line-height: var(--lineHeightText1);
padding-right: var(--prText1);
color: var(--colorH1);
margin-bottom: var(--mbText1);
}
.home_section_1 div.gridbox .teaser {
position: relative;
display: contents;
}
.home_section_1 div.gridbox .teaser div.image {
margin-top: var(--mtImage);
margin-bottom: var(--mbImage);
border: var(--borderImage) solid #fff;
overflow: hidden;
border-radius: 50%;
aspect-ratio: 1/1;
align-self: center;
}
.home_section_1 div.gridbox .teaser div.image img {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home_section_1 div.gridbox .teaser .teaser-text {
justify-self: center;
width: var(--teaser-text-width);
line-height: 1.25em;
align-self: center;
}
.home_section_1 div.gridbox .teaser .teaser-text h2 {
font-size: var(--fontSizeTeaser);
line-height: 1.25em;
padding-right: var(--pbTeaserText1);
}
.home_section_1 div.gridbox .teaser .teaser-text h2 + div {
font-size: var(--fontSizeTeaser);
line-height: 1.25em;
margin-top: 0.8em;
padding-right: var(--pbTeaserText1);
}
.home_section_1 div.gridbox .teaser.teaser-1 .image {
grid-area: teai1;
}
.home_section_1 div.gridbox .teaser.teaser-1 .teaser-text {
grid-area: teat1;
}
.home_section_1 div.gridbox .teaser.teaser-2 .image {
grid-area: teai2;
}
.home_section_1 div.gridbox .teaser.teaser-2 .teaser-text {
grid-area: teat2;
padding-bottom: var(--pbTeaserText2);
}
.home_section_1 div.gridbox .teaser a {
display: inline-block;
margin-top: 0.8em;
font-size: var(--fontSizeTeaser);
text-decoration: underline;
}
.home_section_1 div.gridbox .teaser a:hover {
text-decoration: none;
}
.home_section_1 div.gridbox .home_section_1_raute {
grid-area: raut;
width: var(--rauteWidth);
height: auto;
margin-bottom: 2vw;
}
.home_section_1 div.gridbox {
grid-template-areas: ".   head head  head     head  head  head  head     head  .    .    . " ".   raut raut  raut     tex1  tex1  tex1  tex1     tex1  tex1 tex1 . " ".   .    .     teai1    teai1 teai1 teai1 teai1    teai1 .     .    . " ".   .    teat1 teat1    teat1 teat1 teat1 teat1    teat1 teat1 .    . " ".   .    .     teai2    teai2 teai2 teai2 teai2    teai2 .     .    . " ".   .    teat2 teat2    teat2 teat2 teat2 teat2    teat2 teat2 .    . ";
}
@media screen and (min-width: 1200px) {
.home_section_1 div.gridbox {
grid-template-areas: ".      head head head    head head   tex1  tex1    tex1  tex1  tex1  tex1    " "raut   raut raut raut    .    .      tex1  tex1    tex1  tex1  tex1  tex1    " "raut   raut raut raut    .    .      teai1 teai1   teai1 teat1 teat1 teat1 " "raut   raut raut raut    .    .      teai2 teai2   teai2 teat2 teat2 teat2 " "raut   raut raut raut    .    .      .     .       .     .     .     . "; grid-template-rows: minmax(-webkit-min-content, 0) repeat(3, -webkit-min-content) 1fr;
grid-template-rows: minmax(min-content, 0) repeat(3, min-content) 1fr;
}
}
.home_section_2 {
--fontSizeH1: calc((40 / 360) * 100vw);
--fontSizeDivText: calc((16 / 360) * 100vw);
--mtText: 1em;
--lineHeightText: 1.230769230769231em;
--imageBorder: #f6dad6;
--imageBorderWidth: calc((8 / 360) * 100vw);
--circleKircheOutline: calc((14 / 360) * 100vw);
--circles: #f95645;
--circleSize: scale(1);
--circleLudgerirastPos: 50% 10%;
--circleLudgerirastScale: 1.73;
--circleBuchhandlungPos: 0 0;
--circleBuchhandlungScale: 0;
--circleBenediktTransform: scale(1) translateY(-29vw);
--circleGastTransform: scale(10) translateY(-19.4vw);
}
@media screen and (min-width: 1200px) {
.home_section_2 {
--fontSizeH1: clamp(12px, calc((60 / 1920) * 100vw), 78px);
--fontSizeDivText: clamp(12px, calc((26 / 1920) * 100vw), 41px);
--lineHeightText: 1.25em;
--imageBorderWidth: clamp(10px, calc((12 / 1920) * 100vw), 30px);
--circleKircheOutline: clamp(20px, calc((24 / 1920) * 100vw), 60px);
--circleSize: scale(0.8);
--circleLudgerirastScale: 0;
--circleBuchhandlungPos: 50% 0%;
--circleBuchhandlungScale: 2;
--textOffsetBuchhandlungScale: translateY(-1em);
--circleBenediktTransform: scale(1) translateY(-27%);
--circleGastTransform: scale(4) translateY(-12%);
}
}
.home_section_2 {
position: relative;
}
.home_section_2 .gridbox a {
display: contents;
text-align: left;
}
.home_section_2 .gridbox a h1 {
font-size: var(--fontSizeH1);
font-weight: 400;
color: #1a1719;
}
.home_section_2 .gridbox a .text {
font-size: var(--fontSizeDivText);
margin-top: var(--lineHeightText);
line-height: var(--lineHeightText);
color: #1a1719;
}
.home_section_2 .gridbox a div.img {
display: flex;
position: relative;
overflow: hidden;
grid-area: i;
justify-self: center;
border-radius: 50%;
background: #f6dad6;
border: var(--imageBorderWidth) solid #f6dad6;
aspect-ratio: 1/1;
width: 100%;
align-items: center;
justify-items: center;
grid-area: i1;
transform: var(--circleSize);
}
.home_section_2 .gridbox a div.img img {
width: 100%;
height: auto;
min-width: 100%;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home_section_2 .gridbox a div.img > div {
position: absolute;
}
.home_section_2 .gridbox a div.img .image-sepia {
mix-blend-mode: luminosity;
}
.home_section_2 .gridbox a div.img .image-colored {
opacity: 0;
transition: all 0.3s ease-out;
}
.home_section_2 .gridbox a:hover div.img .image-colored {
opacity: 1;
}
.home_section_2 .gridbox a:nth-child(1) .textwrapper {
grid-area: t1;
}
.home_section_2 .gridbox a:nth-child(1) div.img {
grid-area: i1;
box-shadow: 0 0 0 var(--circleKircheOutline) var(--bgOrange);
}
.home_section_2 .gridbox a:after {
display: grid;
align-self: stretch;
z-index: -2;
content: "";
background-size: contain;
background-repeat: no-repeat;
}
.home_section_2 .gridbox a:nth-child(2):after {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/tpl_flex/home_section_2/grfx/circle-ludgerirast.svg);
background-position: var(--circleLudgerirastPos);
grid-area: i2;
transform: scale(var(--circleLudgerirastScale));
}
.home_section_2 .gridbox a:nth-child(2) .textwrapper {
grid-area: t2;
}
.home_section_2 .gridbox a:nth-child(2) div.img {
grid-area: i2;
}
.home_section_2 .gridbox a:nth-child(3):after {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/tpl_flex/home_section_2/grfx/circle-ludgerirast.svg);
background-position: var(--circleBuchhandlungPos);
grid-area: i3;
transform: scale(var(--circleBuchhandlungScale));
}
.home_section_2 .gridbox a:nth-child(3) .textwrapper {
grid-area: t3;
transform: var(--textOffsetBuchhandlungScale);
}
.home_section_2 .gridbox a:nth-child(3) div.img {
grid-area: i3;
}
.home_section_2 .gridbox a:nth-child(4):after {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/tpl_flex/home_section_2/grfx/circle-benedikt.svg);
background-position: 50% 50%;
grid-area: i4;
transform: var(--circleBenediktTransform);
}
.home_section_2 .gridbox a:nth-child(4) .textwrapper {
grid-area: t4;
}
.home_section_2 .gridbox a:nth-child(4) div.img {
grid-area: i4;
}
.home_section_2 .gridbox a:nth-child(5):after {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/tpl_flex/home_section_2/grfx/big-half-circle.svg);
background-position: 50% 100%;
grid-area: i5;
transform: var(--circleGastTransform);
}
.home_section_2 .gridbox a:nth-child(5) .textwrapper {
grid-area: t5;
}
.home_section_2 .gridbox a:nth-child(5) div.img {
grid-area: i5;
}
.home_section_2 {
overflow: hidden;
padding-top: 5vw;
padding-bottom: 8vw;
width: 100%;
}
.home_section_2 .gridbox {
margin-inline: 2.5%;
grid-template-areas: ".  .  .  i1 i1 i1 i1 i1 i1  .  .  ." ".  t1 t1 t1 t1 t1 t1 t1 t1  t1 t1 ." ".  .  .  i2 i2 i2 i2 i2 i2  .  .  ." ".  t2 t2 t2 t2 t2 t2 t2 t2  t2 t2 ." ".  .  .  i3 i3 i3 i3 i3 i3  .  .  ." ".  t3 t3 t3 t3 t3 t3 t3 t3  t3 t3 ." ".  .  .  i4 i4 i4 i4 i4 i4  .  .  ." ".  t4 t4 t4 t4 t4 t4 t4 t4  t4 t4 ." ".  .  .  i5 i5 i5 i5 i5 i5  .  .  ." ".  t5 t5 t5 t5 t5 t5 t5 t5  t5 t5 .";
grid-template-rows: repeat(5, 57vw);
grid-template-rows: 57vw 60vw 57vw 50vw 57vw 57vw 57vw 61vw 57vw 55vw;
}
@media screen and (min-width: 1200px) {
.home_section_2 {
overflow: initial;
padding-bottom: 0;
width: var(--gridWrapperWidth);
}
.home_section_2 .gridbox {
align-items: center;
}
.home_section_2 .gridbox {
margin-inline: 0;
grid-template-areas: "t1 t1 t1 t1 i1 i1 i1 i1 .  .  .  ." ".  .  .  .  i2 i2 i2 i2 t2 t2 t2 t2" "t3 t3 t3 t3 i3 i3 i3 i3 .  .  .  ." ".  .  .  .  i4 i4 i4 i4 t4 t4 t4 t4" "t5 t5 t5 t5 i5 i5 i5 i5 .  .  .  .";
grid-template-rows: repeat(5, 21vw);
}
}
@media screen and (min-width: 2480px) {
.home_section_2 .gridbox {
grid-template-rows: repeat(5, 500px);
}
} body.home .tpl_flex_textblock.textblock.rotnachregel.ruleRowCount-1.elementid-1,
body.home .tpl_flex_textblock_pic.moeglichesbildlinks.linksBildRechtsText.textblock.elementid-2,
body.home .textblock.teaserOnGrey.elementid-3 {
display: none;
}
body {
--toTopW: calc((25 / 360) * 100vw);
--toTopH: calc((16 / 360) * 100vw);
}
#footer2022 {
--footerHeight: 20vw;
--pFontSize: calc((9 / 360) * 100vw);
}
@media screen and (min-width: 1200px) {
#footer2022 {
--footerHeight: 24vw;
--pFontSize: clamp(12px, calc((22 / 1920) * 100vw), 28px);
}
body {
--toTopW: calc((25 / 1920) * 100vw);
--toTopH: calc((16 / 1920) * 100vw);
}
}
#footer2022 {
width: 100%;
position: relative;
top: initial;
height: var(--footerHeight);
bottom: 0;
}
.home-2 #footer2022 {
padding-top: calc(var(--footerHeight) * 1.4);
}
#footer2022:before {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/footer/svg/footer-wave-large.svg);
position: absolute;
content: "";
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: contain;
left: 0;
bottom: 0;
}
#footer2022 .gridwrapper {
height: 100%;
}
#footer2022 .gridwrapper .gridbox {
height: 100%;
}
#footer2022 .gridwrapper .gridbox p {
color: #fff;
text-transform: uppercase;
font-size: var(--pFontSize);
letter-spacing: 0.06em;
font-weight: 700;
text-align: left;
grid-column: 2/13;
align-self: flex-end;
-webkit-padding-after: var(--pFontSize);
padding-block-end: var(--pFontSize);
}
body .toTop {
margin: initial;
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/footer/svg/totop-orange.svg);
width: var(--toTopW);
margin-right: calc(var(--toTopW) * 1.42);
background-size: 100% 100%;
background-repeat: no-repeat;
height: var(--toTopH);
padding: 0;
bottom: calc(var(--toTopW) * -1);
position: absolute;
}
body .toTop.bottom {
bottom: 18vw !important;
}
@media screen and (min-width: 1200px) {
body .toTop {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/footer/svg/totop-white.svg);
}
body .toTop.active {
bottom: 50px;
}
body .toTop.bottom {
bottom: 50px;
}
body .toTop.active.bottom {
bottom: 4vw !important;
}
#footer2022 .gridwrapper .gridbox p {
grid-column: 2/13;
-webkit-padding-after: calc(var(--pFontSize) * 3);
padding-block-end: calc(var(--pFontSize) * 3);
}
}
.wt-cli-cookie-bar-container {
--fontsize: clamp(14px, 1vw, 22px);
}
.wt-cli-cookie-bar-container #cookie-law-info-bar .cli-wrapper .wt-cli-template {
font-size: var(--fontsize);
}
.wt-cli-cookie-bar-container #cookie-law-info-bar .cli-wrapper .wt-cli-template * {
font-size: var(--fontsize) !important;
}
.wt-cli-cookie-bar-container #cookie-law-info-again {
box-shadow: none;
background: var(--bgOrange) !important;
padding: var(--fontsize) calc(var(--fontsize) * 0.5);
color: rgb(68, 68, 68);
position: fixed;
font-family: inherit;
width: auto;
}
@media screen and (max-width: 1199px) {
.wt-cli-cookie-bar-container #cookie-law-info-again {
transform: rotate(-270deg) !important;
transform-origin: bottom right !important;
left: initial !important;
right: 100% !important;
display: block;
white-space: nowrap;
bottom: 4em !important;
}
}
.wt-cli-cookie-bar-container #cookie-law-info-again #cookie_hdr_showagain {
background: none;
padding: var(--fontsize) calc(var(--fontsize) * 0.5);
color: #fff;
font-size: var(--fontsize);
}
.wt-cli-cookie-bar-container .cli-modal .cli-modal-dialog .cli-modal-content {
padding: calc(var(--fontsize) * 2.5);
}
.wt-cli-cookie-bar-container .cli-modal .cli-modal-dialog .cli-modal-content,
.wt-cli-cookie-bar-container .cli-modal .cli-modal-dialog .cli-modal-content * {
font-size: var(--fontsize) !important;
}
.wt-cli-cookie-bar-container .cli-modal .cli-modal-dialog .cli-modal-content .cli-row {
padding-right: 1em;
}
#map-canvas {
background-image: url(//www.abtei-gerleve.de/wp-content/themes/abtei-gerleve-v3.5/snippet_googlemaps/www.abtei-gerleve.de_anfahrt-2032x800.png);
background-position: 100% 100%;
background-size: cover;
position: relative;
}
body.programm .tpl_flex_linkboxleft section .rightbox a {
display:inline;
}