/*
 Theme Name:   OceanWP Child
 Description:  Child Theme des high-performance WP-Theme OceanWP
 Author:       Philipp Limbeck
 Author URI:   https://insyde.at/
 Template:     oceanwp
 Version:      1.0
 Text Domain:  oceanwp-child
*/

/* overwrite general settings of oceanwp for focus of links (black border) */
#main a:focus,
#site-header a:focus,
#footer a:focus {
    outline: 0px !important;
}

:root {
    --farbe-schwarz: #161615;
    --farbe-weiss: #ffffff;
    --farbe-dunkelblau: #232A56;
    --farbe-kastanienbraun: #753C37;
    --farbe-gruen: #8DA185;
    --farbe-hellgruen: #C6D0C2;
    --farbe-beige: #E8DED3;
}



#site-header li#menu-item-wpml-ls-2-de {
    margin-right: -42px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.otgs-development-site-front-end {
    display: none !important;
}

li#menu-item-wpml-ls-2-de:after {
    content: ' I ';
    font-family: Avenir;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    color: #232a56;
    line-height: 1.2;
    padding: 12px 0;
}


#main p.startseite-ehem-h1 {
    font-family: "Lato";
    font-weight: 700;
    font-size: 120px;
    line-height: 1.2;
}










#main .font-family-opensans p {
    font-family: 'Open Sans';
}

#main strong {
    font-weight: 700;
}


/* Allgemeines B E G I N N */
#main .no-margin-bottom {
    margin-bottom: 0px;
}

#main div.vc_btn3-container.button-dunkelblau.buttonmitpfeil button,
#main div.vc_btn3-container.button-dunkelblau.buttonmitpfeil a,
div.vc_btn3-container.button-dunkelblau.buttonmitdownloadsymbol button,
div.vc_btn3-container.button-dunkelblau.buttonmitdownloadsymbol a{
    background-color: var(--farbe-dunkelblau);
    color: var(--farbe-weiss);
    border-radius: 0px;
    border: 0px;
    font-size: 24px;
    /*font-weight: 800;*/
    font-weight: 700;
    padding-left: 40px;
    padding-right: 90px;
    background-image: url('/wp-content/uploads/2025/08/Pfeil-rechts-Button.svg');
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 36px auto;
    text-decoration: none;
}

div#expose-btn button:hover {
    background-color: var(--farbe-dunkelblau);
    color: var(--farbe-weiss);
    border-radius: 0px;
}

#main div.vc_btn3-container.button-dunkelblau.buttonmitpfeil.button-border-white button,
#main div.vc_btn3-container.button-dunkelblau.buttonmitpfeil.button-border-white a {
    border: 1px solid var(--farbe-weiss);
}

#main div.vc_btn3-container.button-dunkelblau.buttonmitdownloadsymbol button,
#main div.vc_btn3-container.button-dunkelblau.buttonmitdownloadsymbol a{
    background-image: url('/wp-content/uploads/2025/09/Download-Pfeil.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    /* Pfeil 20px vom Rand */
    background-size: 36px auto;
	text-decoration: none;
}

#main div.vc_btn3-container.button-dunkelblau a:focus,
#main div.vc_btn3-container.button-dunkelblau a:active,
#main div.vc_btn3-container.button-dunkelblau button:focus,
#main div.vc_btn3-container.button-dunkelblau button:active{
	background-color: var(--farbe-dunkelblau);
	color: var(--farbe-weiss);
}

div#mietflaechen-sektion-zeile div.vc_btn3-container.button-dunkelblau.buttonmitdownloadsymbol a,
div#mietflaechen-sektion-zeile div.vc_btn3-container.button-dunkelblau.buttonmitdownloadsymbol a:hover{
	border: 1px solid var(--farbe-weiss); /* Button Grundrisse bei Mieteinheiten Tabelle auf der Seite Mietflächen */
	text-decoration: none;
	background-color: var(--farbe-dunkelblau);
	color: var(--farbe-weiss);
}
div#zeile-sektion-bespielungsvarianten .button-dunkelblau a:hover{
	background-color: var(--farbe-dunkelblau);
	color: var(--farbe-weiss);
}

#main div.h1-gruen h1 {
    color: var(--farbe-gruen);
}

/* Allgemeines E N D E */
#main div#content-wrap {
    padding-top: 0px;
}

body.page-id-482 #main div#content-wrap {
    padding-bottom: 0px;
    /* Seite Kontakt */
}

#main div.display-flex {
    display: flex;
}

div#textbereich-ihre-bueroflaeche {
    /*width: 430px;*/
    width: 465px;
    background-color: var(--farbe-dunkelblau);
    padding: 50px;
    font-size: 48px;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    margin-top: 31%;
    left: 25%;
}

div#hintergrund-gebaeude-gruen {
    margin-top: -27.5%;
    margin-left: 5%;
    z-index: -1;
}


/* LISTE der Key Facts auf Startseite B E G I N N */
div#keyfacts-ueberschrift p {
    font-size: 64px;
    font-weight: bold;
    color: var(--farbe-dunkelblau);
    margin-left: 60px;
    margin-top: 30px;
}

