/* nunito-regular - latin-ext_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-v25-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/nunito-v25-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nunito-v25-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nunito-v25-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nunito-v25-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nunito-v25-latin-ext_latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}


/* Regular */
@font-face {
    font-family: 'Be-Vietnam-Pro';
    font-weight: 400;
    src: url('../fonts/Be_Vietnam_Pro/BeVietnamPro-Regular.ttf');
  }

/* bold */
@font-face {
    font-family: 'Be-Vietnam-Pro';
    font-weight: 700;
    src: url('../fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf');
  }

/* light */
@font-face {
    font-family: 'Be-Vietnam-Pro';
    font-weight: 300;
    src: url('../fonts/Be_Vietnam_Pro/BeVietnamPro-Light.ttf');
  }




.page-template-default .container,
.error404 .container {
    margin-top: 14rem;
}

/* Hyphens Datenschutz */
/* .page-id-3 p {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
} */

/* 
--------------------------------------------
GENERAL, FONTS, BUTTONS, IMAGES
------------------------------------------ */
:root {
    --logo-ratio: 1; /* breite im verhältnis zur höhe */
    /* nur mobil */
    --header-size-m: min(20vw, 150px);
    /* --header-size-m: min(30vw, 150px); */
    --header-size-m-smaller: min(11.6vw, 54px);
    --header-size-m-landscape: 7.75vw;

    --my-anchor: "blah";
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    
    font-family: 'Be-Vietnam-Pro', sans-serif;
    
    /* color: #f1efec; */
    color: var(--color-global);
    background-color: var(--bg-color-global);
    /* letter-spacing: 0.005em;
    word-spacing: 0.03em; */
    font-weight: 300;

}

.color-disabled {
    color: #b08d62;
}

button, input {
    font-family: inherit;
}

body, html {
    height: 100%;
}

img {
    width: 100%;
}

.clear {
    clear: both;
}

.right {
    float: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Be-Vietnam-Pro', sans-serif;
    /* -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; */
    margin-bottom: 1rem;
    font-weight: 400;
}

/* Kapitelüberschriften */
h1 {
    margin-bottom: 2vw;
    font-size: 2.8vw;
    line-height: 1;
    /* -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none; */
}

/* Footer */
h2 {
    text-transform: uppercase;
    font-size: 1vw;
}

/* Header-Bilder */
h3 {
    font-size: 3.5vw;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* u.A. Newsletter */
h4 {
    line-height: 1;
    font-size: 2.2vw;
    text-transform: uppercase;
}

/* Absatz-Überschrift wie p */
h5 {
    font-size: 1.4vw;
    line-height: 1.25;
    margin-bottom: 0.5vw;
    /* padding-top: 1vw; */
    font-weight: 700;
}

/* noch kleiner für Datenschutz etc */
h6 {
    font-size: 1.3vw;
    line-height: 1;
    margin-bottom: 0.5vw;
    /* padding-top: 0.5vw; */
}

/* Termine (eigentlich wie Buttonlinks) */
.h7 {
    font-size: 1.6vw;
    text-transform: uppercase;
    display: block;
}

p,
ul li,
th, td {
    font-size: 1.4vw;
}
p {
    line-height: 1.15;
    /* margin-bottom: 2rem; */
    /* -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; */
}

/* p:has(+ p), p:has(+ table), p:last-child {
    margin-bottom: 1rem;
} */

p:has(+ h5) {
    margin-bottom: 2.5vw;
}


.small, .psmall p,
.psmall ul li, 
form label,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
    font-size: 1.2vw;
    /* margin-bottom: .5rem; */
}

p.line {
    margin: 0;
    padding: 0;
}

.flexermat, .flexermat > a:only-child {
    display: flex;
}

.f-spacy {
    margin-bottom: 1.8vw;
}

.f-line {
    margin-bottom: 0;
}

.f-list {
    margin-bottom: .25vw;
}

.flexermat i {
    margin-right: 20px;
}

i {
    line-height: inherit !important;
}

