* {
box-sizing: border-box;
}
html,
body {
position: relative;
height: 100%;
width: 100%;
color: #000;
font-size: 16px;
font-family: "acumin-pro";
background-color: #f0edec;
}
h1,
h2 {
font-size: clamp(20px, 2.3vw, 45px);
margin-top: 0;
font-weight: 300;
text-transform: uppercase;
}
h3 {
font-size: clamp(17px, 1.25vw, 50px);
line-height: 1.5;
font-weight: 100;
text-transform: uppercase;
padding-top: 1rem;
}
p {
font-size: clamp(17px, 1.25vw, 50px);
line-height: 1.3;
font-weight: 100;
margin-top: 2vw;
}
table {
font-size: clamp(14px, 0.9vw, 18px);
line-height: 1.3;
background-color: #f0edec;
}
.img-fluid {
width: 100%;
height: auto;
} .header-grid {
display: grid;
grid-template-columns: repeat(13, 1fr);
padding: 25px 25px 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
}
.header-grid .logo-1 {
grid-column: 1 / 4;
padding: 25px;
}
.header-grid .logo-2 {
grid-column: 8 / 13;
padding: 25px 0;
}
.header-grid.bg {
z-index: 50;
background-color: #f0edec;
}
.toggle-container.fix {
position: fixed;
display: flex;
justify-content: flex-end;
right: 0;
top: 0;
z-index: 1000;
padding-right: 25px;
padding-top: 25px;
}
.toggle-container a {
display: inline-flex;
margin: 25px 25px 0 0;
}
.menu-active .toggle-container.fix {
display: none;
} .menu-desktop {
position: fixed;
top: 0;
right: -10px;
height: calc(100% - var(--footer-height)); width: 0px;
z-index: 210;
border-left: 2px solid #000;
transition: all 400ms ease-in-out; opacity: 0;
}
.menu-active .menu-desktop {
width: var(--menu-width);
right: 0;
background-color: #f0edec;
opacity: 1;
}
.sticky-mode.menu-active .menu-desktop {
background-color: #8a967e;
}
.menu-desktop .toggle-container {
position: absolute;
right: 25px;
top: 25px;
}
.menu-desktop .inner {
height: 100%;
padding-top: 167px;
}
.menu-desktop .inner ul {
list-style: none;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
justify-content: space-between;
}
.menu-desktop .inner ul li {
flex-grow: 1;
border-bottom: 2px solid #000;
display: flex;
align-items: center;
padding-left: 13%;
text-transform: uppercase;
font-size: clamp(2rem, 2.3vw, 2.8rem);
}
.menu-desktop .inner li:first-child {
border-top: 2px solid #000;
}
.menu-desktop .inner li:last-child {
border-bottom: 0;
}
.menu-desktop .inner li a {
color: inherit;
text-decoration: none;
} section.grid-bg {
display: grid;
padding: 25px;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: repeat(13, 1fr);
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
section.grid-bg div,
.header-grid.bg div {
background-image: url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg);
background-repeat: no-repeat;
background-size: 3px 3px;
background-position: 0 0;
height: calc(100vw / 13);
}
.header-grid.bg div:last-child,
section.grid-bg div:nth-child(13n) {
background-image: url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg), url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg);
background-repeat: no-repeat;
background-position: 0 0, 99% 0;
background-size: 3px 3px;
}
section.home-grid {
display: grid;
padding: 16.6vw 25px 0;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: auto;
z-index: 1;
position: relative;
}
section.home-grid .text {
grid-row: 3 / 5;
grid-column: 2 / 7;
padding-left: 0.5vw;
display: flex;
flex-flow: column;
justify-content: space-between;
}
section.home-grid .image {
grid-row-start: 3;
grid-column: 8 / 13;
padding-left: 3px;
padding-top: 5px;
}
section.home-grid .text-btm p {
margin-bottom: 0;
}
div.table table {
border: 2px solid #000;
width: 100%;
}
div.table td {
padding: 13px 20px;
vertical-align: top;
}
div.table table td:nth-child(1) {
border-right: 2px solid;
white-space: nowrap;
} section.home-02 {
display: grid;
padding: 5vw 25px 0;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: repeat(1, 1fr);
z-index: 1;
position: relative;
padding-bottom: 200px;
}
section.home-02 div.a {
grid-column: 2 / span 3;
padding-left: 4px;
}
section.home-02 div.b {
grid-column: 6 / span 3;
padding-left: 4px;
}
section.home-02 div.c {
grid-column: 10 / span 3;
padding-left: 4px;
}
section.home-02 p {
margin-top: 1.2rem;
}
.img-trenner {
margin: 0;
padding: 0;
width: 100%;
position: relative;
z-index: 10;
}
.img-trenner img {
display: flex;
}
section.behandlungen {
background-color: #8a967e;
display: grid;
grid-template-columns: repeat(13, 1fr);
padding: 25px;
}
section.behandlungen h2,
section.praxis h2 {
font-size: 2.7vw;
}
section.behandlungen .inner {
grid-column: 2 / span 11;
margin: 20vw 0 20vw 3px;
position: relative;
z-index: 10;
}
section.behandlungen h4 {
margin: 1rem 0;
padding: 0;
text-transform: uppercase;
font-size: 1.55vw;
font-weight: 300;
display: inline-flex;
}
section.behandlungen .heading {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.55vw;
}
section.behandlungen .inner .item {
border-bottom: 2px solid #000;
padding-left: 22.3vw;
}
section.behandlungen .item .dropdown {
position: relative;
height: 0;
overflow: hidden;
}
section.behandlungen .item.active .dropdown {
height: 100%;
}
section.behandlungen .heading:hover {
cursor: pointer;
}
section.behandlungen .inner .item:first-of-type {
border-top: 2px solid #000;
}
section.behandlungen .item span.close {
display: none;
}
section.behandlungen .item.active span.close {
display: block;
}
section.behandlungen .item.active span.open {
display: none;
}
section.praxis {
display: grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: minmax(150px, min-content) 1fr min-content;
padding: 11vw 25px 0 25px;
position: relative;
z-index: 1;
}
section.praxis h2 {
grid-column: 2 / span 11;
grid-row: 1;
padding-left: 25px;
}
section.praxis .item:nth-of-type(1) {
grid-column: 1 / span 5;
grid-row: 2;
margin-left: -25px;
}
section.praxis .item:nth-of-type(2) {
grid-column: 10 / span 4;
grid-row: 2;
margin-left: 3px;
margin-right: 3px;
}
section.praxis .item:nth-of-type(3) {
grid-column: 7 / span 3;
grid-row: 3;
margin-left: 3px;
}
section.kontakt {
min-height: 500px; display: grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: minmax(150px, min-content) 1fr;
padding: 11vw 25px;
position: relative;
z-index: 1;
}
section.kontakt h2 {
grid-column: 2 / span 11;
grid-row: 1;
}
section.kontakt .inner-01 {
grid-column: 4 / span 4;
grid-row: 2;
}
section.kontakt .inner-02 {
grid-column: 8 / span 6;
grid-row: 2;
}
.d-container table,
#kontakt table {
font-size: clamp(17px, 1.25vw, 50px);
line-height: 1.3;
font-weight: 100;
}
.d-container table td:first-child,
#kontakt table td:first-child {
padding-right: 2rem;
white-space: nowrap;
}
.d-container table {
background-color: transparent;
}
table a {
color: inherit;
text-decoration: none;
}
table td {
vertical-align: top;
} section.rudolfganger {
position: relative;
background-color: #8a967e;
z-index: 200;
transition: all 0ms ease-in-out;
}
section.rudolfganger.sticky-off {
padding-top: var(--sticky-offset);
}
section.rudolfganger .header-02 {
padding: 45px 50px;
width: 100%;
background-color: #8a967e;
transition: all 300ms ease-in-out;
display: flex;
grid-gap: 20%;
}
section.rudolfganger .header-02 img {
width: 39%;
}
section.rudolfganger .header-02.sticky {
position: fixed;
z-index: 100;
top: 0;
left: 0;
}
section.rudolfganger .header-02 .infotext {
margin-right: 10%;
font-size: 18px;
}
section.rudolfganger .txt-container .infotext {
margin-top: 2rem;
margin-bottom: 2rem;
padding: 10%;
border: 1px solid #000;
text-align: center;
line-height: 1.25;
}
section.rudolfganger .img-container {
position: relative;
padding: 50px;
width: 100%;
}
section.rudolfganger .img-container > .infotext {
position: absolute;
margin-top: 5%;
margin-right: 5%;
width: 30%;
min-height: 100px;
border: 2px solid #000;
background-color: #8a967e;
right: 50px;
text-align: center;
font-size: 1.4rem;
padding: 3%;
}
section.rudolfganger .txt-container {
padding: 100px 0;
}
.dr-content {
background-color: #8a967e;
display: grid;
grid-template-columns: repeat(13, 1fr);
padding: 25px 25px 16vw 25px;
}
.dr-content h2 {
font-size: 2.7vw;
}
.dr-content h4 {
margin: 1rem 0;
padding: 0;
text-transform: uppercase;
font-size: 2.7vw;
font-weight: 300;
display: inline-flex;
}
.dr-content .inner {
grid-column: 2 / span 11;
margin: 0vw 0 0vw 3px;
position: relative;
z-index: 10;
}
.dr-content .heading {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 2.7vw;
}
.dr-content .item .dropdown {
position: relative;
height: 0;
overflow: hidden;
}
.dr-content .item.active .dropdown {
height: 100%;
padding-top: 1vw;
}
.dr-content .dropdown.col {
display: grid;
grid-template-columns: 25% 1fr;
gap: 50px;
}
.dr-content .item.active .dropdown {
padding-bottom: 80px;
}
.dr-content .dropdown.col table {
background-color: transparent;
width: max-content;
max-width: 50%;
}
.dr-content .heading:hover {
cursor: pointer;
}
.dr-content .inner .item:first-of-type {
border-top: 2px solid #000;
}
.dr-content .inner .item {
border-bottom: 2px solid #000;
padding-left: 0;
}
.dr-content .inner .item .dropdown {
padding-left: 22.3vw;
}
.dr-content .inner .item .dropdown.col {
padding-left: 0;
}
.dr-content .item span.close {
display: none;
}
.dr-content .item.active span.close {
display: block;
}
.dr-content .item.active span.open {
display: none;
}
.dr-content .item ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.dr-content .item ul li {
font-size: 1.5vw;
line-height: 2.5;
border-bottom: 2px solid #000;
text-transform: uppercase;
}
.dr-content .item li .sm {
font-size: 1.25vw;
text-transform: none;
}
.dr-content .item ul li:last-child {
border-bottom: 0;
}
.dr-content .d-container {
display: grid;
grid-template-columns: auto 1fr;
gap: 2vw;
font-size: 1.25vw;
line-height: 1.5;
padding-top: 2vw;
}
.dr-bottom {
position: fixed;
z-index: -1;
left: 0;
bottom: 0;
width: 100%;
height: 0;
display: flex;
justify-content: space-between;
transition: all 300ms ease-in-out;
opacity: 0;
}
.dr-bottom div {
border-top: 2px solid #000;
border-right: 2px solid #000;
flex-grow: 1;
padding: 25px 10px;
font-size: 1.1vw;
line-height: 1.6vw;
text-align: center;
text-transform: uppercase;
background-color: #8a967e;
}
.dr-bottom div:last-child {
border-right: 0;
}
.sticky-mode .dr-bottom {
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
opacity: 1;
height: auto;
}
.dr-bottom a {
color: inherit;
text-decoration: none;
}
.dropdown.rg-team {
display: flex;
gap: 5%;
padding-right: 12%;
} footer.fix {
width: 100%;
height: auto;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background-color: #f0edec;
}
footer.fix .inner {
display: flex;
justify-content: space-between;
}
footer.fix .inner > div {
border-right: 2px solid #000;
border-top: 2px solid #000;
flex-grow: 1;
padding: 25px 10px;
font-size: clamp(13px, 1.1vw, 25px);
line-height: 1.5;
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
footer.fix .inner > div:nth-child(3) {
flex: 10;
}
footer.fix .inner > div:last-child {
border-right: 0;
}
footer.fix a {
color: inherit;
text-decoration: none;
}
footer.fix div.container {
display: flex;
justify-content: space-evenly;
} .page-template-page-impressum h2 {
padding-top: 1rem;
}
.page-template-page-impressum .home-grid .inner a {
color: inherit;
text-decoration: underline;
}
.page-template-page-impressum .home-grid .inner {
grid-column: 2 / span 6;
padding-bottom: 200px;
}
.page-template-page-impressum .home-grid .inner ul {
list-style: none;
list-style-position: outside;
padding: 0px;
}
.page-template-page-impressum .home-grid .inner li {
font-size: clamp(17px, 1.25vw, 50px);
display: inline-flex;
line-height: 1.5;
}
.page-template-page-impressum .home-grid .inner ul li:before {
content: "—";
margin: 0 1em 0 0; } .h-desk {
display: none;
} @media (max-width: 996px) {
.h-tablet {
display: none !important;
}
} @media (max-width: 767px) {
.h-desk {
display: block;
}
.h-mobile {
display: none !important;
}
section.behandlungen h2,
section.praxis h2 {
font-size: clamp(20px, 2.3vw, 45px);
}
.menu-desktop {
height: 100vh; height: calc(var(--vh, 1vh) * 100);
}
.menu-active .menu-desktop {
width: 100% !important;
border-left: 0;
}
.splash-mobile {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
height: calc(var(--vh, 1vh) * 100);
position: relative;
z-index: 101;
padding: 0;
}
.splash-mobile div:first-child {
display: flex;
background-color: #f0edec;
justify-content: center;
align-items: center;
border-bottom: 1px solid #000;
}
.splash-mobile div:last-child {
display: flex;
background-color: #8a967e;
justify-content: center;
align-items: center;
}
.splash-mobile a img {
min-height: 31px;
height: 100%;
width: auto;
}
.arrow {
position: absolute;
bottom: 3vw;
margin: 0 auto;
}
.arrow a img {
width: 9vw;
max-width: 40px;
height: auto;
}
.header-grid {
grid-template-columns: repeat(4, 1fr);
padding: 0px 25px 12px;
position: fixed;
z-index: 100;
background-color: #f0edec;
}
.header-grid .logo-1 img {
width: 80%;
}
.toggle-container a {
margin: 0;
}
.header-grid .logo-1 {
padding: 25px 0 0;
}
.header-grid.bg {
display: none;
}
section.grid-bg {
grid-template-columns: repeat(3, 1fr);
padding: 0 25px;
top: -20px;
}
section.grid-bg div {
height: calc(100vw / 3.5);
width: calc(100vw / 3.5);
}
section.grid-bg div:nth-child(3n) {
background-image: url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg), url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg);
background-repeat: no-repeat;
background-position: 0 0, 99% 0;
background-size: 3px 3px;
}
section.grid-bg div:nth-child(13n) {
background-image: url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg), url(//www.ganger.at/wp_2022/wp-content/themes/bf_ganger/images/svg-dot.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 3px 3px;
}
section.home-grid {
grid-template-columns: 1fr;
padding: 50vw 25px 0;
}
section.home-grid .image,
section.home-grid .text {
grid-row-start: unset;
grid-row: unset;
grid-column: 1 / span 2;
padding-right: 5px;
padding-top: 0;
}
div.table table {
border: 1px solid #000;
}
div.table td {
padding: 10px;
}
div.table table td:nth-child(1) {
border-right: 1px solid #000;
}
section.home-02 {
grid-template-columns: 1fr;
grid-template-rows: auto;
margin-top: 100px;
padding-bottom: 0;
}
section.home-02 p {
margin-bottom: 1rem;
}
section.home-02 div.a,
section.home-02 div.b,
section.home-02 div.c {
grid-column: unset;
padding-right: 5px;
margin-bottom: 50px;
}
section.behandlungen {
grid-template-columns: 1fr;
position: relative;
z-index: 1;
}
section.behandlungen .inner {
grid-column: unset;
margin: 15vw 0 15vw 3px;
}
section.behandlungen .inner .item {
padding-left: 0;
}
section.behandlungen .inner .item:first-of-type {
border-top: 1px solid #000;
}
section.behandlungen .inner .item {
border-bottom: 1px solid #000;
}
section.behandlungen .heading {
font-size: 1.14rem;
}
section.behandlungen h4 {
font-size: 1.14rem;
line-height: 1.4;
}
section.praxis {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
padding: 15vw 0 15vw 3px;
gap: 30px;
}
section.praxis h2 {
grid-column: 1 / span 3;
grid-row: 1;
padding-left: 25px;
}
section.praxis .item:nth-of-type(1) {
grid-column: 1 / span 4;
grid-row: 2;
margin-left: 0;
padding: 0 26px 0 25px;
}
section.praxis .item:nth-of-type(2) {
grid-column: 2 / span 3;
grid-row: 4;
}
section.praxis .item:nth-of-type(3) {
grid-column: 1 / span 2;
grid-row: 3;
margin-left: -3px;
margin-right: 0;
}
section.kontakt {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
section.kontakt h2 {
grid-column: 1;
grid-row: 1;
}
section.kontakt .inner-01 {
grid-column: 1;
grid-row: 2;
}
section.kontakt .inner-02 {
grid-column: 1;
grid-row: 3;
}
section.rudolfganger {
min-height: calc(var(--vh, 1vh) * 101);
}
section.rudolfganger .header-02 {
padding: 25px;
}
section.rudolfganger .header-02 img {
width: 82%;
}
section.rudolfganger .img-container {
padding: 25px;
}
section.rudolfganger .txt-container {
padding: 0 25px;
}
.dr-content {
padding: 50px 0 130px;
}
.dr-content .dropdown.col table {
width: 100%;
max-width: 100%;
}
.dr-content .item li .sm {
font-size: 0.8rem;
}
.dr-content .d-container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
font-size: 1rem;
line-height: 1.5;
padding-top: 2vw;
}
.dr-content .item ul li {
font-size: 1rem;
line-height: 1.5;
border-bottom: 1px solid #000;
text-transform: uppercase;
padding: 10px 0;
}
.dr-content h4,
.dr-content .heading {
font-size: 1.3rem;
}
.dr-content .inner .item:first-of-type {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
.dr-content .inner .item {
border-bottom: 1px solid;
}
.dr-content .inner .item .dropdown {
padding-left: 0;
}
.dr-content .dropdown.col {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.dr-bottom div {
padding: 20px 5px;
font-size: 0.9rem;
line-height: 1.3;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.dr-bottom div:first-child {
flex-grow: 2;
}
.page-template-page-impressum .home-grid .inner {
grid-column: 1 / span 3;
padding-bottom: 200px;
}
.page-template-page-impressum .home-grid .inner a {
word-break: break-all;
}
.dropdown.rg-team {
padding-right: 0;
}
footer.fix .inner > div:nth-child(3) {
flex: 4;
}
footer.fix .inner > div {
padding: 10px;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
footer.fix div.container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 5px;
text-align: left;
}
}