/* Box */
#keyfacts-spalte {
    background: var(--farbe-hellgruen);
    border-top: 4px solid var(--farbe-dunkelblau);
    border-right: 4px solid var(--farbe-dunkelblau);
    border-left: 4px solid var(--farbe-dunkelblau);
    padding: 20px 18px;
    margin-top: -360px;
    margin-bottom: 13px;
}

#keyfacts-spalte div.button-dunkelblau {
    margin-right: 120px;
}

/* UL reset – native Bullets sicher weg */
#keyfacts-liste ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Zeile */
#keyfacts-liste li {
    position: relative;
    color: var(--farbe-dunkelblau);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    padding: 16px 0 16px 56px;
    font-family: 'Lato';
}

/* kleiner runder Bullet – exakt mit Linien-Einzug ausrichten */
#keyfacts-liste li::before {
    content: "";
    position: absolute;
    left: 28px;
	/*
    top: 50%;
    transform: translateY(-50%);
	*/
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--farbe-dunkelblau);
    margin-left: 40px;
	top: 35px;
}

#keyfacts-liste li:last-child::after {
    display: none;
}

#keyfacts-liste p.keyfacts-liste-fakten-eingerueckt {
    margin-left: 40px;
}

/* LISTE der Key Facts auf Startseite E N D E*/

div#sektion-flaechenkonfiguration div.bild-gebaeude-gruen {
    position: absolute;
    right: 3%;
    bottom: -30%;
}

div#sektion-flaechenkonfiguration div.bild-gebaeude-gruen img {
    max-width: 600px;
    height: auto;
}

div#sektion-flaechenkonfiguration h3 {
    width: 880px;
}

div#sektion-einladende-lobby div.text-infobox-gruen p {
    font-size: 48px;
    font-weight: 700;
    right: 63px;
    top: 63px;
    max-width: 54%;
    color: var(--farbe-dunkelblau);
    /*font-family: "Avenir";*/
    font-family: "Lato";
    position: absolute;
    z-index: 9;
}


div#sektion-einladende-lobby {
    margin-top: -6%;
    margin-left: 8%;
    position: relative;
    z-index: 2;
}

div#sektion-einladende-lobby div#sellersiebzehn-logo-sandpaper-fliesen {
    margin-right: -20%;
    z-index: 2;
}

div#sektion-einladende-lobby div.button-dunkelblau.buttonmitpfeil {
    display: flex;
    position: absolute;
    bottom: 15%;
    right: 6%;
}

div#bild-unter-lobby {
    top: -120px;
}

div#spalte-drei-saeulen-header,
div#spalte-mietflaechen-header {
    /* padding-left: 10%;*/
    /* 	padding-left: 6%; */
}

div#spalte-mietflaechen-header h1,
div#spalte-drei-saeulen-header h1 {
    line-height: 1.1;
}

div#spalte-mietflaechen-header div.h1-gruen h1 {
    font-size: 102px;
}

div.zeile-mit-sektion-festercontainer div.spalte-fenstercontainer-hintergrundbild {
    position: relative;
    background-size: cover;
    background-position: center;
}


div.zeile-mit-sektion-festercontainer div.spalte-fenstercontainer-hintergrundbild>.vc_row,
div.zeile-mit-sektion-festercontainer div.spalte-fenstercontainer-hintergrundbild>.wpb_column,
div.zeile-mit-sektion-festercontainer div.spalte-fenstercontainer-hintergrundbild .vc_column_container {
    width: 100%;
    display: flex;
    justify-content: center;
}

div.zeile-mit-sektion-festercontainer .spalte-fenstercontainer-fensterbox-spalteinnen {
    position: relative;
    border: 8px solid var(--farbe-kastanienbraun);
    box-sizing: border-box;
    overflow: visible;
    z-index: 1;

}

/* === Innenbox, ragt unten 50% heraus === */
div.zeile-mit-sektion-festercontainer .spalte-fenstercontainer-textbereich-mitborder {
    background: var(--farbe-kastanienbraun);
    padding: 12px 16px;
    color: #fff;
    margin-bottom: 0px;
}

/*
div.zeile-mit-sektion-festercontainer .spalte-fenstercontainer-textbereich-mitborder {
    background: var(--farbe-kastanienbraun);
    padding: 12px 16px;
    color: #fff;
    margin-bottom: 0px;
}
*/



div.spalte-fenstercontainer-fensterbox-spalteinnen div.vc_column-inner {
    padding: 0;
}

/* Optional: individuelle Maße/Rahmenfarbe nur hier */
#box-hero-gols,
#box-hero-arbeitswelt,
#box-hero-dachterrasse,
#box-hero-lobby,
#box-hero-garage,
#box-hero-fahrradraum {
    width: 600px;
    height: 800px;
    border-color: var(--farbe-kastanienbraun);
    position: absolute;
    bottom: -220px;
    left: 50%;
    transform: translateX(-50%);
}

#main #box-hero-lobby,
#main #box-hero-garage {
    bottom: -180px;
}



