/* Live Seite */
@font-face {
    font-family: "PPMori Regular";    
    src: url("fonts3/PPMori-Regular.eot?#iefix") format("eot"), url("fonts3/PPMori-Regular.woff2") format("woff2"), url("fonts3/PPMori-Regular.woff") format("woff"), url("fonts3/PPMori-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "PPMori Book";    
    src: url("fonts3/PPMori-Book.eot?#iefix") format("eot"), url("fonts3/PPMori-Book.woff2") format("woff2"), url("fonts3/PPMori-Book.woff") format("woff"), url("fonts3/PPMori-Book.ttf") format("truetype");
}

@font-face {
    font-family: "PPMori SemiBild";    
    src: url("fonts3/PPMori-SemiBold.eot?#iefix") format("eot"), url("fonts3/PPMori-SemiBold.woff2") format("woff2"), url("fonts3/PPMori-SemiBold.woff") format("woff"), url("fonts3/PPMori-SemiBold.ttf") format("truetype");
}

/* ---------------------------- */
#cmsPage476 .vorlageDetailInnerContentWrapper {
    display: none;
}
::-webkit-scrollbar {
    display: none;
}

.cont li {
    font-size: 16px;
}

.cont>span {
    font-size: 16px;
}

.menuentry3 a {
    font-size: 15px !important;
}

/* Scrolltop Button Wrapper
    Anm.: bei Seite Projekte */
.scroll-top-wrapper {    
    /* mittig ausrichten */
    text-align: center;
    margin: 40px 0;
}

/* Scrolltop Button */
.scrollTopBtn {      
  align-items: center;  
  gap: 0.2em;
  padding: 0.3em 0.6em;
  background-color: #F2F2F2;
  color: black;
  border: 2px solid black;
  border-radius: 15px;
  text-decoration: none;
  font-size: 2rem;
  transition: all 0.3s ease;
}

.scrollTopBtn:hover {
  /* background-color: black;
  color: white; */
  padding: 0.3em 0.8em;
}

.scrollTopBtn .arrow-top {
  font-weight: bold;
  transition: transform 0.3s ease;
}

.scrollTopBtn:hover .arrow-top {
  transform: translateX(2px);  
  padding-right: 4px;
}

.scrlTp {
    text-decoration: none;
}

/* SVG Icon in mobile Fusszeile mit Hover Effekt */
.svg-icon-img {
    width: 74px;
    transition: transform 0.3s ease;
  }

  .svg-icon-img:hover {
    transform: scale(1.05);
  }

/* Projekte Detailseite mit kleinerem unteren Rand */
#cmsPage619 #contentPage #cms_inhaltsbereich, #cmsPage619 #contentPageSmallHeaderHeight #cms_inhaltsbereich {
   padding-bottom: 10px;
}

/* Projekt Kategorien Navigation */
.menuProjekte {    
    padding-top: 20px;
    text-align: right;
    position: absolute;
    right: 180px;
}

.projekt-category-navi {
  display: flex;
  flex-direction: column;  
  /* gap: 8px; */
}

.projekt-category-navi-item a {
    color: #555555 !important;
}

.projekt-category-navi a {
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;    
}

.projekt-category-navi a:hover {
    letter-spacing: 1.3px;
}

.projekt-category-selected a {
    color: #000000 !important;
}

#map-canvas {
    width: auto;
    height: 380px;
    margin-left: 30px;
    margin-right: 20px;
}

body {
    margin: 0 0 32px;
    padding: 0;
    color: #000;
    background-color: #F2F2F2;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'PPMori Book';
    font-size: 16px;
}

.fontBig {
    font-size: 2.5rem;
}

#cms_seiteninhalt {
    font-size: 2rem;
}

#bodyStart {
    background-color: #86918B;
}

ul {
    /* margin: 0;
    padding: 0; */
}

li {
    margin: 0;
    padding: 0;
}

a {
    color: #000000;
}

header {
    width: 100%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 12px 0 #121212;
}

/* Fuer Header und Footer breiter */
.wrapperBig {
    width: 2500px; /* 1920px */
    max-width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
}

header .wrapperBig {
    position: relative;
}

.wrapper {
    width: 1240px;
    max-width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;    
}

header .wrapper {
    /* Header wrapper ausrichten - nicht mehr noetig da Header Big */
    position: relative;
}

.wrapperSmall {
    /* display: block; */
    width: 1000px;
    max-width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;    
}

/* Standard-Hyperlinks (nicht intern oder extern) mit easy-Effekt formatieren
    Anm.: fuer Impressum und Datenschutzerklaerung */
.wrapperSmall a {
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

.wrapperSmall a:hover {
    letter-spacing: 1.3px;
}

/* Projekt - Detailseite: unterer Slide mit Hinweistext 30 Jahre weniger breit
    Anm.: gleich wie bei wrapper */
#onePageLayout726 {
    /* ist in Bigwrapper. Gleiche Breite wie bei wrapper */
    width: 1240px;  
    max-width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
}

/* double menu */

.cont span>span {
    float: right;
    margin-right: 90px;
}

#topNav {
    font-family: "PPMori Book";
    height: 100px;
    position: relative;
    width: 100%;
}

#topNav ul {
    margin-top: 2px;
}

#topNav li {
    display: inline-block;
    list-style: none;
    padding: 0 20px;
    box-sizing: border-box;
}

#topNav li:hover {
    color: #000000;
}

#topNav a {
    line-height: 100px;
    font-size: 17px;
    color: #000;
    text-decoration: none;
    height: 100px;
}

#topNav a:hover {
    /* font-weight: bold; */
}


/* Ausrichtung Logo */

.logo-container {
  float: left;
  width: 204px;
  height: auto;
  overflow: hidden;  
  margin-top: 0px;
  margin-right: 14px; 
  border: 0px;
  /* padding-left: 50px; */    
}

.logo-image {
    border: 0px;
    width: 204px;
    height: auto;
    margin-top: -70px;
    /* opacity: 0.8; */
    /* transition: opacity 1.5s ease-in-out; */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.logo-container:hover .logo-image {
    content: url('https://www.ralphbeckarchitekten.li/images/logoHover.svg'); /* Bild beim Hover */
    /* opacity: 1; */
    opacity: 0.8;
    animation: fadeIn 0.5s ease-in forwards;
}

/* Animation Deckkraft bei Hover logo */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/*
#topNav #logo {
    float: left;
    margin-top: 24px;
    margin-right: 14px;
}
*/

/* Projekt Detailliste: Linkes Logo fix, rechtes Menu scrollt nach oben weg 
    Anm.:funktioniert, aber wird nicht genutzt, wegen Problemen mit vertikalem Fade Effekt und zurueck einblenden ganz unten */
#topNavPageLogoFixMenuScroll #navi-menu {
    /* Menu fixieren */
    position: fixed;
    /* Ausrichtung rechts, da bestehendes float bei fixed nicht funktioniert */
    right: 50px; /* gleicher Abstand wie bei wrapperBig */
}

/* Disclaimer, Impressum: Linkes Logo scrollt nach oben weg, rechte Navigation ist fixiert */
#topNavPageLogoScrollMenuFix #navi-menu {
    /* Menu fixieren */
    position: fixed;
    /* Ausrichtung rechts, da bestehendes float bei fixed nicht funktioniert */
    right: 50px; /* gleicher Abstand wie bei wrapperBig */
}

/* Fixiert Header auf Startseite und Onepager */
#whiteWrap {
    /* weisses Transparenz Band fuer besseres Lesen:  background: rgba(255, 255, 255, 0.9); */    
    width: 100%;
    height: 100px;
    /* navigation scrollt raus: position: absolute; */
    position: fixed;    
    z-index: 200;
}

/* Fixiert Header auf Startseite und Onepager */
#whiteWrapPage {
    /* weisses Transparenz Band fuer besseres Lesen:  background: rgba(255, 255, 255, 0.9); */    
    width: 100%;
    height: 100px;
    /* navigation scrollt raus: position: absolute; */
    /* position: absolute; */
    position: fixed;    
    z-index: 200;
}

/* Header nicht fixiert, Logo fix, Menu scrollt raus */
#whiteWrapLogoFixMenuScroll {
    /* weisses Transparenz Band fuer besseres Lesen:  background: rgba(255, 255, 255, 0.9); */    
    width: 100%;
    height: 100px; 
    position: absolute;    
    z-index: 200;
}

/* Header nicht fixiert, Logo fix, Menu scrollt raus */
#whiteWrapLogoFixMenuScroll .logo-container {
    /* Logo fixiert */
    /* position: fixed; */
}

/* Startseite und Onepager und Folgeseite (z.B. Buero) */
#topNavStart, #topNavScrolltop, #topNavPage, #topNavPageSmall {
    font-family: "PPMori Book";
    height: 100px;
    /* Header ist fixiert */
    position: absolute;
    /* navigation scrollt raus: position: absolute; */    
    width: 100%;
    /* z-index: 99999; */
    left: 0;

    /* Fuer Masken Fade-Effekt um oberes Menue schrittweise auszublenden */
    transition: mask-image 0.5s ease-out;
    /* Anfangszustand: keine Maske */
    mask-image: none;
    -webkit-mask-image: none;
}