/* Links allgemein */
a,
a:focus,
a:active,
a:visited {
    color: inherit;
    transition: color 200ms;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

a:hover {
    color: #b08d62;
    transition: color 200ms;
}

a:hover img {
    cursor: pointer;
}

a.inlineLink {
    text-decoration: underline;
}

/* Links im Inhalt */
a.buttonlink, .buttonlink:visited {
    font-size: 1.6vw;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.3vw;
}

a.buttonlink:first-of-type {
    padding-top: 1.3vw;
}

a.buttonlink:last-of-type {
    margin-bottom: 0;
}

/* normale Buttons global */
.button, 
.button:active,
.button:visited,
.button:focus {
    border: 2px solid;
    background-color: transparent;
    /* font-weight: bold; */
    font-size: 1.2rem;
    padding: 1rem 1.25rem;
    margin: 0.5rem;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.button:hover {
    text-decoration: none;
    background-color: transparent;
}

/* Fraglich!? */
img.alignright {
    float: right;
    margin: 0 0 25px 25px;
}

img.alignleft {
    float: left;
    margin: 0 25px 25px 0;
}

img.aligncenter {
    text-align: center;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Tabellen */
table thead,
table tbody,
tbody tr {
    background-color: transparent !important;
    background: transparent;
    color: inherit;
    border-color: inherit;
    border: none;
    
    /* border: none; */
}

table thead th {
    font-weight: normal;
}

table {
    /* font-size: 1em; */
    /* border: 2px solid; */
    border-collapse: collapse;
}
td {
    border: 1px solid;
    
}
.angebot td {
    border: none;
    
}

/* 
---------------------------------------------------------------------------------------------------------------------------------------------------------------
HEADER und MENÜs usw.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

header#header {
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: padding 0.5s, background-color 0.2s;
    color: var(--color-header);
    

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    /* Special mit leicht abgetöntem Hintergrund */
    /* padding-top: 1.8vw; */
    padding-top: 0.9vw;
    padding-bottom: 0.9vw;
    background-color: rgba(252, 241, 227, 0.25);
}

header#header .menu-column {
    /* padding-left: calc( 5.666666% - -0.016666666666667%); */
    padding-left: 5%;
    padding-right: 0.59%;
}

header#header .logo {
    /* padding-right: calc( 5.666666% - -0.016666666666667%); */
    padding-right: 5%;
    padding-left: 0.59%;
    /* transition: all 0.5s; */
}

header#header .logo a.weiss {
    display: inline-block;
    /* transition: all 0.5s; */
}
header#header .logo {
    text-align: right;
}

header#header .logo img {
    /* max-height: 3vw; */
    height: 3vw;
    width: auto;
}

header#header.smaller {
    z-index: 9999;
    background-color: var(--bg-color-header);
    padding-top: .4vw;
    padding-bottom: .4vw;
}



#main-nav a, #main-nav i, #main-nav ::before {
    line-height: 1;

    /* max. Schriftgröße für Uppercase 400 */
    /* font-size: 1.50vw; */
    /* uppercase 300 */
    /* font-size: 1.52vw; */
    

    /* Schriftgröße für normal Case 400 */
    /* font-size: 1.75vw; */
    /* normal case 300 */
    font-size: 1.58vw;
    
    

    font-weight: 300;
}

.ham {
    float: left;
    z-index: 99999;
}

.ham:hover {
    color: inherit;
}

.xIcon {
    display: none;
}

#menu-dropdown {
    position: relative;
    top: 0;
    left: 0.6vw;
}

#menu-dropdown {
    opacity: 0;
    display: none;
}

#menu-dropdown.showMenu {
    opacity: 1 !important;
    display: block;
    z-index: 99997;
}

ul.desktop-menu {
    float: left;
}

ul.desktop-menu li a {
    padding: 0 0 0 0.6vw;
    margin-right: 0.6vw;
    /* text-transform: uppercase; */
}

/* divider für Language Select Buttons */
#menu-dropdown .lang-item-first::before {
    content: "|";
    padding: 0 .6vw; /*siehe li a oben, gleiches padding wie bei den menü-elementen */

}
/* Flaggen */
#menu-dropdown .lang-item img {
    height: 1vw;
    width: auto;

}

/* Untermenüs - ein Versuch
--------------------------- */

header#header,
header#header .menu-column,
header#header #main-nav,
header#header #menu-dropdown.showMenu,
header#header ul.desktop-menu {
    display: flex;
    align-items: stretch;
}