div#zeile-fenstercontainer-highlights,
div#zeile-fenstercontainer-arbeitswelt,
div#zeile-fenstercontainer-dachterrasse,
/*div#zeile-fenstercontainer-lobby,*/
div#zeile-fenstercontainer-garage,
div#zeile-fenstercontainer-fahrradraum {
    overflow: unset;
}

/* Hintergrundbild nur für diese Sektion HIGHLGHTS */
div#zeile-fenstercontainer-highlights #spalte-fenstercontainer-hintergrundbild-highlights {
    background-image: url('/wp-content/uploads/2025/09/Fensterbild-Interior-Design.jpg');
    min-height: 800px;
}

div#zeile-fenstercontainer-arbeitswelt #spalte-fenstercontainer-hintergrundbild-arbeitswelt {
    background-image: url('/wp-content/uploads/2025/09/Fensterbild-Arbeitswelt.jpg');
    min-height: 800px;
}

div#zeile-fenstercontainer-dachterrasse #spalte-fenstercontainer-hintergrundbild-dachterrasse {
    background-image: url('/wp-content/uploads/2025/11/terrassen.jpg');
    /*min-height: 1200px;*/
    min-height: 645px;
    z-index: 1;
}

div#zeile-fenstercontainer-garage #spalte-fenstercontainer-hintergrundbild-garage {
    background-image: url('/wp-content/uploads/2025/09/Fensterbild-Garage.jpg');
    min-height: 900px;
}

div#zeile-fenstercontainer-fahrradraum #spalte-fenstercontainer-hintergrundbild-fahrradraum {
    background-image: url('/wp-content/uploads/2025/09/Fensterbild-Fahrradraum.jpg');
    min-height: 900px;
}




#main div.fenster-container-ueberschrift-oben p,
#main div.fenster-container-ueberschrift-unten p,
div.zeile-mit-sektion-festercontainer .spalte-fenstercontainer-textbereich-mitborder p.ueberschrift-imfenster,
p.fenster-container-ueberschrift-oben {
    font-size: 64px;
    font-weight: bold;
    line-height: 1.4;
}


/* 
   Das Plus-Zeichen (+) ist der "adjacent sibling selector".
   Es wählt das unmittelbar nachfolgende <p>-Element aus,
   das direkt hinter <p class="ueberschrift-imfenster"> steht
   – also nur das nächste Geschwister-Element im gleichen Container.
*/
div.spalte-fenstercontainer-textbereich-mitborder p.ueberschrift-imfenster+p {
    font-family: "Open Sans";
    font-weight: 300;
}




div#zeile-fenstercontainer-highlights div.fenster-container-ueberschrift-unten {
    width: 550px;
    position: absolute;
    z-index: 2;
    margin-left: 208px;
    top: 570px;
}

div#fenstercontainer-logo-sellersiebzehn {
    margin-right: 30px;
}

div#zeile-fenstercontainer-highlights div#fenstercontainer-logo-sellersiebzehn img {
    width: 400px;
    margin-top: -137px;
}

div#zeile-fenstercontainer-highlights div#box-hero-gols {
    bottom: -217px;
}

div#zeile-fenstercontainer-dachterrasse div.fenster-container-ueberschrift-unten {
    /*width: 645px;*/
    width: 670px;
    position: absolute;
    margin-left: 6%;
    top: 573px;
    z-index: 3;
}

div#zeile-fenstercontainer-fahrradraum div.fenster-container-ueberschrift-unten {
    position: absolute;
    z-index: 2;
    width: 735px;
    margin-left: 7%;
    top: 875px;
	margin-top: 20px;
}

#main .vc_row-has-fill > .vc_column_container > .vc_column-inner,
#main .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner{
	padding-top: 0;
}

div#zeile-fenstercontainer-garage div.fenster-container-ueberschrift-unten {
    margin-left: 16%;
    top: 10%;
}

div#zeile-fenstercontainer-arbeitswelt .spalte-fenstercontainer-textbereich-mitborder,
div#zeile-fenstercontainer-fahrradraum .spalte-fenstercontainer-textbereich-mitborder {
    background: var(--farbe-dunkelblau);
}

div#zeile-fenstercontainer-dachterrasse .spalte-fenstercontainer-textbereich-mitborder,
div#zeile-fenstercontainer-garage .spalte-fenstercontainer-textbereich-mitborder {
    background: var(--farbe-gruen);
}

div#zeile-fenstercontainer-garage div.fenstersektion-bild-gebaeude img {
    max-width: 560px;
    margin-left: -110px;
    margin-top: 182px;
}

div#zeile-fenstercontainer-arbeitswelt {
    margin-top: 60px;
}



div#zeile-fenstercontainer-arbeitswelt #box-hero-arbeitswelt,
div#zeile-fenstercontainer-fahrradraum #box-hero-fahrradraum {
    border-color: var(--farbe-dunkelblau);
}

div#zeile-fenstercontainer-dachterrasse #box-hero-dachterrasse,
div#zeile-fenstercontainer-garage #box-hero-garage {
    border-color: var(--farbe-gruen);
}



div#zeile-fenstercontainer-arbeitswelt div.fenstersektion-bild-gebaeude {
    z-index: 5;
    position: relative;
    right: 210px;
    /*top: 5%;*/
    margin-top: 20%;
}