/* Folgeseite Logo Scroll, Menu fix (Disclaimer) */
#topNavPageLogoScrollMenuFix {
    font-family: "PPMori Book";
    height: 100px;
    /* Header scrollt mit */
    position: absolute;
    /* navigation scrollt raus: position: absolute; */    
    width: 100%;
    /* z-index: 99999; */
    left: 0;
}

#topNavStart ul, #topNavPage ul, #topNavPageSmall ul, #topNavScrolltop ul, #topNavPageLogoScrollMenuFix ul {
    float: right;
}

#topNavStart li, #topNavPage li, #topNavPageSmall li, #topNavScrolltop li, #topNavPageLogoScrollMenuFix li {
    /* display: inline-block; */
    list-style: none;
    /* padding: 0 20px; */
    box-sizing: border-box;
}

#topNavStart li:hover, #topNavPage li:hover, #topNavPageSmall li:hover, #topNavScrolltop li:hover, #topNavPageLogoScrollMenuFix li:hover {
    color: #000000;
}

#topNavStart a, #topNavPage a, #topNavPageSmall a, #topNavScrolltop a, #topNavPageLogoScrollMenuFix a {
    /* line-height: 100px; */
    color: #000;
    text-decoration: none;
    font-weight: normal;
    border: 0px;
    /* height: 100px; */
}

#topNavStart a:hover, #topNavPage a:hover, #topNavPageSmall a:hover, #topNavScrolltop a:hover, #topNavPageLogoScrollMenuFix a:hover {
    font-weight: normal;
    letter-spacing: 1.3px;
}

/* Untere Punkte der Eyecatcher */

#slidebox1 div.ls-gui-element.ls-bottom-nav-wrapper span a {
    background-color: #a5a5a5;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-image: none !important;
}

#slidebox3 div.ls-gui-element.ls-bottom-nav-wrapper span a {
    background-color: #a5a5a5;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-image: none !important;
}

#slidebox1 div.ls-gui-element.ls-bottom-nav-wrapper span .ls-nav-active {
    background-color: #f2f2f2;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-image: none !important;
}

#slidebox3 div.ls-gui-element.ls-bottom-nav-wrapper span .ls-nav-active {
    background-color: #f2f2f2;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-image: none !important;
}

/* Ausrichtung Logo Startseite */

#topNavStart #logo, #topNavPage #logo, #topNavPageSmall #logo, #topNavScrolltop #logo, #topNavPageLogoScrollMenuFix #logo {
    float: left;
    margin-top: 24px;
    margin-right: 14px;
}

#navi-menu {
    /* In einer Linie mit Logo */
    top: 15px;    
    /* Damit in einer Linie mit Inhalt und Footer */
    padding-left: 9px;
    /* Menu rechts ausrichten */
    float: right;
    text-align: right;    
    /* padding-right: 50px; */
}

#navi-menu .menulink1 {
    font-size: 2rem;
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

#navi-menu .menulink1:hover {
    letter-spacing: 1.3px;
}

#navi-menu>ul>li {
    /* ein Menu-Eintrag Ebene 1 pro Zeile */
    width: 100%;
}

#navi-menu>ul>li>ul {
    display: none;
}

#menuBtn {
    width: 29px;
    height: 50px;
    cursor: pointer;
    display: none;
    line-height: 50px;
    padding-left: 28px;
}

.subMenuBtn {
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: none;
    float: right;
    line-height: 34px;
}

/* Mobile Menu am unteren Rand ausblenden */
#mobileMenuDisplay { 
    display: none;     
}

/* Slider Startseite */

.ls-layers {
    /* background-color: rgba(0, 0, 0, 0.4); */
}

#ortText {
    line-height: 16px !important;
    height: 250px;
    color: #FFF;
    width: 450px;
    position: absolute;
    top: 50%;
    font-size: 1rem;
    left: 200px;
    max-width: none !important;
}

#unterStrich {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #FFF;
    max-width: none !important;
}

#titelText {
    word-break: break-all !important;
    word-wrap: break-word !important;
    white-space: normal;
    line-height: 49px !important;
    font-size: 49px;
    letter-spacing: 4px;
    color: #FFF;
    max-width: none !important;
    border-top: 1px solid white;
}

#infoText {
    line-height: 16px !important;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    padding-top: 7px;
    color: #FFF;
    max-width: none !important;
    word-break: break-all !important;
    word-wrap: break-word !important;
}

.sliderDescription {
    height: 100vh;
}

#cms_inhaltsbereich {
    /*    
    margin-left: 29px;
    margin-right: 20px; 
    margin-top: 0px;
    margin-bottom: 0px; */
}

.zeile1, .zeile2, .zeile3, .zeile4 {
    margin-top: 20px;
    display: inline-block;
    text-align: center;
    padding-top: 10px;
    text-align: left;
    vertical-align: top;
    padding: 10px 67px 0 0;
}

.zeile1k, .zeile2k, .zeile3k, .zeile4k {
    display: inline-block;
    text-align: center;
    padding-top: 10px;
    text-align: left;
    vertical-align: top;
    padding: 10px 92px 0 0;
}
.logoFacebook{
    height:12px;
}
.logoInstagram{
    height:12px;
    margin-left: 10px;
}
.logoFooter{
    height:12px;
    margin-left:10px;
}

.zeile4 {
    padding: 10px 0 !important;
}

.zeile1>span:first-child, .zeile2>span:first-child, .zeile3>span:first-child, .zeile4>span:first-child {
    font-size: 25px;
    font-family: 'PPMori Book';
}

.zeile1 span, .zeile2 span, .zeile3 span, .zeile4 span {}

.teamZeilen {
    width: 218px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    color: #4d4d4c;
    margin-top: -24px;
}

.groupTitle {
    /* text-transform: uppercase; */
    font-weight: bold;
    font-size: 19px;
}

.cont {
    width: 220px;
}

.cont div {
    display: inline;
}


/*
#social { padding-top: 10px; font-size: 20px; }
#social span { padding: 0 14px; }
#social span:hover { cursor: pointer; color: #898989; }
*/

footer {
    background: #000;
}

.footerDesktop, .footerDesktopPage {
    /*
    width: 100%;
    height: 50px;
    background: #000;
    position: fixed;
    bottom: 0;
    padding-top: 3px;    
    color: #BCBCBC;     
    z-index: 2000;        
    font-size: 16px;    
    */

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;
    color: #BCBCBC; 
    background: #000;
    z-index: 2000;        
}

/* footer div { padding-top: 3px; } */

.footerDesktop a, .footerDesktopPage a {
    /* color: #FFFFFF; */
    /* #424242; */
    text-decoration: none;
    -moz-transition: background .4s ease;
    -webkit-transition: background .4s ease;
    -ms-transition: background .4s ease;
    transition: background .4s ease;
}

/* #fUnterStrich { width: 400px; height: 2px; border-bottom: 1px solid #424242; margin: 0 auto; } */

#footerTextArea {
    float: left;
    /* padding-left: 50px; */ /* wie Text im Logo */
    padding-right: 20px; /* wie Menu */
}

#footerTextArea a {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    display: inline-block;
    background: none;
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

#footerTextArea a:hover {
  /* transform: scale(1.1); */
  letter-spacing: 0.64px;
  color: #FFFFFF;
}

#footerDisclaimerArea {
    float: right;
    /* float: right;
    margin-left: 7px; */
    /* padding-right: 50px; */
    /* width: 135px;
    padding-left: 53px; */
}

#footerDisclaimerArea a {
    text-decoration: none;
    color: inherit;
    /* transition: transform 0.2s ease; */
    display: inline-block;
    background: none;
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

#footerDisclaimerArea a:hover {
  /* transform: scale(1.1); */
  letter-spacing: 0.64px;
  color: #FFFFFF;
}

#footerDisclaimerArea span {
    /* padding: 0 7px; */
}

#footerDisclaimerArea span:hover {
    /* cursor: pointer;
    color: #898989; */
}

/* Mobile Footer ausblenden */
.footerMobile {
    display: none;
    text-align: center;    
    width: 100%;    
    background: #000;
    position: relative;
    
    /* height: 450px; */
    bottom: -60px;

    width: 100%;
    height: calc(100vh - 60px);
    min-height: calc(100vh - 60px);
    overflow-y: auto;

    /*
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    */

    padding-top: 3px;    
    color: #BCBCBC;     
    font-size: 1.7rem;
}

.footerMobile #footerDisclaimerArea {
    clear: both;
    width: 100%;
    text-align: center;
    font-size: 1.7rem;
}

.footerMobile #footerDisclaimerArea a {
    padding: 0;
}

.footerMobile .textlink_intern a {
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

.footerMobile .textlink_intern:hover a {
    letter-spacing: 1.3px;
}

#startBackground .wrapper {
    width: 100%;
    height: 100%;
}

#startBackground {
    position: relative;    
    width: 100%;
    height: 100vh;    
    min-height: 100vh;
    padding-bottom: 290px;
}

.onePageLayout {
    padding: 0 0 290px;
}

/* Folgeseite Abstand Inhalt - Footer */
#contentPage #cms_inhaltsbereich, #contentPageSmallHeaderHeight #cms_inhaltsbereich {
    /* Fuer Abstand mobile Footer zu Inhalt */
    padding-bottom: 100px;
}

#slidebox1 {
    position: relative;
    width: 100%;
    min-height: 100% !important;
}

#slidebox3 {
    position: relative;
    width: 100%;
    min-height: 100% !important;
}