header#header a.ham {
    display: flex;
    align-items: center;
}

header#header ul.desktop-menu > li{
    display: flex;
    align-items: center;
    /* position: relative; */
}

ul.dropdown.menu.vertical {
    
    position: absolute;
    /* left: auto; */
    top: 100%;
    /* padding-top: 3.6vw; */
    /* margin-top: 3.9vw; */
    margin-top: 0.9vw;
    padding-bottom: 0.3vw;

    /* "fade in out " */
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0ms 400ms, opacity 400ms 0ms;
    background-color: rgba(252, 241, 227, 0.25);
}

header#header ul.desktop-menu > li a:hover + ul,
header#header ul.dropdown.menu.vertical:hover 
{
    /* display: block; */
    /* "fade in out " */
    visibility: visible;
    opacity: 1;
    transition: visibility 0ms 0ms, opacity 400ms 0ms;
    
}

header#header.smaller ul.dropdown.menu.vertical {
    background-color: var(--bg-color-header);
    margin: 0;
    padding-top: 0.4vw;
}

header#header ul.desktop-menu > li > a {
    z-index: 99999;
}

.menu .active > a {
    background-color: transparent;
    color: inherit;
}

.menu .active > a:hover {
    color: #b08d62;
}

ul.dropdown.menu.vertical a {
    line-height: 1.35 !important;
    white-space: nowrap;
}


/* MOBILE MENU
--------------------------------------------- */

#mobmenuright .mob-expand-submenu, 
#mobmenuright > .widgettitle, 
#mobmenuright li a, 
#mobmenuright li a:visited, 
#mobmenuright .mobmenu-content h2, 
#mobmenuright .mobmenu-content h3, 
.mobmenu-right-panel .mobmenu-display-name, 
.mobmenu-content .mobmenu-tabs-header li {
    font-size: 1.6rem !important;
    text-transform: uppercase !important;
}

#mobmenuright .sub-menu li a, 
#mobmenuright .sub-menu li a:visited {
    font-size: 1.3rem !important;
}
#mobmenuright .sub-menu li {
    padding-left: 0 !important;
}

.mobmenu-content li:last-of-type {
    padding-bottom: 30px;
}

div.mob-menu-header-holder {
    display: none;
    width: 20% !important; /* Problem mit Logo, was dann nicht mehr klickbar ist, weil das mobile Menü das überlappt */
}

div.mob-menu-header-holder.smaller {
    display: block;   
}

div.mobmenur-container, div.mobmenu-right-panel a.mobmenu-right-bt {
    top: 0 !important;
    margin-top: min(2.1vw, 9.8px);
    margin-right: min(2.1vw, 9.8px);
}

div.mobmenur-container i::before {
    line-height: 1;
    font-size: min(10vw, 46.7px);
    margin-right: min(1.4vw, 6.53px);
}

i.mob-icon-cancel-1::before {
    font-size: min(8vw, 37.35px);
    line-height: 1.25;
    margin-right: min(2vw, 9.33px);
}

div.mobmenu-content {
    margin-top: min(12vw, 56px);
    padding-top: min(2vw, 9.33px);
}

/* Flaggen */
#mobmenuright .lang-item img {
    height: 1.6rem;
    width: auto;

}
/* 
------------------------------------------------------------------------------------------------------------------------------------------------------------
INHALTE-Container
-------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* INTRO */

/* Slider Startseite */
@media screen and (orientation: landscape) {
    section.heroslidermobile {
        display: none;
    }
    .n2-ss-slider {
        font-size: 3vw !important;
    }
}
@media screen and (orientation: portrait) {
    section.heroslider {
        display: none;
    }
    .n2-ss-slider {
        font-size: 5vw !important;
    }
}

/* div#n2-ss-2 {
    font-size: 2vw !important;
} */

/* Normale Seite Headerbild */
.intro-wrapper {
    position: relative;
    height: 100svh;
}