div#zeile-fenstercontainer-arbeitswelt div.fenster-container-ueberschrift-unten {
    right: 33%;
    z-index: 10;
    position: absolute;
    width: 681px;
    top: 781px;
}

div#zeile-fenstercontainer-dachterrasse div.fenstersektion-bild-gebaeude {
    width: 650px;
    text-align: center;
    position: relative;
    bottom: -1px;
    left: 3%;
}


div#zeile-header-lage,
div#zeile-header-kontakt {
    background-color: var(--farbe-gruen);
}

div#zeile-header-lage {
    padding-top: 20px;
}

div#zeile-header-lage div.h1-dunkelblau {
    max-width: 700px;
    line-height: 1.4;
}

#main div.h1-dunkelblau h1 {
    color: var(--farbe-dunkelblau);
    line-height: 1;
}


/* Box */
#lage-box {
    /*
    width: 800px;
    height: 700px;
	*/
    box-sizing: border-box;
    padding: 40px 48px;
    background: var(--farbe-dunkelblau);
    color: #fff;
    position: absolute;
    top: -290px;
    margin-right: 50px;
}

/* Gemeinsames Grid-Layout: 3 Spalten (Label | ÖV | Taxi) */
#lage-box .lage-head,
#lage-box .lage-rows .row {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    column-gap: 40px;
    align-items: center;
}

/* Kopf mit Icons rechts und durchgehender unterer Linie */
#lage-box .lage-head {
    padding: 0;
    border-bottom: 1px solid #fff;
}

.lage-head>div.col {
    padding-bottom: 20px;
}

#lage-box .lage-head .oev,
#lage-box .lage-head .taxi {
    display: flex;
    justify-content: center;
	min-width: 130px;
}

#lage-box .lage-head img {
    height: 60px;
    width: auto;
    display: block;
}

/* Vertikale Trennlinie: exakt an Taxi-Spalte – auch im Kopf */
#lage-box .lage-head .taxi,
#lage-box .lage-rows .row .taxi {
    border-left: 1px solid #fff;
    padding-left: 40px;
}

/* Zeilen mit durchgehenden Linien */
#lage-box .lage-rows .row {
    padding: 0;
    border-bottom: 1px solid #fff;
}

#lage-box .lage-rows .row .cell {
    padding-top: 20px;
    padding-bottom: 20px;
	min-width: 130px;
}

/* Typo */
#lage-box .label,
#lage-box .time {
    font-size: 32px;
    font-weight: 700;
}


.cell.time,
.cell.taxi {
    text-align: center;
}




.overflow-visible.vc_row[data-vc-full-width] {
    overflow: visible;
    opacity: 1;
}

#lage-fussgaenger-box {
    background-color: var(--farbe-gruen);
    padding-left: 30px;
    padding-right: 30px;
    max-width: 700px;
    /* vorher 500px – ggf. anpassen */
    width: 100%;
    color: var(--farbe-dunkelblau);
    box-sizing: border-box;
}

/* Wrapper: Icon + rechte Spalte */
.lage-fussgaenger-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    /* etwas mehr Abstand */
}

/* Icon links, vertikal über beide Zeilen */
.lage-fussgaenger-icon img {
    width: 60px;
    height: auto;
    display: block;
}

/* Liste mit zwei Zeilen */
.lage-fussgaenger-list {
    display: grid;
    grid-template-columns: 1fr max-content;
    /* links flexibel, rechts so breit wie die längste Zeit */
    column-gap: 40px;
    row-gap: 16px;
    align-items: baseline;
    flex: 1;
    margin-right: 40px;
}

.lage-fuss-row {
    display: contents;
}

.lage-fuss-row .ziel {
    grid-column: 1;
    font-size: 26px;
    font-weight: 700;
    color: var(--farbe-dunkelblau);
}

/* Rechte Spalte (abschließend bündig) */
.lage-fuss-row .zeit {
    grid-column: 2;
    justify-self: end;
    /* rechtsbündig innerhalb der Spalte */
    white-space: nowrap;
    /* "Min." nie umbrechen */
    font-size: 26px;
    font-weight: 700;
    color: var(--farbe-dunkelblau);
}

div#zeile-lage-fussgaenger {
    position: relative;
    top: -680px;
}



div#zeile-bedeutende-namen p {
    margin-top: 5%;
}

div#zeile-bedeutende-namen div.textbereich-bedeutende-namen-geboxt {
    /*max-width: 620px;*/
    max-width: 725px;
}



div#zeile-inspiration-gut-versorgt {
    font-size: 64px;
    font-weight: bold;
    line-height: 1.4;
    max-width: 500px;
    /*margin-top: 50px;*/
    margin-top: 15px;
}

div#zeile-inspiration-erholung-logo {
    max-height: 380px;
}

div#zeile-inspiration-erholung-logo img {
    width: 350px;
    height: auto;
    position: relative;
    top: -100px;
}


div#zeile-moderne-mobilitaetsraeume div.fenster-container-ueberschrift-oben {
    margin-top: -76px;
}