.ls-bottom-nav-wrapper {
    display: block;
    top: -40px;
}

.ls-nav-start {}

.ls-nav-start-active {}

.ls-bottom-slidebuttons {
    bottom: 70px;
}


/*
.ls-bottom-slidebuttons a {
    margin: 0 7px !important;
    width: 20px;
    height: 20px;
    border: 1px solid #fff !important;
    display: inline-block;
    border-radius: 50%;
    margin: 0 2px;
    -moz-transition: background .4s ease !important;
    -webkit-transition: background .4s ease !important;
    -ms-transition: background .4s ease !important;
    transition: background .4s ease !important;
}
*/

.ls-nav-active {
    /* background: #9b9897 !important; */
}

.unsichtbar {
    display: none;
}

/* Projekte */
#vorlageListContainer673 .vorlage_columnFlexible, #vorlageListContainer619 .vorlage_columnFlexible {    
   /* Multi-Column-Layout */
    column-count: 3;
    column-gap: 2em;
    width: 100%;
    box-sizing: border-box;    
    /* padding-bottom: 20px; */
}

#vorlageListContainer673 .vorlage_entry, #vorlageListContainer619 .vorlage_entry {
    /* Abstand nach Item */
    /* margin-bottom: 40px; */
    margin-bottom: 2em;
}

#vorlageListContainer673 .projekt-item, #vorlageListContainer619 .projekt-item {    
    break-inside: avoid;     /* verhindert Überlappungen */

    /* untere Linie */
    border-bottom: 1px solid #000000; /* feine Linie */  
    margin-bottom: 2em;
}

/* Bild in voller Breite, Höhe dynamisch */
#vorlageListContainer673 .projekt-item-bild img, #vorlageListContainer619 .projekt-item-bild img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#vorlageListContainer673 .projekt-item-bild::after, #vorlageListContainer619 .projekt-item-bild::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* kein Schleier im Normalzustand */
    transition: background-color 0.3s ease;
}

#vorlageListContainer673 .projekt-item-bild:hover::after, #vorlageListContainer619 .projekt-item-bild:hover::after {
    background-color: rgba(255, 255, 255, 0.2); /* leichter weisser Schleier */
}

#vorlageListContainer673 .projekt-item-data, #vorlageListContainer619 .projekt-item-data {
    display: flex;
    justify-content: space-between; /* oder flex-start, je nach Layoutwunsch */
    align-items: center;
    gap: 1rem; /* Abstand zwischen Beschreibung und Jahr */    
    height: 2em; /* damit Zentrierung funktioniert */
    text-align: center;
}

#vorlageListContainer673 .projekt-item-titel {  
  /* text-align: left;
  flex: 1; */
}

#vorlageListContainer673 .projekt-item, #vorlageListContainer619 .projekt-item a {
    font-weight: normal;
    text-decoration: none;    
    transition: all 0.3s ease;
}

#vorlageListContainer673 .projekt-item, #vorlageListContainer619 .projekt-item a:hover {    
    letter-spacing: 0.5px;
}

#vorlageListContainer673 .projekt-item-jahr {
  /*
  text-align: right;
  white-space: nowrap; */
}

/* Projekte - Detail */

.projekt-detail-item {
    font-size: 2rem;
}

.projekt-detail-item-data {
  display: flex;
  gap: 20px;
  width: 100%;
}

.projekt-detail-item-left,
.projekt-detail-item-right {
  flex: 1;
  min-width: 0;
}

.projekt-detail-item-middle {
  flex: 2;
  min-width: 0;
}

/* Wrapper für das Bild */
.projekt-detail-item-bild-wrapper {
  width: calc(75% - 10px);
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  /* Hoehe des Bildes, damit darunter die 2 Textzeilen mit Daten passen */
  height: calc(100vh - 8em);
  /* Damit Bild ueber dem Menu ist und dieses beim runterscrollen hinter dem Bild verschwindet */
  z-index: 200;
  position: relative;
}

.projekt-detail-item-bild img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;    
    height: 100%;  
    object-fit: cover;    
}

.projekt-detail-item-titel {
    margin-bottom: 20px;
}

.projekt-detail-flaeche-jahr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.projekt-detail-item-beschreib {
    padding-top: 2em;
}

/* Header Projekte Detail fuer Mobile mit Titel, Jahr, Ort ausblenden */
.projekt-detail-item-header-mobile {
    display: none;
}

/* Projektgalerie */

.projekt-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.projekt-detail-gallery-item {
  display: flex;
  align-items: flex-start;
  padding-top: 90px;  
}

.projekt-detail-gallery-text {
    font-size: 2rem;
    text-align: center;
  flex: 1;
  margin-right: 0; /* kein zusätzlicher Abstand */
  padding-right: 10px; /* optional: minimaler Abstand zum Bild */
}

.projekt-detail-gallery-bild {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.projekt-detail-gallery-item.reverse {
  flex-direction: row-reverse;
}

.projekt-detail-gallery-bild img {  
  max-width: 100%;
  height: auto;
  display: block;  
}

/* Projekte Slider bei Startseite und Buero */

.projekt-slide-item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei gleich breite Spalten */
    gap: 2em;
    font-size: 1rem;    
}

.projekt-slide-item-list .projekt-slide-item {    
    break-inside: avoid;     /* verhindert Überlappungen */

    /* untere Linie */
    border-bottom: 1px solid #000000; /* feine Linie */  
    margin-bottom: 2em;
}

.projekt-slide-item-bild {
    position: relative;
    flex: 1; /* Alle gleich breit */  
    display: block;
    overflow: hidden;
}

/* Bild in voller Breite, Höhe dynamisch */
.projekt-slide-item-list .projekt-slide-item-bild img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;    
}

.projekt-slide-item-list .projekt-slide-item-bild::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* kein Schleier im Normalzustand */
    transition: background-color 0.3s ease;
}

.projekt-slide-item-list .projekt-slide-item-bild:hover::after {
    background-color: rgba(255, 255, 255, 0.2); /* leichter weisser Schleier */
}

.projekt-slide-item-list .projekt-slide-item-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Abstand zwischen Beschreibung und Jahr */    
    height: 2em; /* damit Zentrierung funktioniert */
    /* text-align: center; */
}

.projekt-slide-item-list .projekt-slide-item a {
    font-weight: normal;
    text-decoration: none;    
    transition: all 0.3s ease;
}

.projekt-slide-item-list .projekt-slide-item a:hover {
    letter-spacing: 0.5px;
}

/* Projekte Detailseite (alt) */

.slideme_container img {
    /* Damit Bild skaliert wird */
    max-width: 100%;
}

.projekteLeft {
    width: 544px;
    float: left;
    margin-right: 50px;
    margin-bottom: 20px;
}

.projekteRight {
    width: 250px;
    float: left;
    border-left: 1px solid;
    padding-left: 5px;
    /* margin-left: 50px; */
}


/* Abstaende Inhalt zu oberem Rand */

/* Onepager */
#contentOnePager {
  /* position: fixed;
  top: 0; */
}

/* letzter Slide mit Projektslide */
.onePageLayoutLast {
    /* Abstand des letzten Slides zu Projektslide kleiner */
    padding-bottom: 4em;
    /* Grosser Abstand bei 4K, damit unterer Projekte-Slide komplett den Screen nutzt */
    padding-top: 290px;
}

/* Folgeseiten normal */
#contentPage {    
    padding-top: 200px;
}

/* Folgeseite kleine Headerhoehe
    Anm.: Projekt Detailseite */
#contentPageSmallHeaderHeight {
    padding-top: 150px;
}

#contentPage h2, #contentPageSmallHeaderHeight h2 {
    font-size: 2.5rem;
    font-weight: normal;
}

#contentPage h3, #contentPageSmallHeaderHeight h3 {
    font-size: 2rem;
    font-weight: normal;
    margin: 0;
}

/* Dienstleistungen - Akkordeon */
#vorlageListContainer718 .vorlage_columnFlexible{
    /* max-width: 700px; */
    width:100%;
    position: relative;
}

#vorlageListContainer718 .vorlage_entry {
    margin-top: 0px;
}
#vorlageListContainer718 .vorlage_listFlexible {
    /* 1-spaltig */
    flex-flow: column !important;
}

#vorlageListContainer718 .vorlage_columnFlexible:nth-child(1){border-top:solid 2px #000000;}
#vorlageListContainer718 .vorlage_columnFlexible.is-active .dienstleistungen-item-beschreibung{max-height:100vh;transition-delay: 0.225s;}

#vorlageListContainer718 .vorlage_columnFlexible {
    margin-top: 0px;
}

/* PLUS-Symbol als SVG mit Animation */
#vorlageListContainer718 .vorlage_columnFlexible::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 29px;
  right: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease, background-image 0.3s ease;
  transform: translateY(-50%) rotate(0deg);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><line x1='20' y1='10' x2='20' y2='30' stroke='%23000000' stroke-width='2'/><line x1='10' y1='20' x2='30' y2='20' stroke='%23000000' stroke-width='2'/></svg>");
}

/* Hover-Effekt: leichtes Pulsieren + Rotation */
#vorlageListContainer718 .vorlage_columnFlexible:hover::after {
  transform: translateY(-50%) rotate(90deg) scale(1.1);
}