.page-headerbild {
    height: 100%; 
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-headline{
    position: absolute;
    bottom: 4%;
    left: 3%;
}

/* INHALTE  */

section.inhalte.margin-top {
    margin-top: 3.7vw; /* soll immer genau die höhe vom header-smaller sein (die ist aber nirgends festgelegt, orientiert sich am logo) */
}

/* Seite ohne Kapitel */
section.inhalte.text-only {
    
    padding: 6vw 0;
    min-height: calc(100svh - 3.7vw);
}

.limited-width {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 5%;
}

section.inhalte .full-width {
    width: 100%;
}

/* Seite mit Kapitel */
section.inhalte section {
    display: flex;
}

section.inhalte .fullscr{
    min-height: 105svh;
}

section.inhalte.margin-top section.fullscr:first-child {
    min-height: calc(100svh - 3.7vw);
}

section.inhalte .text,
section.inhalte .tl_tr_wrapper0,
.abschnitt_tabellen{
    margin: 6vw 0; /* safety-space für Textinhalt */
}

section.inhalte .columns {
    padding: 0;
}

section.inhalte .text {
    display: flex;
    align-items: center;
    /* overflow: hidden; */
}

section.inhalte .bild {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* min-height: 360px; */
}

section.inhalte .angebot {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* min-height: 360px; */
}


section.inhalte section.abschnitt_tl_tr {
    align-items: center;
}

/* Text links */
section.abschnitt_tl_br .content {
    width: 77%;
    margin-left: 8%;
}
/* Text rechts */
section.abschnitt_tr_bl .content,
section.abschnitt_rezensionen .content {
    width: 77%;
    margin-left: 12%;
}

/* Text volle Breite */
section.abschnitt_text_full .content {
    width: 88.8%; 
    margin-left: 4.67%;
}

/* Doppeltext */
section.abschnitt_tl_tr .content {
    width: 70%;
    margin-left: 8%;
}
section.abschnitt_tl_tr .content-right {
    width: 90%;
    margin-left: 0;
    /* padding-top: calc(2.8vw + 2vw); */
}
section.abschnitt_tl_tr h1 {
    /* gleich wie content, aber auf gesamte breite gerechnet */
    width: calc((7/12) * 70vw);
    margin-left: calc((7/12) * 8vw)
}
/* section.abschnitt_tl_tr a.buttonlink {
    font-size: 2vw;
} */

.tl_tr_wrapper0, .tl_tr_wrapper1 {
    /* overflow: hidden; komische scheiße */
    float: left;
    width: 100%;
}

/* SPECIALS */

/* Kachel-Holder Downloads */

.kachel-holder {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 1200px;
}
.kachel-holder p {
    font-size: 1.1rem;
}

.grid-item {
    display: flex;
    background-color: white;
    margin: 40px;
    border: 2px solid var(--bg-color-footer);
    height: 175px;
}

.dl-item-thumbnail {
    width: 33.3333%;
    background-color: aqua;
}
.dl-item-text {
    width: 66.6666%;
    padding: 30px 20px;
}
video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
/* Zitat */

section.zitat {
    padding: 4vw 0;
    text-align: center;
}

section.zitat h1.zitat {
    font-style: italic;
    font-size: 1.6vw;
    margin-bottom: 0;
    line-height: 1.15;
}

section.zitat .autor {
    font-size: 1vw;
    color: #998c7e;
}

/* Fakten */
.single-fakt {
    text-align: center;
}

.single-fakt p {
    font-size: 1.2rem;
}

.single-fakt p.zahl {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: .5rem;
}


/* Galerie */
section.galerie {
    padding: 6vw 0;
    align-items: center;
}

.slick-slider.carousel {
    /* max-height: 410px; */
    /* max-height: 700px; */
}

.carousel .slick-slide {
    margin: 0 5px;
    /* max-height: 700px; */
    width: auto !important;
    /* opacity: .5; */
}

/* .carousel .slick-current {
    opacity: 1;
} */

.carousel .slick-slide img {
    /* max-height: 700px; */
    max-height: 60svh;
    width: auto;
}

.slick-prev, .slick-next {
    width: 40px !important;
    height: 40px !important;
}

.slick-prev:before, .slick-next:before {
    font-size: 40px !important;
    z-index: 9999 !important;
}

.slick-prev {
    left: -4vw !important;
}

.slick-next {
    right: -4vw !important;
}

.slick-next:active::before {
    opacity: .75;
}

section.galerie .video {
    margin-top: 12rem;
}

/* dots  */
.slick-dots li button::before {
    color: #e5e1da !important;
    font-size: 9px !important;
}

.slick-dots li {
    width: 1vw !important;
}

.carousel .slick-dots {
    white-space: nowrap;
    bottom: -50px !important;
    max-width: 10vw;
    overflow: auto;
    left: 0;
    right: 0;
    margin: auto !important;
}
 /* Hide scrollbar for Chrome, Safari and Opera */
.slick-dots::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.slick-dots {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 


/* dot sizes */
.carousel .slick-dots li:has(+ li + li.slick-active) button::before {
    font-size: 10px !important;
}
.carousel .slick-dots li:has(+ li.slick-active) button::before {
    font-size: 12px !important;
}
.carousel .slick-dots li.slick-active button::before {
    font-size: 14px !important;
}
.carousel .slick-dots li.slick-active + li button::before {
    font-size: 12px !important;
}
.carousel .slick-dots li.slick-active + li + li button::before {
    font-size: 10px !important;
}



/* Feedback-Slider */
.rezensionen-carousel .slick-track {
    display: flex;
    align-items: center;
}





/* Popups */

.fancybox__slide {
    padding-top: 8vw !important;
    padding-bottom: 3rem !important;
}

.fancybox__backdrop {
    /* opacity: .8 !important; */
}

/* Preislisten */
.single-table {
    margin-bottom: 3rem;
    word-wrap: break-word;
}

a.blpreise {
    font-size: 1.8vw;
}

.single-table td {
    hyphens: auto;
}

/* Termin-Buttons */
.kurstermine {
    line-height: 1.25;
}

.single-termin {
    padding-top: 1.3rem;
    margin: 0.5rem 0;
}

a.bltermine {
    font-size: 1.8vw;
    padding-top: 3vw !important;
}

/* Seite alle Termine */

/* .page-id-5686 .single-termin:last-of-type {
    margin-bottom: 2.5rem;
} */

/* Formular */
.hidden-form-field {
    display: none;
}

.wpcf7 label {
    line-height: 1.2;
    color: #ababab;
    margin-bottom: 5px;
}

input, select, textarea {
    background-color: transparent !important;
    color: inherit !important;
    border-color: #ababab !important;
    font-size: inherit !important;
}

.wpcf7 ::placeholder {
    color: #ababab;
}
input, select {
    height: unset !important;
}

option {
    background-color: #1a1a1a;
}

.wpcf7 .right {
    display: block;
    float: right;
  }

.wpcf7 .left {
    display: block;
    float: left;
  }

.wpcf7 .sm {
    width: 23%;
  }
.wpcf7 .md {
    width: 48%;
  }
.wpcf7 .lg {
    width: 73%;
  }


.wpcf7 input.wpcf7-submit {
    border: 1px solid #e5e1da;
    /* color: #fff; */
    background-color: transparent;
    /* font-size: 1.2vw; */
    font-weight: bold;
    padding: .8rem 1rem;
    /* -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; */
    margin: 1rem 0;
    transition: color 200ms;
}

.wpcf7 input.wpcf7-submit:hover {
    cursor: pointer;
    text-decoration: none;
    color: #ababab !important;
    transition: color 200ms;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
    color: #e5e1da !important;
    
}

.wpcf7-not-valid-tip {
    font-size: 1vw;
}

.wpcf7 [type=checkbox],
.wpcf7 [type=radio] {
    margin: 0;
    margin-right: .5rem;
}

/* ???
---------------------------------------------- */
.wpcf7 .names p {
    width: 49%;
    display: inline-block;
}

.wpcf7 .names p:first-child {
    margin-right: .5rem;
}

.wpcf7 .wpcf7-list-item {
    margin-left: 0;
}



.wpcf7 .wpcf7-radio .wpcf7-list-item {
    margin-right: 1.5rem;
}

.wpcf7 [type=date] {
    display: inline-block;
    float: left;
    width: 47.8%;
    margin-right: 5px;
}




/* FOOTER
---------------------------------------------- */

#footer-container {
    background-color: var(--bg-color-footer);
    border-top: none;
    margin-top: 0;
    /* height: 6rem; */
}

#footer-container .columns {
    padding: 0;
}