div#zeile-moderne-mobilitaetsraeume div.fenster-container-ueberschrift-oben p {
    margin-right: 140px;
}

#spalte-drei-saeulen-header .h1-gruen {
    max-width: 600px;
}

div#zeile-fenstercontainer-fahrradraum div#zeile-fahrradraum-logo img {
    width: 450px;
    height: auto;
    position: absolute;
    top: 0;
    margin-left: 10px;
}

div#spalte-drei-saeulen-header {
    padding-left: 10px;
}

div.zeile-saeule-infobox.hintergrundgruen {
    background-color: var(--farbe-gruen);
}

div.zeile-saeule-infobox.hintergrunddunkelblau {
    background-color: var(--farbe-dunkelblau);
    border: 1px solid var(--farbe-weiss);
}

div.zeile-saeule-infobox.hintergrundbeige {
    background-color: var(--farbe-beige);
    color: var(--farbe-dunkelblau);
}

div.zeile-saeule-infobox {
    background-color: var(--farbe-gruen);
    padding-top: 50px;
    font-weight: bold;
    padding-right: 15px;
    padding-left: 15px;
}

div.zeile-saeule-ueberschrift p {
    font-size: 48px;
    margin-left: 20px;
    font-weight: bold;
}

div.zeile-saeule-einleitungstext p {
    font-size: 32px;
    font-weight: bold;
}


div.drei-saeulen-textbereich {
    max-width: 770px;
}

div.drei-saeulen-textbereich h2 {
    /*width: 850px;*/
    max-width: 870px;
}

div.drei-saeulen-textbereich p {
    font-family: "Open Sans";
    font-weight: 300;
}

div.zeile-saeule-infobox li {
    margin-bottom: 35px;
}

div.zeile-saeule-infobox div.zeile-saeule-bild-mitbadge img {
    margin-left: -70px;
    margin-bottom: -150px;
    max-height: 750px;
    width: auto;
}

div#zeile-nachhaltigkeit-digitalisierung div.fenster-container-ueberschrift-oben p {
    font-size: 54px;
}






div#zeile-header-kontakt div#kontakt-headerbild img {
    /* max-width: 720px; */
    height: auto;
}

#kontakt-headerbild {
    margin-bottom: 0;
}

div#zeile-header-kontakt,
div#zeile-header-kontakt a {
    color: var(--farbe-dunkelblau);
    font-weight: bold;
}

div#zeile-header-kontakt div.button-dunkelblau a{
	color: var(--farbe-weiss);
}
div#zeile-header-kontakt div.button-dunkelblau a:hover{
	color: var(--farbe-weiss);
	background-color: var(--farbe-dunkelblau);
}

#main div#zeile-header-kontakt h1 {
    font-size: 94px;
    line-height: 1.2;
}

div#zeile-header-kontakt h2 {
    font-size: 48px;
    color: var(--farbe-dunkelblau);
    font-weight: bold;
}


div#zeile-header-kontakt div#kontakt-vermietung-logo-celexis {
    margin-bottom: 70px;
}

div#zeile-header-kontakt div#textbereich-kontakt-kommenwirinsgespraech,
div#zeile-header-kontakt div.button-dunkelblau,
div#kontakt-download-btn-zeile{
    max-width: 700px;
}

div#zeile-header-kontakt div#textbereich-kontakt-kommenwirinsgespraech p:nth-child(1),
div#zeile-header-kontakt div#textbereich-kontakt-kommenwirinsgespraech p:nth-child(3) {
    border-top: 1px solid var(--farbe-dunkelblau);
    border-bottom: 1px solid var(--farbe-dunkelblau);
    padding-bottom: 18px;
    padding-top: 18px;
}

/* Download-Buttons nebeneinander */
div#kontakt-download-btn-zeile .kontakt-download-btn {
    display: inline-flex;
    margin-right: 16px;
    margin-bottom: 10px;
    vertical-align: middle;
	float: right;
}

/* letzter Button ohne Abstand */
div#kontakt-download-btn-zeile .kontakt-download-btn:last-of-type {
    margin-right: 0;
}

div#kontakt-download-btn-zeile{
	margin-bottom: 20px;
}



footer#footer p,
footer#footer a {
    color: var(--farbe-gruen);
}

footer#footer strong {
    font-size: 36px;
    font-weight: bold;
}

footer#footer div.textklein {
    font-size: 16px;
    /*font-family: 'Inter';*/
}











/* Bereich klar einschränken und Spezifität erhöhen */
#stackingplan .overlay-header {
    display: none !important;
    margin: 0 0 14px;
}

#stackingplan .overlay-header.aktiv {
    display: block !important;
}

#stackingplan .repeater-overlays-wrapper {
    position: relative;
    width: 100%;
    max-width: 1560px;
    /*background-color: var(--farbe-weiss);*/
}

#stackingplan .overlay-hintergrund {
    display: block;
    width: 100%;
    height: auto;
}

/* Overlays exakt über die Basisgrafik legen */
#stackingplan .repeater-overlays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Standard: alle Overlays ausblenden, nur .aktiv sichtbar */
#stackingplan .overlay-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    display: none !important;
    /* opacity: 60%;*/
}