/* Aktiver Zustand: Minus-Symbol + Rotation */
#vorlageListContainer718 .vorlage_columnFlexible.is-active::after {
  transform: translateY(-50%) rotate(180deg);
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><line x1='10' y1='20' x2='30' y2='20' stroke='%23000000' stroke-width='2'/></svg>");
}

/* X-Symbol bei aktivem Zustand  
#vorlageListContainer718 .vorlage_columnFlexible.is-active::after {
  transform: translateY(-50%) rotate(180deg);
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><line x1='10' y1='10' x2='30' y2='30' stroke='%23000000' stroke-width='2'/><line x1='30' y1='10' x2='10' y2='30' stroke='%23000000' stroke-width='2'/></svg>");
} */

.dienstleistungen-item{display:flex;flex-wrap:wrap;
    border-bottom:solid 2px #000000; 
    padding: 10px 0; 
    cursor: pointer;
    font-size: 2rem;
}
.dienstleistungen-item-left{ margin-right:20px }
.dienstleistungen-item-datum{
    font-size:14px;
}
.dienstleistungen-item-top{
    /* margin: 0 20px; */
    max-width: calc(100% - 180px);
}

#vorlageListContainer718 .dienstleistungen-item-titel h2 { 
    font-size: 2rem;
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

#vorlageListContainer718 .dienstleistungen-item-titel h2:hover { letter-spacing: 1.3px;}

.dienstleistungen-item-titel2 {display:none}
.dienstleistungen-item-titel2 h4{font-size: 1rem; color: #aaa;}
.dienstleistungen-item-beschreibung{width:100%;max-height:0;overflow:hidden;
    transition:max-height .3s ease; 
    /* margin: 20px 0 0 0px; */
}

/* Artikel, Aktuelles auf Startseite */

.artikel-item-content {
  display: flex;
  align-items: center;
  gap: 2rem;  
  flex-wrap: wrap;
  font-size: 2rem;  
  padding-bottom: 2em;
}

/* Bei ungeraden Eintraegen Ausrichtung des Bildes rechts */
#vorlageListContainer720 .vorlage_columnFlexible:nth-child(odd) .artikel-item-content {  
  flex-direction: row-reverse;  
}

/* Bei geraden Eintraegen Ausrichtung des Bildes link */
#vorlageListContainer720 .vorlage_columnFlexible:nth-child(even) .artikel-item-content {  
  flex-direction: row;
}

/* Bild-Wrapper mit Schleier-Effekt */
.artikel-item-bild-hover-wrapper {
  z-index: 1;
  position: relative;
  width: 750px;
  max-width: 60%;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
}

/* Bild-WrapperSchleier */
.artikel-item-bild-schleier {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4); /* weißer Schleier mit Transparenz */
  /* Schleifer nicht sichtbar */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.artikel-item-bild-hover-wrapper:hover .artikel-item-bild-schleier {
  /* Schleifer sichtbar */
  opacity: 1;
}

.artikel-item-bild-hover-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;  
}

/* Standardbild sichtbar */
.artikel-item-bild-hover-wrapper .standardbild {
  z-index: 1;
  opacity: 1;
}

/* Hoverbild überlagert, unsichtbar */
.artikel-item-bild-hover-wrapper .hoverbild {
  z-index: 2;
  /* nicht sichbar */
  opacity: 0;  
  pointer-events: none;  
}

/* Hover-Effekt mit Anzeige eines allfaellig zugeordneten Hover-Bildes */
.artikel-item-bild-hover-wrapper:hover .hoverbild {
  /* sichtbar */
  opacity: 1;  
}

/* Textblock */
.artikel-item-text {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

.artikel-item-kategorie h4 {
  margin: 0;
  font-weight: normal;
  /* font-size: 1.2rem;
  color: #555; */
}

.artikel-item-datum {
  /*font-size: 0.9rem;
  color: #888;
  margin-bottom: 1rem; */
}

.artikel-item-beschreib {
  /* font-size: 1rem;
  line-height: 1.6; */
}

@media (max-height: 1100px) {   
    .onePageLayoutLast {
        /* Grosser Abstand bei 4K wieder entfernen. Reicht, damit unterer Projekte-Slide komplett den Screen nutzt */
        padding-top: 0px;
    }
}

@media (max-width: 1920px) {
    .projekt-slide-item-list .projekt-slide-item-bild img {    
        height: 300px;
    }   
}

@media (max-width: 768px) {
  .artikel-item-content {
    flex-direction: column !important;
    text-align: center;
  }

  .artikel-item-text {
    text-align: left;
  }

  .artikel-item-bild-hover-wrapper {
    width: 100%;
    aspect-ratio: auto;
    position: relative;
  }

  /* Nur Standardbild anzeigen auf mobilen Geräten */
  .artikel-item-bild-hover-wrapper .standardbild {
    position: relative;
    /* opacity: 1 !important;
    z-index: 1; */
  }

  .artikel-item-bild-hover-wrapper .hoverbild {
    /* display: none; */
  }

}

/* Bild Mitte, Text Rechts, z.B. Buero - Adresse */

/* Wrapper für Zentrierung */
.bildmittetextrechts-item {
    display: flex;
    justify-content: center;
    padding: 2rem;
    /* Damit Bild kleiner und Platz fuer Text rechts neben dem 100% Bild */
    width: 80%;

    /* Eintrag Bild+Text zentrieren */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Inhalt: Bild links, Text rechts */
.bildmittetextrechts-item-content {
  display: flex;
  align-items: center;
  gap: 2rem;  
  /* max-width: 1200px; */
  /* Text unten ausrichten */
  align-items: stretch;
  /* Text nur unterhalb Bild: flex-wrap: wrap; */  
}

/* Bild */
.bildmittetextrechts-item-bild {
  position: relative;
  /* Damit Bild mittig ausgeordnet ist und Text daneben */
  width: 100%;
  /* max-width: 100%; */
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: center;
  /* Bild zentriert und leicht kleiner: */
  align-items: center;
}

.bildmittetextrechts-item-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bildmittetextrechts-item-bild:hover img {
  /* transform: scale(1.05); */
}

/* Textblock */
.bildmittetextrechts-item-text {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  /* color: #333; */
  /* Text unten ausrichten */
  /* height: 100%; */
  /* margin-top: auto; */
}

/* Textblock */
.bildmittetextrechts-item-beschreib {
    /* height: 100%; */
    margin-top: auto;
}

.bildmittetextrechts-item-kategorie h4 {
  margin: 0;
  font-weight: normal;
}

.bildmittetextrechts-item-datum {
  margin-bottom: 1rem;
  color: #888;
  font-size: 0.9rem;
}

.bildmittetextrechts-item-beschreib {
  font-size: 1rem;
  /* line-height: 1.6; */
}

.bildmittetextrechts-item-beschreib a {
    text-decoration: none;
    color: inherit;    
    display: inline-block;
    letter-spacing: 0px;
    transition: letter-spacing 0.3s ease;
}

.bildmittetextrechts-item-beschreib a:hover {
    /* transform: scale(0.9); */
    letter-spacing: 1.3px;
}

/* Team */

/* Container für alle Team-Items */
/* oder so: #onePageLayout715 .vorlage_listFlexible { */
#vorlageListContainer715 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drei gleich breite Spalten */
  gap: 2rem;
  /* padding: 2rem; */
  /* justify-items: center; */
}

.team-item {    
    break-inside: avoid;     /* verhindert Überlappungen */

    /* untere Linie */
    border-bottom: 1px solid #000000; /* feine Linie */  
    margin-bottom: 2em;
}

.team-item-bild {
    position: relative;
    flex: 1; /* Alle gleich breit */  
    display: block;
    overflow: hidden;
}

/* Bild in voller Breite, Höhe dynamisch */
.team-item-bild img {
    display: block;
    width: 100%;
    /* height: 300px; */
    object-fit: cover;    
}

.team-item-bild::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* kein Schleier im Normalzustand */
    transition: background-color 0.3s ease;
}

.team-item-bild:hover::after {
    background-color: rgba(255, 255, 255, 0.2); /* leichter weisser Schleier */
}

.team-item-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Abstand zwischen Beschreibung und Jahr */    
    height: 2em; /* damit Zentrierung funktioniert */
    text-align: center;
}

/* Textblock */
.team-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start; /* linksbündig */
  text-align: left;  
  width: 100%;
  padding-top: 10px;
  /* border-bottom: 1px solid #000000; */
  /* margin-bottom: 2rem; */
}

.team-item-beschreib {
    width: 100%;
    padding-bottom: 10px;    
}

.team-item-beschreib-left {
    float: left;
    text-align: left;     
}

.team-item-beschreib-right {
    float: right;
    text-align: right;        
}

.team-item-kategorie h4 {
  margin: 0;
  font-weight: normal;
  font-size: 1rem;
  color: #555;
}

.team-item-beschreib a {
    font-weight: normal;
    text-decoration: none;
    color: inherit;
    transition: letter-spacing 0.3s ease;
    display: inline-block;    
    border: 0px;
    font-weight: normal;
    padding: 0px 0px 0px 7px;
    gap: 0em;
    align-items: left;    
}

.team-item-beschreib a:hover {
  letter-spacing: 0.5px;
  background-color: #F2F2F2;
  color: #000000;
  padding: 0px 2px;
}

/* Buero - Dialog: Bilder abwechseln versetzt links und rechts angeordnet */

#vorlageListContainer722 {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Abstand zwischen Bildern */  
}