footer#footer .first, 
#footer .left {
    padding-left: calc( 5.666666% - -0.016666666666667%);
}

footer#footer .third, 
#footer .right {
    padding-right: calc( 5.666666% - -0.016666666666667%);
}

/* footer#footer .columns {
    margin-bottom: 2rem;
} */

footer#footer h2 {
    font-size: 1.4rem;
    color: var(--color-footer);
}

footer#footer, footer#footer p {
    /* font-size: 1.2rem; */
    color: var(--color-footer);
}

footer#footer .meta-link {
    font-size: 1.2rem;
}

/* footer#footer a {
    color: #f1efec;
} */

#footer .legal {
    /* margin-top: 1rem; */
    padding-top: 1.5rem;
    /* border-top: 1px solid; */
    /* font-size: 0.8rem; */
    color: inherit;
    display: flex;
}

footer#footer .legal p {
    /* font-size: 0.8rem; */
}

#footer .left {
    text-align: left;
}

#footer .center {
    text-align: center;
}

#footer .right {
    text-align: right;
}

/* für schmale version */
#footer {
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
}

#footer .nl-form input[type=submit] {
    margin: 0;
    padding: .5rem;
}

#footer .nl-form .nl-fields {
    display: flex;
}

#footer .wpcf7-spinner {
    display: none;
}