#stackingplan .overlay-bild.aktiv {
    display: block !important;
}

#main div#stackingplan div#button-section {
    padding-left: 0px;
}

div#stackingplan {
    margin-top: 50px;
}

/* =========================================
   BUTTONS – gemeinsam für Stackingplan & Bespielungsvarianten
   ========================================= */

/* Container */
#stackingplan div.col-01 div#button-section,
.bespielungsvarianten .button-section {
    /*background-color: var(--farbe-gruen);*/
    padding: 30px;
}

/* Einzel-Button */
#stackingplan div.button {
    display: table;
    margin-bottom: 40px;
    color: var(--farbe-weiss);
    background-color: transparent;
    padding-top: 3%;
    font-family: Lato;
    font-size: 28px;
    line-height: 39.2px;
    border: 1px solid var(--farbe-weiss);
}

#stackingplan div.button:hover,
#stackingplan div.button.aktiv {
    background-color: var(--farbe-gruen);
    border: 1px solid var(--farbe-dunkelblau);
    color: var(--farbe-dunkelblau);
}

.bespielungsvarianten .btn-option {
    display: table;
    margin-bottom: 40px;
    color: var(--farbe-weiss);
    padding-top: 3%;
}

/* Button Standard */
#button-section div.button,
.bespielungsvarianten .btn-option {
    background-color: transparent;
    font-size: 28px;
    font-weight: bold;
}

/* Aktiver Button */
#button-section div.button.aktiv,
.bespielungsvarianten .btn-option.aktiv {
    background-color: var(--farbe-gruen);
    color: var(--farbe-dunkelblau);
    border: 1px solid var(--farbe-gruen);
}

/* =========================================
   Textbereiche
   ========================================= */
div#stackingplan div.textbereich-stackingplan-einleitungstext {
    width: 780px;
    font-family: 'Lato';
}

div#stackingplan div.textbereich-stackingplan-einleitungstext p {
    font-size: 32px;
    font-weight: 700;
}

div#zeile-sektion-bespielungsvarianten {
    background-color: var(--farbe-gruen);
    padding-top: 50px;
    padding-bottom: 70px;
    margin-bottom: 20px;
}

div#zeile-sektion-nutzungsmix {
    background-color: var(--farbe-gruen);
    padding-top: 50px;
    /*padding-bottom: 90px;*/
}


#main div#zeile-sektion-bespielungsvarianten p#bespielungsvarianten-unterueberschrift,
div#zeile-sektion-nutzungsmix p#nutzungsmix-ueberschrift,
div#zeile-sektion-nutzungsmix p#nutzungsmix-unterueberschrift {
    color: var(--farbe-dunkelblau);
    font-size: 80px;
    font-weight: bold;
    line-height: 1.2;
}

div#zeile-sektion-bespielungsvarianten p#bespielungsvarianten-ueberschrift {
    color: var(--farbe-dunkelblau);
    font-size: 75px;
    font-weight: bold;
    line-height: 1.2;
}

div#zeile-sektion-nutzungsmix p#nutzungsmix-ueberschrift {
    margin-bottom: 35px;
    margin-left: 105px;
}

#main div#zeile-sektion-bespielungsvarianten p#bespielungsvarianten-unterueberschrift,
#main div#zeile-sektion-nutzungsmix p#nutzungsmix-unterueberschrift {
    font-size: 50px;
    margin-top: 70px;
}

div#bespielungsvarianten-text-unten {
    /*width: 600px;*/
    width: 470px;
}

div#bespielungsvarianten-text-unten p {
    font-weight: 700;
    /*color: var(--farbe-dunkelblau);*/
    color: var(--farbe-weiss);
    font-size: 32px;
    font-family: "Open Sans";
}




.mieten-tabelle-wrap {
    overflow-x: auto;
    margin: 40px 0;
}

.mieten-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 24px;
    color: var(--farbe-weiss);
    background: transparent;
    font-family: "Open Sans";
}

.mieten-tabelle thead th {
    background: var(--farbe-dunkelblau);
    color: var(--farbe-weiss);
    text-align: left;
    padding: 14px 30px;
    border-bottom: 2px solid rgba(255, 255, 255);
    border-right: 1px solid rgba(255, 255, 255);
    text-transform: none;
    font-weight: 600;
    text-align: center;
}

.mieten-tabelle thead th:last-child,
.mieten-tabelle tbody td:last-child {
    border-right: none;
}


.mieten-tabelle tbody td {
    padding: 12px 30px;
    border-bottom: 1px solid rgba(255, 255, 255);
    border-right: 1px solid rgba(255, 255, 255);
    text-align: center;
    font-weight: 700;
}

.mieten-tabelle tbody td:nth-child(1),
.mieten-tabelle tbody td:nth-child(2),
.mieten-tabelle thead th:nth-child(2) {
    text-align: left;
}

/*
.mieten-tabelle th:nth-child(6) {
    padding-right: 5%;
}
*/

.mieten-tabelle tbody tr.sum-row td {
    /*border-bottom: 0;*/
    border: 0;
}