#onePageLayout722 .vorlage_listFlexible {
    flex-flow: nowrap;
}

#vorlageListContainer722 .vorlage_columnFlexible {
  display: flex;
}

.bildversetzt-image {
  width: 100%;
  max-width: 650px;
  max-height: 671px;
  
  transition: all 0.3s ease;
}

/* Abwechselnd links und rechts */
#vorlageListContainer722 .vorlage_columnFlexible:nth-child(odd) .bildversetzt-image { 
    justify-content: flex-end;


  /* align-self: flex-start; */
  margin-top: 0px;
}

#vorlageListContainer722 .vorlage_columnFlexible:nth-child(even) .bildversetzt-image { 
    justify-content: flex-start;
  /* align-self: flex-end; */
  margin-top: 203px; /* Versatz nach unten */
}

/* Jobs - Header: links und rechts ein Bilder und in der Mitte Text  */

/* Container für alle Job-Items */
/* oder so: #onePageLayout727 .vorlage_listFlexible { */
#vorlageListContainer727 {
}

.bildlinksrechtstextmitte-item-content { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Drei gleich breite Spalten */
    gap: 2rem;   
}

.bildlinksrechtstextmitte-item-bild1, .bildlinksrechtstextmitte-item-bild2 {
    /* justify-self: center; */
    box-sizing: border-box; /* damit padding nicht zur Breite addiert wird, gibt sonst Scrollbalken auf mobile */
}

.bildlinksrechtstextmitte-item-bild2 {
  display: grid;
  place-items: center;     /* zentriert vertikal und horizontal */
  height: 100%;
}

/* Bild in voller Breite, Höhe dynamisch */
.bildlinksrechtstextmitte-item-bild1 img {
    display: block;
    width: 100%;    
    object-fit: cover;    
}

/* Bild rechts zentriert ausgeben */
 .bildlinksrechtstextmitte-item-bild2 img {
    display: block;
    width: 71%;    
    object-fit: cover; 
}

.bildlinksrechtstextmitte-item-bild1::after, .bildlinksrechtstextmitte-item-bild2::after {
    /* content: ""; */
    /* position: relative; */
    /* top: 0; left: 0;
    width: 100%;
    height: 100%; */
    background-color: rgba(0, 0, 0, 0); /* kein Schleier im Normalzustand */
    transition: background-color 0.3s ease;
}

.bildlinksrechtstextmitte-item-bild1:hover::after, .bildlinksrechtstextmitte-item-bild2:hover::after {
    background-color: rgba(255, 255, 255, 0.2); /* leichter weisser Schleier */
}

.bildlinksrechtstextmitte-item-text {
  text-align: left;
  font-size: 2rem;
}

/* Jobs */
.jobs-item {    
    margin-bottom: 1em;    
    font-size: 2rem;
}

.jobs-item-link {
    margin-top: 10px;
}

.ls-l {
    width: 100%;
    height: 100%;
}

#topNav {
    display: block;
}

#topNavStart, #topNavScrolltop {
    display: block;
}

.menuentry3>li>a {
    font-size: 16px;
}

.menuentry3 {
    margin-top: 10px;
}

/* 4-Spaltiger Text */
.Column4Txt .vorlage_columnFlexible {
    width: 23%;
    float: left;
}
.Column4Txt .vorlage_titel {
    font-size: 16px !important;
}
.Column4Txt .vorlage_description {
    text-align: justify;
}
.Column4Txt .vorlage_listPictureWrapper {
    padding-top: 20px;
}

/* 5-Spaltige Vorlagenseite (Team) */
.column5Flex .vorlage_columnFlexible {
    width: 19%;
    float: left;
}

.column5Flex .teamTitle {
    height: 25px;
    padding-bottom: 20px;
    /* text-transform: uppercase; */
    font-weight: bold;
    font-size: 19px;
}

.column5Flex .teamDescription {
    height: 120px;
}

/* Einzelne Galerie(Bspw.: Architektur > Einfamilienhaus > Eintrag) => Abstand zwischen Header & Navigation */
/*
.wrapper>#navi-menuSN2:first-child {
    padding-top: 80px;
} */

/* Abstand "Zurück" bei Galerie-Eintrag */
.vorlageZurueckDetailTopBox {
    margin-top: 10px;
}
.vorlageEntryBackground {
    overflow: hidden;
}

a.vorlageTitleBackground {
    display: block;
    overflow: hidden;
    padding: 100px;
    margin: -100px;
}

/* Interner Hyperlink mit mittig horizontalem Pfeil */

.textlink_intern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding: 0.3em 0.6em;
  background-color: #F2F2F2;
  color: black;
  border: 2px solid black;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 500;
  /* transition: all 0.3s; */
  letter-spacing: 0px;
  transition: letter-spacing 0.3s ease;
}

.textlink_intern:hover {
  background-color: black;
  color: white;
  padding: 0.3em 0.8em;
  letter-spacing: 1.3px;
}

.textlink_intern .arrow {
  font-weight: bold;
  transition: transform 0.3s ease;
}

.textlink_intern:hover .arrow {
  transform: translateX(2px);  
  padding-right: 4px;
}

/* Externer Link mit mittig diagonaler Pfeil schräg nach oben rechts */

.textlink_extern {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.3em 0.6em;
  background-color: #F2F2F2;
  color: black;
  border: 2px solid black;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.textlink_extern:hover {
  background-color: black;
  color: white;
  padding: 0.3em 0.8em;
}

.textlink_extern .arrow-diagonal {
  font-weight: bold;
  transition: transform 0.3s ease;
}

.textlink_extern:hover .arrow-diagonal {
  transform: translateX(2px);  
  padding-right: 4px;
}

/* Hyperlink extern Folgeseite */
#contentPage .textlink_extern, #contentPageSmallHeaderHeight .textlink_extern {
    padding: 0rem;
    border: 0px;
    font-weight: normal;
}

#contentPage .textlink_extern:hover, #contentPageSmallHeaderHeight .textlink_extern:hover {
  background-color: #F2F2F2;
  color: black;
  padding: 0rem;
}

@media all and (max-width: 1350px) {
    /* Footer 2-zeilig */
    .footerDesktop, .footerDesktopPage {
        height: 80px;        
    }

    .footerDesktop #footerDisclaimerArea, .footerDesktopPage #footerDisclaimerArea {
        float: left;
        margin-left: -0.3em; /* da 1. Element ein Hyperlink mit entsprechendem Rand */
    }

    /* Jobs */
    .jobs-item {         
        font-size: 1.75rem;
    }
}

@media all and (min-width: 1001px) {
    #navi-menu {
        /* display: block !important; */
    }
    
    #topNav {
        /* display: block; */
    }
    #topNavStart, #topNavPage, #topNavPageSmall, #topNavScrolltop, #topNavPageLogoScrollMenuFix {
        /* display: block; */
    }
    
    #topNavStart, #topNavPage, #topNavPageSmall, #topNavPageLogoScrollMenuFix {
        font-family: "PPMori Book";
        height: 100px;
        position: absolute;
        width: 100%;
        z-index: 99999;
        left: 0;
    }
    #topNavStart ul, #topNavPage ul, #topNavPageSmall ul, #topNavPageLogoScrollMenuFix ul {
        float: left;
        margin-top: 15px;
    }
    #topNavStart li, #topNavPage li, #topNavPageSmall li, #topNavPageLogoScrollMenuFix li {
        display: inline-block;
        list-style: none;
        padding: 0 0px;
        box-sizing: border-box;
    }
    #topNavStart li:hover, #topNavPage li:hover, #topNavPageSmall li:hover, #topNavPageLogoScrollMenuFix li:hover {
        color: #000000;
    }
    #topNavStart a, #topNavPage a, #topNavPageSmall a, #topNavPageLogoScrollMenuFix a {
        /* line-height: 100px; */
        font-size: 16px;
        color: #000;
        text-decoration: none;
        height: 100px;
    }
    #topNavStart a:hover, #topNavPage a:hover, #topNavPageSmall a:hover, #topNavPageLogoScrollMenuFix a:hover {
        /* font-weight: bold; */
    }
    /* Ausrichtung Logo */
    #topNavStart #logo, #topNavPage #logo, #topNavPageSmall #logo, #topNavPageLogoScrollMenuFix #logo {
        float: right;
        margin-top: 24px;
        margin-right: 14px;
        width: 150px;
        position: absolute;
        /* right: 0px; */
        /* Logo links */
        left: 0px;
        z-index: 10;
    }

    #topNav {
        font-family: "PPMori Book";
        height: 100px;
        position: relative;
        width: 100%;
        margin-bottom: 20px;
    }
    #topNav ul {
        float: left;
        margin-top: 15px;
    }
    #topNav li {
        display: inline-block;
        list-style: none;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #topNav li:hover {
        color: #000000;
    }
    #topNav a {
        line-height: 100px;
        font-size: 16px;
        color: #000;
        text-decoration: none;
        height: 100px;
    }
    #topNav a:hover {
        font-weight: bold;
    }
    /* Ausrichtung Logo */
    #topNav #logo {
        float: right;
        margin-top: 24px;
        margin-right: 14px;
        width: 150px;
        position: absolute;
        right: 0px;
        z-index: 10;
    }

    #navi-menu {
        position: relative;
    }    
}