/* normales Layout only */
@media screen and (min-width: 1024px) {

    #footer .nl-form .nl-fields div {
        margin: 0 0.5rem;
    }
    .delete-normal {
        display: none;
    }

}




/* 
-------------------------------------------------------------------------------------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* MENÜ und HEADER */

/* Einstellungen für Header in der Mobilen Version (alle Phones und auch alle Tablets bis max 1199, ab 1200 fangen kleine 13" Macbooks an(oder auch alte Laptops)) (entspricht small - large) */
@media screen and (max-width: 1199px) {

    #header.site-header {
        display: block!important; /* weil das mobile menu app dieses element sonst automatisch ausblendet */
    }

    header#header .menu-column {
        display: none;
    }

    header#header {
        padding-top: 2rem;
        background-color: transparent;
    }

    header#header .logo {
        padding: 0 0;
        text-align: left; /* hier auch left anstelle von center, weil sonst die transition nicht gut aussieht. zentrierung über margin */
    }

    header#header .logo img {
        height: var(--header-size-m);
        transition: height 0.5s;
    }
    
    header#header .logo a.weiss {
        /* margin: 0 calc(0.5 * (100% - var(--header-size-m) * var(--logo-ratio))); */
        margin: 0 2.5rem;
        /* margin: 0 3.5rem; */
        transition: margin 0.5s;
    }

    header#header.smaller {
        padding-top: min(1.5vw, 7px);
        padding-bottom: min(1.5vw, 7px);
    }
    
    header#header.smaller .logo {
        text-align: left;
    }

    header#header.smaller .logo img {
        height: var(--header-size-m-smaller);
        transition: height 0.5s;
    }
    
    header#header.smaller .logo a.weiss {
        /* width: min(75%, 350px); */
        /* noch nicht endgültiger wert: */
        margin: 0 0 0 1rem;
    }

    section.inhalte.margin-top {
        margin-top: min(14.7vw, 65px); /* header-höhe in der mobilen version */
    }

    .fancybox__slide {
        padding-top: 120px !important;
    }

}

/* extra für Landscape Phones ohne schwarzen balken damit man mehr bildschirm sieht und andere transitions. bei 1024 fangen die tablets landscape an (small und medium) */
@media screen and (max-width: 1023px) and (orientation: landscape) {
    header#header {
        transition: top 0.5s;
    }
    header#header.smaller {
        top: -100px;
        overflow: hidden;
        background-color: transparent;
    }
    header#header .logo, 
    header#header.smaller .logo {
        /* text-align: center; */
        text-align: left;
    }
    header#header .logo img, 
    header#header.smaller .logo img {
        height: var(--header-size-m-landscape);
    }
    header#header .logo a.weiss,
    header#header.smaller .logo a.weiss {
        /* margin: 0 auto; */
        margin: 0 2.5rem;
    }

    .fancybox__slide {
        padding-top: 65px !important;
    }
    
}




/* INHALTE */