.mieten-tabelle tbody tr.sum-row td:nth-child(2),
.mieten-tabelle tbody tr.sum-row td:nth-child(3),
.mieten-tabelle tbody tr.sum-row td:nth-child(4),
.mieten-tabelle tbody tr.sum-row td:nth-child(5) {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}


.mieten-tabelle td a.dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--farbe-weiss);
    font-weight: 600;
    text-decoration: none;
}

/*
.mieten-tabelle td a.dl .icon-download {
    width: 24px;
    height: auto;
    display: inline-block;
    transform: translateY(1px);
	margin-left: 12px;
}*/
/* Standard-Stil für den Download-Pfeil */

.mieten-tabelle td a.dl .icon-download {
    width: 24px;
    height: auto;
    display: inline-block;
    transform: translateY(1px);
    margin-left: 12px;
    content: url("/wp-content/uploads/2025/09/Download-Pfeil.svg");
    /* Standard (hell) */
}

/* Wenn Zeile .highlight hat → dunkler Pfeil */
.mieten-tabelle tr.highlight td a.dl .icon-download {
    content: url("/wp-content/uploads/2025/11/Download-Pfeil-dunkel.svg");
}


/*
.mieten-tabelle tr.highlight {
    background: var(--farbe-gruen);
    color: var(--farbe-dunkelblau);
    font-weight: 700;
    transition: background .2s ease, color .2s ease;
}

.mieten-tabelle tr.highlight td a.dl {
    color: var(--farbe-dunkelblau);
}

.icon-miteinheit {
    width: 14px;
    height: auto;
    margin-right: 6px;
    vertical-align: middle;
    display: none;
}

.mieten-tabelle tr.highlight .icon-miteinheit {
    display: inline-block;
}

.mieten-tabelle tr:not(.highlight) {
    background: transparent;
    color: var(--farbe-weiss);
}

#mieten-tabelle a {
    text-decoration: none;
    font-weight: 700;
}
*/


/* Grundzustand: alle Zellen */
.mieten-tabelle tbody td {
    background: transparent;
    color: var(--farbe-weiss);
    transition: background .2s ease, color .2s ease;
}

/* HERVORGEHOBENE ZELLEN (Matrix-Schnittmenge) */
.mieten-tabelle tbody td.highlight-cell {
    background: var(--farbe-gruen);
    color: var(--farbe-dunkelblau);
    font-weight: 700;
}

/* Links in hervorgehobenen Zellen */
.mieten-tabelle tbody td.highlight-cell a.dl {
    color: var(--farbe-dunkelblau);
}

/* Icon nur in hervorgehobenen Zellen anzeigen */
.icon-miteinheit {
    width: 14px;
    height: auto;
    margin-right: 6px;
    vertical-align: middle;
    display: none;
}

.mieten-tabelle tbody td.highlight-cell .icon-miteinheit {
    display: inline-block;
}

/* letzte zeile */
.mieten-tabelle tr.sum-row td {
    background-color: var(--farbe-dunkelblau) !important;
    color: #fff !important;
}



div#zeile-sektion-maplayers div.wpb_raw_code {
    margin-bottom: 0px;
}


/* ===== MapLayers Sektion ===== */
div#zeile-sektion-maplayers {
    background-color: var(--farbe-gruen);
}

/* ===== MapLayers Sektion ===== */
#maplayers {
    display: grid;
    gap: 18px;
    padding-top: 5px;
}

/* Bühne (Karte + Overlays) */
#maplayers .maplayers__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

#maplayers .maplayers__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

#maplayers .maplayers__img.base {
    z-index: 1;
}

#maplayers .maplayers__img.layer {
    z-index: 2;
    opacity: 1;
    transition: opacity .15s ease;
}

#maplayers .maplayers__img.layer[hidden] {
    opacity: 0;
}

/* Controls */
#maplayers .maplayers__controls {
    display: grid;
    gap: 12px 18px;
    border: 0;
    color: var(--farbe-schwarz);
    background-color: #E5E0DA;
    max-width: 400px;
    margin-top: -110px;
    z-index: 9;
    bottom: 242px;
    left: 1224px;
    position: relative;
}

/* Toggle: Farb- und Statesystem über --on (Hex) pro Label */
#maplayers .toggle {
    --h: 28px;
    --w: 52px;
    --on: var(--farbe-gruen);
    /* Fallback, wird inline überschrieben */
    display: inline-flex;
    align-items: center;
    gap: 45px;
    cursor: pointer;
    user-select: none;
}

#maplayers .toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Track */
#maplayers .toggle__ui {
    position: relative;
    width: var(--w);
    height: var(--h);
    background: var(--on);
    /* gleiche Farbe wie aktiv */
    opacity: .5;
    /* OFF = 50% wie gewünscht */
    border-radius: var(--h);
    transition: opacity .15s ease, background .15s ease;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}

/* Knopf */
#maplayers .toggle__ui::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--h) - 4px);
    height: calc(var(--h) - 4px);
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}

/* ON-State */
#maplayers .toggle input:checked+.toggle__ui {
    opacity: 1;
}