@media all and (max-width: 1090px) {
    .logoFacebook{
        margin-left: 0px;
    }
    .logoInstagram{
        margin-left: 0px;
    }
    .eTexte {
        margin: 10px 0 0 0;
    }
    .eTitel {
        margin-left: -3px !important;
    }
}

@media all and (max-width: 1000px) {
    .Column4Txt .vorlage_columnFlexible {
        width: 48%;
    }

    /* 5-Spaltige Vorlagenseite (Team) */
    .column5Flex .vorlage_columnFlexible {    
        width: 48%;
    }

    #navi-menu {
        float: left;
    }
    iframe {
        margin-top: 20px;
    }
    hr {
        margin-left: 28px;
        margin-right: 300px;
    }
    
    .menuEbene2und3Box {
        height: auto;
    }
    .vorlageBildleisteUntenImg {
        margin-bottom: 5px;
    }
}

@media all and (max-height: 600px) {
    #ortText {
        top: 75px;
        left: 20px;
    }
    .ls-bottom-slidebuttons {
        /* bottom: 30px; */
    }    
}

@media all and (max-height: 900px) {
    #leftBuero {
        margin-top: 0;
        float: left;
    }
    #rightBuero {
        margin-top: 20px;
        float: left !important;
    }
    .ls-bottom-slidebuttons {
        /* bottom: 70px; */
    }
}

@media all and (max-height: 960px) {
    #leftBuero {
        margin-top: 30%;
    }
    #rightBuero {
        margin-top: 45%;
    }
}

@media all and (max-height: 871px) {
    #leftBuero {
        margin-top: 0;
    }
    #rightBuero {
        margin-top: 0;
    }
}