/* Zwischenversion für Tablets in Landscape - Layout fast wie normal aber mit größerer Schrift (entspricht large) */
@media screen and (min-width: 1024px ) and (max-width: 1199px) {
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.65rem;
    }
    
    h3 {
        font-size: 3.5rem;
    }

    /* NL etc. */
    h4 {
        font-size: 2rem;
    }

    /* Absatz-Überschrift */
    h5 {
        /* wie p */
        font-size: 1.2rem;
    }

    h6 {
        /* wie p bzw bisschen kleiner */
        font-size: 1.1rem;
    }

    .h7 {
        font-size: 1.4rem;
    }

    p, ul li, th, td {
        font-size: 1.2rem;
    }

    .small, .psmall p,
    .psmall ul li, form label,
    .wpcf7 form.sent .wpcf7-response-output,
    .wpcf7 form .wpcf7-response-output {
        font-size: 0.9rem;
    }

    .wpcf7-not-valid-tip {
        font-size: 0.8rem;
    }

    a.buttonlink {
        font-size: 1.4rem;
    }

    .page-headline{
        bottom: 3%;
        left: 6%;
    }

    section.inhalte section:only-child{
        min-height: calc(100svh - 65px) !important;
    }

    section.zitat h1.zitat {
        font-size: 1.40rem;
        margin-bottom: 0;
    } 

}



/* Mobile Ansicht Content bis 1023 (alle phones, tablets portrait) (entspricht small und medium)*/
@media screen and (max-width: 1023px) {

    h1 {
        font-size: 2.2rem;
        margin-bottom: 1.2rem;
    }
    
    h2 {
        font-size: 1.65rem;
    }
    
    h3 {
        font-size: 3rem;
        hyphens: manual;
    }

    /* NL etc */
    h4 {
        font-size: 1.5rem;
    }

    /* Absatz-Überschrift */
    h5 {
        /* wie p */
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
        /* padding-top: 1rem; */
    }

    h6 {
        /* wie p bzw bisschen kleiner*/
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        padding-top: 1rem;
    }

    .h7 {
        font-size: 1.5rem;
    }
    
    p {
        line-height: 1.35;
    }

    p, ul li, th, td{
        font-size: 1.15rem;
        /* font-size: 1.35rem; */
        /* -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto; */
    }

    .small, .psmall p,
    .psmall ul li, form label,
    .wpcf7 form.sent .wpcf7-response-output,
    .wpcf7 form .wpcf7-response-output {
        font-size: 0.9rem;
    }

    .wpcf7-not-valid-tip {
        font-size: 0.8rem;
    }

    .f-spacy {
        margin-bottom: 1.8rem;
    }

    .f-list {
        margin-bottom: .3rem;
    }

    a.buttonlink {
        font-size: 1.5rem;
        margin-bottom: 1.3rem;
    }

    a.buttonlink:first-of-type {
        padding-top: 1.3rem;
    }


    .page-headline{
        bottom: 2%;
        left: 4%;
    }

    p:has(+ h5) {
        margin-bottom: 2rem;
    }
    
    a.bltermine {
    /* font-size: 1.8vw; */
    padding-top: 2rem !important;
}

    
    

    section.inhalte section {
        flex-direction: column;
    }

    section.inhalte section.fullscr{
        min-height: unset !important;
    }
    section.inhalte section:only-child{
        min-height: calc(100svh - min(14.7vw, 65px)) !important;
    }

    section.inhalte.text-only {
    
        padding: 3rem 0;
        min-height: calc(100svh - min(14.7vw, 65px));
    }
    
    section.inhalte .bild {
        height: 100vw;
    }

    
    section.inhalte .text, section.inhalte .tl_tr_wrapper0 {
        margin: 3rem 0; /* safety space... */
    }
    
    section.inhalte .content, section.inhalte .content-right, section.abschnitt_tl_tr h1 {
        width: 92%;
        margin-left: 4%;
        margin-right: auto;
    }

    .kachel-holder {
    width: 300px;
}

.kachel-holder p {
    font-size: 0.5rem;
}

    .grid-item {
    grid-column: 1 / span 2;
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
    height: 100px;
}

    section.zitat {
        padding: 4rem 0;
    }
    section.zitat h1.zitat {
        font-size: 1.35rem;
        margin-bottom: 0;
    }   


    section.galerie {
        padding: 3rem 0;
    }

    section.galerie .video {
        margin-top: 6rem;
    }

    .carousel .slick-slide img {
        max-height: 300px;
    }

    .slick-prev {
        left: -5px !important;
        z-index:999 !important;
        display: none !important;
    }
    
    .slick-next {
        right: -5px !important;
        display: none !important;
    }

    .slick-dots li {
        width: 1.5vw !important;
    }
    .carousel .slick-dots {
        max-width: 30vw;
    }



    .fancybox-slide--html {
        padding: 50px 1% !important;
    }
    
    .fancybox-content {
        padding: 20px !important;
    }


    /* .rezensionen-carousel .slick-dots li button::before {
        line-height: 30px !important;
    } */




    section.abschnitt_rezensionen .slick-prev {
        left: -35px !important;
    }
    
    section.abschnitt_rezensionen .slick-next {
        right: -35px !important;
    }

    .wpcf7-acceptance label {
        display: flex;
        align-items: baseline;
    }

    .wpcf7 .md {
        width: 100%;
    }

    .wpcf7 [type=checkbox] {
        margin-right: .8rem;
    }


    /* Footer */

    #footer .legal {
        flex-direction: column;
    }
    
    #footer .left,
    #footer .center,
    #footer .right {
        text-align: center;
        order: unset !important;
        padding-left: 4%;
        padding-right: 4%;
    }
    
    #footer .nl-form .nl-fields {
        flex-direction: column;
    }

    /* "Bild-Regie"... */

    .swap-mobile {
        order: 1; 
    }

    .delete-mobile {
        display: none; 
    }


    
}