#maplayers .toggle input:checked+.toggle__ui::after {
    transform: translateX(calc(var(--w) - var(--h)));
}

#maplayers .toggle__label {
    font-weight: 700;
    letter-spacing: .01em;
}

/* Immer sichtbar & ganz oben */
#maplayers .maplayers__img.layer[data-layer="park"] {
    z-index: 98;
}

#maplayers .maplayers__img.layer[data-layer="sellerpin"] {
    z-index: 99;
}

/* Beide Toggles ausblenden (falls sie im DOM bleiben) */
#maplayers .maplayers__controls label:has(input[data-toggle="sellerpin"]),
#maplayers .maplayers__controls label:has(input[data-toggle="park"]) {
    display: none !important;
}


/* Listen-Sektion bei Maplayers */

#zeile-sektion-poi>.wpb_column .wpb_text_column.wpb_content_element>.wpb_wrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

/* Wrapper für die gesamte Liste */
.poi-liste-wrapper {
    background: var(--farbe-gruen);
    padding: 20px 30px;
    width: 25%;
}

div.poi-liste-wrapper.liste-restaurants {
    width: 50%;
}

/* Liste ohne Standard-Zahlen */
.poi-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Zwei Spalten ab mittlerer Breite */
.poi-liste--zweispaltig {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


@media (min-width: 680px) {
    div.liste-restaurants .poi-liste--zweispaltig {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }

    .poi-liste--zweispaltig {
        column-gap: 40px;
    }
}


/* Einträge */
.poi-liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: var(--farbe-dunkelblau);
    font-size: 18px;
    margin-bottom: 12px;
}

/* Nummern-Badge */
.poi-nummer {
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--farbe-dunkelblau);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

div.poi-liste-wrapper.liste-cafe-imbiss .poi-nummer {
    background: #EFCE73;
    color: var(--farbe-dunkelblau);
}

div.poi-liste-wrapper.liste-nahversorgung .poi-nummer {
    background: #C7CDDD;
    color: var(--farbe-dunkelblau);
}


div.poi-liste-wrapper p.poi-liste-ueberschrift {
    font-size: 40px;
    font-weight: 400;
}


/* Alle Listen zunächst ausblenden */
.poi-liste-wrapper {
    display: none;
}

/* Sichtbare (per JS) */
.poi-liste-wrapper.is-visible {
    display: block;
    margin-bottom: 28px;
}

/* Überschrift optional angleichen */
.poi-liste-ueberschrift {
    margin: 0 0 14px 0;
    font-weight: 700;
    color: var(--farbe-dunkelblau);
}


/* Standard: kein margin */
#zeile-sektion-maplayers #zeile-sektion-poi {
    margin-top: 0;
    display: none;
}

/* Sobald mindestens 1 Liste aktiv ist */
#zeile-sektion-maplayers #zeile-sektion-poi.has-active-list {
    margin-top: -223px;
    display: block;
}

#zeile-sektion-poi div.wpb_text_column {
    margin-bottom: 0px;
}












/* === Bespielungsvarianten – Buttons wie Stackingplan === */
.bespielungsvarianten__controls,
.nutzungsmix__controls {
    background-color: var(--farbe-gruen);
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

.bespielungsvarianten__btn,
.nutzungsmix__btn {
    display: table;
    margin-bottom: 20px;
    color: var(--farbe-weiss);
    background: transparent;
    font-size: 28px;
    font-weight: 700;
    /* wie "bold", aber konkreter */
    padding: 8px 14px;
    /* sorgt für den „Block“-Look */
    border: 1px solid var(--farbe-weiss);
    /* weißer Rahmen wie links */
    border-radius: 0;
    cursor: pointer;
    min-width: 208px;
    text-align: center;
}

#main .nutzungsmix__btn {
    min-width: 246px;
}

.bespielungsvarianten__btn.aktiv,
.nutzungsmix__btn.aktiv {
    background-color: var(--farbe-dunkelblau);
    border-color: var(--farbe-dunkelblau);
}



/* === Flächenplan – Bildbühne === */

.fp-m__stage {
    position: relative;

    aspect-ratio: 16/9;
    background: transparent;
}

.fp-m__stage img {
    position: absolute;
    inset: 0;
    width: 90%;
    height: auto;
    object-fit: contain;
    transition: opacity .18s ease;
    opacity: 1;
}



.fp-m__stage {
    position: relative;
    aspect-ratio: 16/9;
    background: transparent;
    overflow: visible;
    /* WICHTIG: nichts abschneiden */
}

/* Ausgangszustand */
.fp-m__stage img {
    position: absolute;
    inset: 0;
    margin: auto;
    /* sauber zentriert in der Stage */
    width: 90%;
    height: auto;
    object-fit: contain;
    transition: transform .25s ease, opacity .18s ease;
    opacity: 1;
    transform-origin: center center;
    z-index: 1;
}

/* Hover-Zoom: moderat, bleibt in der Nähe des Containers */
.fp-m__stage:hover img {
    transform: scale(1.3);
    /* Zoom-Faktor, z.B. 1.3–1.8 */
    z-index: 20;
    /* über umliegenden Elementen */
    cursor: zoom-in;
}