@media all and (max-width: 1160px) {
    /* Trennlinie ausblenden */
    .vorlage_entrySeparator {
        display: none;
    }
    /* Standard Zeilenumbruch deaktivieren */
    .vorlage_columnende {
        display: none ! important;
    }
    /* Vorlagenseite mit 2 Spalten: 2 Spalte in einer Zeile */
    .vorlage_column1Cols2 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column2Cols2 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    /* Vorlagenseite mit 2 Spalten: Zeilenumbruch nach 2. Spalte aktivieren */
    .vorlage_columnendeMulti2Cols2 {
        display: block ! important;
    }
    /* Vorlagenseite mit 3 Spalten: nur noch 2 Spalten in einer Zeile */
    .vorlage_column1Cols3 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column2Cols3 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column3Cols3 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    /* Vorlagenseite mit 3 Spalten: Zeilenumbruch nach 3. Spalte deaktivieren */
    .vorlage_columnendeMulti3Cols3 {
        display: none ! important;
    }
    /* Vorlagenseite mit 3 Spalten: Zeilenumbruch nach 2. Spalte aktivieren */
    .vorlage_columnendeMulti2Cols3 {
        display: block ! important;
    }
    /* Vorlagenseite mit 4 Spalten: nur noch 3 Spalten in einer Zeile */
    .vorlage_column1Cols4 {
        width: 30% ! important;
        margin-right: 9px ! important;
    }
    .vorlage_column2Cols4 {
        width: 30% ! important;
        margin-right: 9px ! important;
    }
    .vorlage_column3Cols4 {
        width: 30% ! important;
        margin-right: 9px ! important;
    }
    .vorlage_column4Cols4 {
        width: 30% ! important;
        margin-right: 9px ! important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 3. Spalte aktivieren */
    .vorlage_columnendeMulti3Cols4 {
        display: block ! important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 2. Spalte deaktivieren */
    .vorlage_columnendeMulti2Cols4 {
        display: none ! important;
    }
    .vorlage_list {
        /* wg. erhoehter Fusszeile, damit man die letzte Vorlagen-Zeile komplett sieht */
        padding-bottom: 150px;
    }
}

@media all and (max-width: 1050px) {
    #rightBuero {
        margin-top: 25px;
        float: left;
    }
}

/* Anzeige mit Mobile Menu */

@media all and (max-width: 1110px) {    
    .wrapperBig {
        /* Rand fuer mobile verkleinern */
        max-width: calc(100% - 50px);
    }

    .wrapper {
        /* Rand fuer mobile verkleinern */
        max-width: calc(100% - 50px);
    }

    .wrapperSmall {
        /* Rand fuer mobile verkleinern */
        max-width: calc(100% - 50px);
    }

    /* * { max-width: 100%; } */
    #cms_inhaltsbereich {
        margin-top: 10px;
    }

    #topNavStart>a>img {}
    .scrlTp {
        bottom: 96px;
    }
    
    #contentOnePager {
        padding-top: 104px;
    }

    .onePageLayout {
        /* Weniger Abstaende zwischen Slides */
        padding: 0 0 190px;
    }

    /* Logo einbetten in Inhalt, damit es mitscrollt */
    #whiteWrap, #whiteWrapLogoFixMenuScroll {
        position: absolute;
    }

    /* Seite Buero: Inhalt  buendig unter mittigem Logo */
    #cmsPage712 #contentOnePager {
        padding-top: 124px; /* Abstand entspricht Hover-Hoehe Logo */
    }

    /* Oberer Container Adresse ganze Breite */
    #vorlageListContainer713 {
        justify-content: center;            
    }

    #vorlageListContainer713 .vorlage_columnFlexible {
        margin: 0 auto;
    }

    /* Bild Mitte, Text Rechts, z.B. Buero - Adresse */
    .bildmittetextrechts-item-content {                
        max-width: 100%;

        /* Damit Bild und Text untereinander */
        flex-direction: column;
    }

    .bildmittetextrechts-item { 
        /* mittig ausrichten */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        /* damit auf mobile kein Scrollbalken */
        margin: 0;
        padding: 0;        
    }

    /* Bild auf volle Displaybreite, also mehr als Parentcontainer */
    .bildmittetextrechts-item-bild {                        
        width: 100vw;        
        padding: 0;
        margin: 0;
        box-sizing: border-box; /* damit padding nicht zur Breite addiert wird, gibt sonst Scrollbalken auf mobile */
        position: relative;
        left: 50%;
        transform: translateX(-50%);      
    }

    .bildmittetextrechts-item-beschreib {
        /* Text unterhalb mittig */
        text-align: center;
    }

    /* Bild ungerade/links an den Rand schieben */
    #onePageLayout722 .vorlage_listFlexible {        
        display: flex;
        flex-direction: row;
        flex-flow: wrap;
        margin: 0;
        padding: 0;
        /* gap: 2rem; */        
    }

    /* Bild ungerade/links an den Rand schieben */
    #vorlageListContainer722 .vorlage_columnFlexible:nth-child(odd) .bildversetzt-image {
        width: 90%;
        margin-left: -25px;        
    }

    /* Bild ungerade/links an den Rand schieben */
    #vorlageListContainer722 .vorlage_columnFlexible:nth-child(even) .bildversetzt-image {    
        max-width: 100vw;
        width: 90%;
        margin-left: 60px;
        /* Berechnete Breite weicht ab, daher nicht verwendet, andere Variante mit calc funktioniert auch nicht calc(100vw - 90%); */
        /* margin-left: 10%; */        
    }    

    /* Scrolltop Button Wrapper
        Anm.: bei Seite Projekte */
    .scroll-top-wrapper {            
        margin-top: 2em;
        margin-bottom: 5em;
    }

    /* Bild auf volle Breite */
    .artikel-item-bild-hover-wrapper {
        max-width: 100%;
    }

    /* bis 26.11.2016: 56px; */
    .menuEbene2und3Box {
        padding-top: 0px;
        padding-bottom: 15px;
    }
    
    hr {
        margin-left: 15px;
        margin-right: 20%;
    }
    .ls-bottom-slidebuttons {
        bottom: 110px;
    }
    #ortText {
        left: 30px;
    }
    .menuentry3 {
        margin-top: 30px;
    }
    
    #topNav {
        height: 73px;
        /* bis 26.11.2016: 50px; */
    }
    #topNavStart {
        height: 73px;
        /* bis 26.11.2016: 50px; */
    }
    #whiteWrap {
        height: 73px;
    }
    /* gleich wie Hoehe topNav und topNavStart */
    #navi-menu {
        display: none;
        opacity: 1;
        position: absolute;
        width: 100%;
        top: 50px;
    }
    .subMenuBtn {
        display: block;
    }
    .zeilen {
        width: 250px;
    }
    #topNav {
        width: 100%;
        font-family: 'PPMori Book';
        background: rgba( 255, 255, 255, 0);
    }
    #topNav #logo {
        display: block;
        margin: 17px 0 0 22px;
        height: auto;
        width: 110px;
        margin-right: 100px;
        float: right;
        position: absolute;
        right: 0px;
        z-index: 10;
    }
    #topNavStart>a {
        display: none;
    }
    #topNav ul {
        position: relative;
        width: 100%;
        margin-bottom: 50px;
    }
    .imgCarousel41 {
        z-index: 1 !important;
    }
    #topNav li {
        z-index: 2;
        position: relative;
        width: 100% !important;
        display: block;
        list-style: none;
        height: 34px;
        line-height: 34px;
        background: rgba(255, 255, 255, 0.95);
        width: 100%;
        border-bottom: 1px solid grey;
    }
    #topNav li:first-child {
        border-top: 1px solid grey;
    }
    #topNav li:hover {
        background: #e7e7e7;
        font-weight: bold;
        cursor: pointer;
    }
    #topNav a {
        color: #000;
        display: block;
        font-size: 16px;
        height: 34px;
        line-height: 34px;
        text-decoration: none;
        margin-left: 8px;
    }
    #topNavStart {
        width: 100%;
        font-family: 'PPMori Book';
        background: rgba( 255, 255, 255, 0);
    }
    #topNavStart ul, #topNavPage ul, #topNavPageSmall ul, #topNavPageLogoScrollMenuFix ul {
        position: relative;
        width: 100%;
        margin-bottom: 50px;
    }
    #topNavStart li, #topNavPage li, #topNavPageSmall li, #topNavPageLogoScrollMenuFix li {
        /*z-index: 2;*/
        position: relative;
        width: 100% !important;
        display: block;
        list-style: none;
        height: 34px;
        line-height: 34px;
        background: rgba(255, 255, 255, 0.95);
        width: 100%;
        border-bottom: 1px solid grey;
    }    
    #topNavStart li:first-child, #topNavPage li:first-child, #topNavPageSmall li:first-child, #topNavPageLogoScrollMenuFix li:first-child {
        border-top: 1px solid grey;
    }
    #topNavStart li:hover, #topNavPage li:hover, #topNavPageSmall li:hover, #topNavPageLogoScrollMenuFix li:hover {
        background: #e7e7e7;
        font-weight: bold;
        cursor: pointer;
    }
    #topNavStart a, #topNavPage a, #topNavPageSmall a, #topNavPageLogoScrollMenuFix a {
        line-height: 25px;
        font-size: 16px;
        color: #000;
        text-decoration: none;
        display: block;
    }
    #topNavStart a, #topNavPage a, #topNavPageSmall a, #topNavPageLogoScrollMenuFix a {
        display: block;
    }
    #topNavStart #logo, #topNavPage #logo, #topNavPageSmall #logo, #topNavPageLogoScrollMenuFix #logo {
        display: block;
        margin: 17px 0 0 22px;
        height: auto;
        width: 110px;
        margin-right: 100px;
        float: right;
        position: absolute;
        right: 0px;
        z-index: 10;
    }
    /* #topNavStart > a > img { display: block; margin: 17px 0 0 22px; height: auto; width: 110px; margin-right: 100px; float: right; position: absolute; right: 0px; z-index: 1; } */
    #navi-menu>ul>li>ul {
        margin: 0;
        padding: 0;
        display: none;
        position: absolute;
        z-index: 150;
    }
    #navi-menu>ul>li>ul>li {
        margin: 0;
        padding: 0;
        display: block;
        position: absolute;
        z-index: 150;
    }    
    
    /* Mobile Ansicht */

    #menuBtn {
        /* kein Hamburger Icon fuer mobile Menu, da in Fusszeile */
        display: none;
        /* Wenn einblenden, dann block */
        /* display: block; */
        position: absolute;
        z-index: 999;
        top: 3px;
        right: 0;
    }      

    .logo-container {        
        float: none;
        margin-right: 0px;
        /* mittig ausrichten */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .logo-container .logo-image {
        /* Hover-Bild mit scharzem Hintergrund */
        /* content: url('https://www.ralphbeckarchitekten.li/images/logoHover.png'); */
    }    

    /* Desktop-Footer ausblenden */
    footer .footerDesktop, footer .footerDesktopPage {
        display: none !important;
    }

    footer .footerDesktop #footerDisclaimerArea, footer .footerDesktopPage #footerDisclaimerArea {
        display: none;
    }

    /* Mobile-Footer einblenden */
    footer .footerMobile {
        display: block;
        margin-top: 50px;
    }

    /* Mobile Menu unterer Rand einblenden */
    #mobileMenuDisplay {
        position: fixed;         
        width: 100%;
        background-color: #F2F2F2; opacity: 0.97; z-index: 2001;               
        display: flex;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;             
        bottom: 0px;        
        height: 45px;
        /* Falls sich bei Android Hoehe aufgrund ausgeblendeter URL-Leiste beim Scrollen verschiebt, dann hoeher machen. Ist geloest. */
        /* bottom: -50px;        
        height: 150px;         */
    }    

    #navi-menuSN2 {                
        width: 100%;        
    }

    #navi-menuSN2 ul {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #navi-menuSN2 .menutitle-firstSN2 a {
        /* text-align: left; */
    }

    #navi-menuSN2 .menutitle-lastSN2 a {
        /* text-align: right; */
    }

    #navi-menuSN2 .menutitle-lastSN2 {
        text-align: right;
    }

    #navi-menuSN2 li {
        /* flex: 1; */
        padding: 0 25px;
    }

    #navi-menuSN2 .menulink1SN2 {
        display: inline-block;        
        text-decoration: none;
        font-size: 32px;
        font-weight: normal;
        color: black; 
        /* padding: 16px; */
        letter-spacing: 0px;
        transition: letter-spacing 0.3s ease;
    }

    #navi-menuSN2 .menulink1SN2:hover {
        letter-spacing: 1.3px;
    }

    #slidebox1 {
        position: relative;
        width: 100%;
        min-height: 100% !important;
    }
    #slidebox3 {
        position: relative;
        width: 100%;
        min-height: 100% !important;
    }
    
    #unterStrich {
        width: 300px;
        height: 2px;
        border-bottom: 1px solid #FFF;
    }
    #titelText {
        font-size: 49px;
        letter-spacing: 4px;
        color: #FFF;
        width: 100%;
        /* Automatische Silbentrennung */
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    #infoText {
        font-size: 16px;
        padding-top: 7px;
        color: #FFF;
        max-width: 500px;
    }

    #footerDisclaimerArea {
        position: absolute;
        bottom: 100px;        
        left: 50%;
        transform: translateX(-50%);
    }

    #footerLogo {        
        padding-top: 20px;
    }

    .logo-footer-image {
        width: 250px;
    }

    #footerAddress a {
        text-decoration: none;
        color: #BCBCBC;
    }

    #footerAddress img {width: 90px;}
    #footerContact img {width: 90px;}
    #footerSocial img {width: 90px;}

    #footerAddress {        
        padding-top: 30px;
    }    

    #footerContact {                
        padding-top: 30px;
        /* Icons mit gleichem Abstand ausrichten */        
        display: flex;
        justify-content: space-evenly;
    }

    #footerSocial {
        padding-top: 30px;
    }

    /* Scrolltop Button
        Anm.: bei Seite Projekte */
    .scrollTop {    
        display: none;
    }

    /* Oberes Projekte - Kategorienmenue */
    .projekt-category-navi {
        display: none;
    }

    /* Projekte - Liste */
    #vorlageListContainer673 .vorlage_columnFlexible, #vorlageListContainer619 .vorlage_columnFlexible {    
        /* 2-spaltig */
        column-count: 2;
    }

    #cmsPage619 #contentPage {            
        padding-top: 150px;;
    }

    /* Projekte - Detailansicht */
    
    #cmsPage619 #topNavPageSmall {
        /* Header ausblenden */
        display: none;
    }

    #cmsPage619 #contentPageSmallHeaderHeight {
        padding-top: 0px;
    }

    .projekt-detail-item-bild-wrapper {
        width: 100%;
        height: auto;
        margin-left: 0;
        justify-content: center;        
    }

    .projekt-detail-item-bild img {
        width: 100%;
        height: auto;
    }

    .projekt-detail-item-data {
        flex-direction: column;
        gap: 10px;
    }

    .projekt-detail-item-left,
    .projekt-detail-item-middle,
    .projekt-detail-item-right {
        flex: none;
        width: 100%;
    }

    .projekt-detail-item-titel, .projekt-detail-flaeche-jahr {
        display: none;
    }   

    .projekt-detail-item-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Inhalte oben ausrichten */
        gap: 20px;        
    }

    .projekt-detail-item-titel-mobile {
        flex: 1;
    }

    .projekt-detail-item-jahr-flaeche-mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }

    /* Buero und Projekt Detailseite Slide Projektuebersicht */
    #cmsPage712 .projekt-slide-item-list, #cmsPage619 .projekt-slide-item-list {
        /* Bei mobile Ansicht Buero und Projektdetail Projekt Slide ausblenden
            Anm.: bei Projektliste gibt es den Projekt Slide nicht */
        display: none;
    }

    /* Buero Slide mit Intro-Text zu Projekt Slide */
    #cmsPage712 #onePageLayout725 {
        display: none;
    }

    /* Projekt Detailseite - Intro Text zu Projekt Slide */
    #cmsPage619 .project-slide-intro {        
        display: none;
    }

    #cmsPage619 .onePageLayout {
        /* Abstand zu oberem Slide kuerzen */
        padding: 0 0 50px;
    }

    #cmsPage619 .onePageLayoutLast {
        /* Abstand zu oberem Slide entfernen */
        padding-top: 0px;
        padding-bottom: 50px;
    }

    /* Projektgalerie */

    .projekt-detail-gallery-item,
    .projekt-detail-gallery-item.reverse {
        flex-direction: column;
        align-items: stretch;
    }
    
    .projekt-detail-gallery-bild {
        width: 100%;
    }

    .projekt-detail-gallery-bild img {
        width: 100%;
        height: auto;
    }

    .projekt-detail-gallery-text {
        margin-bottom: 10px;
        font-size: 1.125rem;
    }

    /* Kleinere Schriften fuer mobile Ansicht */

    .fontBig {
        font-size: 1.7rem;
    }

    .artikel-item-content {        
        font-size: 1.5rem;          
    }

    #cms_seiteninhalt {
        font-size: 1.5rem;
    }

    #navi-menu .menulink1 {
        font-size: 2rem;    
    }
    
    .footerMobile {
        font-size: 1.7rem;
    }

    .footerMobile #footerDisclaimerArea {        
        font-size: 1.7rem;
    }

    .textlink_intern {       
        padding: 0.15em 0.3em;        
    }

    .textlink_intern:hover {
        padding: 0.15em 0.4em;
    }
    
    .textlink_extern {        
        padding: 0.15em 0.3em;
    }

    .textlink_extern:hover {    
        padding: 0.15em 0.4em;
    }

    .scrollTop {       
        padding: 0.15em 0.3em;        
    }

    .scrollTop:hover {
        padding: 0.15em 0.4em;
    }

    .dienstleistungen-item{    
        font-size: 1.5rem;
    }

    #vorlageListContainer718 .dienstleistungen-item-titel h2 {
        font-size: 1.5rem
    }

    .artikel-item-content {        
        font-size: 1.5rem;      
    }

    #contentPage h2, #contentPageSmallHeaderHeight h2 {
        font-size: 1.5rem;        
    }

    /* Erster h2-Titel der Seite zentrieren */
    #contentPage h2:first-of-type, #contentPageSmallHeaderHeight h2:first-of-type {
        text-align: center;
        }

    #contentPage h3, #contentPageSmallHeaderHeight h3 {
        font-size: 1.5rem;                
    }

    .projekt-detail-item-data {
        font-size: 1.5rem;
    }

    .projekt-detail-item-beschreib {
        font-size: 1.125rem;
    }

    .bildlinksrechtstextmitte-item-text {        
        font-size: 1.5rem; 
    }

    /* Jobs */
    .jobs-item {
        font-size: 1.5rem;
    }
}