/* Tablets Portrait */
@media screen and (min-width: 700px ) and (max-width: 1023px) and (orientation: portrait) {

    section.inhalte .bild {
        height: 60vw;
    }

    .mobile-bg-pos-10 {
        background-position: center 10% !important;
    }
    .mobile-bg-pos-20 {
        background-position: center 20% !important;
    }
    .mobile-bg-pos-30 {
        background-position: center 30% !important;
    }
    .mobile-bg-pos-40 {
        background-position: center 40% !important;
    }
    .mobile-bg-pos-50 {
        background-position: center center;
    }
    .mobile-bg-pos-60 {
        background-position: center 60% !important;
    }
    .mobile-bg-pos-70 {
        background-position: center 70% !important;
    }
    .mobile-bg-pos-80 {
        background-position: center 80% !important;
    }
    .mobile-bg-pos-90 {
        background-position: center 90% !important;
    }

    section.inhalte .content, section.inhalte .content-right, section.abschnitt_tl_tr h1 {
        width: 88%;
        margin-left: 6%;
    }

    /* .page-headline{
        bottom: 2%;
        left: 6%;
    } */
    
}

/* extra für Landscape Phones */
@media screen and (max-width: 1023px) and (orientation: landscape) {
    section.inhalte .bild {
        height: 60vw;
    }

    .mobile-bg-pos-10 {
        background-position: center 10% !important;
    }
    .mobile-bg-pos-20 {
        background-position: center 20% !important;
    }
    .mobile-bg-pos-30 {
        background-position: center 30% !important;
    }
    .mobile-bg-pos-40 {
        background-position: center 40% !important;
    }
    .mobile-bg-pos-50 {
        background-position: center center;
    }
    .mobile-bg-pos-60 {
        background-position: center 60% !important;
    }
    .mobile-bg-pos-70 {
        background-position: center 70% !important;
    }
    .mobile-bg-pos-80 {
        background-position: center 80% !important;
    }
    .mobile-bg-pos-90 {
        background-position: center 90% !important;
    }
    
}

/* Foundation-Breakpoints */


/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 1281px) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

/* XL and up */
@media screen and (min-width: 75em){
    .xlarge-3 {
        width: 25%;
    }
    .xlarge-9 {
        width: 75%;
    }
    .xlarge-2 {
        width: calc(2/12 * 100%);
    }
    .xlarge-10 {
        width: calc(10/12 * 100%);
    }
    .xlarge-1 {
        width: calc(1/12 * 100%);
    }
    .xlarge-11 {
        width: calc(11/12 * 100%);
    }
}