@media all and (max-width: 930px) {
    /* Projekte Slider bei Startseite und Buero */
    .projekt-slide-item-list {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
        padding-bottom: 20px;
    }

    /* Jobs Header auf Bueroseite */
    .bildlinksrechtstextmitte-item-content { 
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    }

    /* Team */
    #vorlageListContainer715 {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    }

    /* Jobs */
    .jobs-item {         
        font-size: 1.5rem;
    }

    .vorlage_list {
        /* wg. erhoehter Fusszeile, damit man die letzte Vorlagen-Zeile komplett sieht */
        padding-bottom: 150px;
    }
    .vorlage_columnende {
        display: none ! important;
    }
    .vorlage_column1Cols2 {
        width: 100% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column2Cols2 {
        width: 100% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column1Cols3 {
        width: 100% !important;
    }
    .vorlage_column2Cols3 {
        width: 100% !important;
    }
    .vorlage_column3Cols3 {
        width: 100% !important;
    }
    /* Vorlagenseite mit 4 Spalten: nur noch 2 Spalten in einer Zeile */
    .vorlage_column1Cols4 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column2Cols4 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column3Cols4 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column4Cols4 {
        width: 47% ! important;
        margin-right: 5px ! important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 3. Spalte deaktivieren */
    .vorlage_columnendeMulti3Cols4 {
        display: none ! important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 2. Spalte aktivieren */
    .vorlage_columnendeMulti2Cols4 {
        display: block ! important;
    }
}

@media all and (max-width: 630px) {
    .wrapperBig {
        /* Setzen, dass Eintraege keinen Rand haben */
        max-width: 100%;
    }

    /* Projekte Slider bei Startseite und Buero */
    .projekt-slide-item-list {
        grid-template-columns: 1fr; /* 1 Spalte */
    }    

    .projekt-slide-item-data {
        padding-left: 1em;
        padding-right: 1em;
    }

    /* Projekte */
    #vorlageListContainer673 .vorlage_columnFlexible, #vorlageListContainer619 .vorlage_columnFlexible {    
        /* 1-spaltig */
        column-count: 1;
    }    

    #vorlageListContainer673 .projekt-item-data, #vorlageListContainer619 .projekt-item-data {
        padding-left: 1em;
        padding-right: 1em;
    }

    /* Projekte - Detailansicht */
    .projekt-detail-item-data {        
        box-sizing: border-box;
        padding-left: 1em;
        padding-right: 1em;
    }

    /* Jobs Header auf Bueroseite */
    .bildlinksrechtstextmitte-item-content { 
        grid-template-columns: 1fr; /* 1 Spalte */
    }

    /* Team */
    #vorlageListContainer715 {
        grid-template-columns: 1fr; /* 1 Spalte */
    }  

    .vorlage_list {
        /* wg. erhoehter Fusszeile, damit man die letzte Vorlagen-Zeile komplett sieht */
        padding-bottom: 300px;
    }
    .vorlage_columnende {
        display: none ! important;
    }
    .vorlage_column1Cols2 {
        width: 100% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column2Cols2 {
        width: 100% ! important;
        margin-right: 5px ! important;
    }
    .vorlage_column1Cols3 {
        width: 100% !important;
    }
    .vorlage_column2Cols3 {
        width: 100% !important;
    }
    .vorlage_column3Cols3 {
        width: 100% !important;
    }
    /* Vorlagenseite mit 4 Spalten: nur noch 1 Spalten in einer Zeile */
    .vorlage_column1Cols4 {
        width: 100% !important;
    }
    .vorlage_column2Cols4 {
        width: 100% !important;
    }
    .vorlage_column3Cols4 {
        width: 100% !important;
    }
    .vorlage_column4Cols4 {
        width: 100% !important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 3. Spalte deaktivieren */
    .vorlage_columnendeMulti3Cols4 {
        display: none ! important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 2. Spalte aktivieren */
    .vorlage_columnendeMulti2Cols4 {
        display: block ! important;
    }
    /* Vorlagenseite mit 4 Spalten: Zeilenumbruch nach 1. Spalte aktivieren */
    .vorlage_columnendeMulti1Cols4 {
        display: block ! important;
    }
}

/* Anzeige Smartphone Querformat */
@media (max-width: 1024px) and (orientation: landscape) {
  /* Layout für Tablets und kleine Laptops im Querformat */
    
    .footerMobile #footerAddress {
        padding-top: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px; /* Abstand zwischen Icon und Text */

        /* margin: auto;
        width: 90%; */
        
    }

    #footerAddress .address-icon img {        
    }

    .footerMobile #footerAddress .address-text {        
        text-align: left;
    }

    .footerMobile #footerContact {
        paddng-top: 0px;
    }

    .footerMobile #footerSocial {
        padding-top: 0px;
    }

    .footerMobile #footerDisclaimerArea {
        display: none;
    }
}

/* Anzeige Smartphone */

@media all and (max-width: 600px) {
    .ls-wrapper {
        width: 100%;
    }
    #ortText {
        left: 0px !important;
        top: 20% !important;
        width: auto !important;
        padding: 0 10px !important;
    }
    #vorlage_image_right {
        margin-left: 0px !important;
    }
    .eText {
        margin-left: 0px !important;
    }
    #topNav {
        padding-left: 0px;
    }
    #menuBtn {
        right: 20px;
    }
    .scrlTp {
        bottom: 126px;
    }
    .ls-bottom-slidebuttons {}
    footer {
        height: 90px;
    }
    #footerTextArea {
        /*
        width: 90%;
        text-align: left; */
    }
    #footerDisclaimerArea {
        /* margin-left: -7px; */
    }
    /* Seite Buero */
    #rightBuero {
        width: auto;
    }
    #leftBuero {
        width: auto;
    }
    /* Aktuelles */
    .eImg {
        /* width: 80%; */
        width: auto;
        height: auto;
        padding-bottom: 9px;
    }
    .eImg img {
        /* Damit Bild nicht in Detail Schalter */
        width: 80%;
        float: left !important;
    }
    .eBtn {
        float: left;
    }
    .eTexte {
        width: auto;
        display: block;
        margin-left: 0px;
        margin-bottom: 15px;
    }
    .topLineA {
        width: auto;
    }
    /* Projekte */
    .projekteLeft {
        width: 100%;
        margin-bottom: 9px;
    }
    .projekteRight {
        width: 100%;
        float: left;
        margin: 0px;
    }
    .vorlageDetailDescriptionBox {
        width: 100%;
    }

    /* Mobile Footer */
    .footerMobile {           
        font-size: 20px;
    }

    #footerLogo {padding-top: 20px;}
    #footerContact {padding-top: 10px;}
    #footerAddress {padding-top: 0px;}
    #footerSocial {padding-top: 0px;}

    #footerDisclaimerArea {
        padding-top: 10px;
        position: relative;
        bottom: 0px;
        padding-right: 0px;        
    }

    #footerDisclaimerArea a {
        font-size: 1.25rem;        
    }
}

@media all and ( max-height: 494px ) {
	#mobileMenuDisplay #menuFooter { position: static; }    
}

@media all and (max-width: 350px) {
    .jobs-item-beschreib {
        font-size: 1.2rem; 
    }

    .jobs-item-link {
        font-size: 1.2rem; 
    }

    .bildlinksrechtstextmitte-item-text {        
        font-size: 1.2rem;         
    }
}

@media all and (max-width: 295px) {
    .ls-bottom-slidebuttons {
        margin-left: -24px;
    }    
}