/*
Theme Name: DrSauter
Author: KGL - Web & Design
Version: 2024.7
*/

@font-face {
  font-family: "AllRoundGothicMedium";
  src: url('inc/fonts/webFonts/AllRoundGothicMedium/font.woff2') format('woff2'), url('inc/fonts/webFonts/AllRoundGothicMedium/font.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "AllRoundGothicBook";
  src: url('inc/fonts/webFonts/AllRoundGothicBook/font.woff2') format('woff2'), url('inc/fonts/webFonts/AllRoundGothicBook/font.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "AllRoundGothicDemi";
  src: url('inc/fonts/webFonts/AllRoundGothicDemi/font.woff2') format('woff2'), url('inc/fonts/webFonts/AllRoundGothicDemi/font.woff') format('woff');
  font-display: swap;
}

:root{
  font-size:20px;
  --color-prime:#000;
  --color-sec:#F5F4F0;
  --color-accent:#8C7146;
  --color-gray:#999;
  --font-book:AllRoundGothicBook,sans-serif;
  --font-medium:AllRoundGothicMedium,sans-serif;
  --font-demi:AllRoundGothicDemi,sans-serif;
}

@media (max-width:767px){
  :root{font-size:15px;}
}

body{
  font-family: var(--font-medium);
  font-weight:400;
  letter-spacing: 0.015em;
  color:var(--color-prime);
  background-color: var(--color-sec);
  transition: color .4s ease, background-color .4s ease;
}


.wrapper{ overflow: hidden; }

@media (min-width:768px){ .wrapper{padding:0 2rem;} }

.outline{outline:1px solid;}

img{
  width:100%;
  max-width:100%;
  height:auto;
  transition: opacity .4s ease-in-out .4s;
}

.container{max-width: 1440px;}

/*-----------*/

b,strong{font-family: var(--font-demi); font-weight:400;}
.italic{font-style:italic;}
.book,.regular{font-family: var(--font-book); font-weight:400;}
.medium{font-family: var(--font-medium); font-weight:400; }
.demi,.semi{font-family: var(--font-demi); font-weight:400;}
.bold,.fett{font-family: var(--font-demi); font-weight:400;}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {background-color:var(--color-accent); color:#fff;}
::-moz-selection {background-color:var(--color-accent); color:#fff;}


/*-----------*/

a, a:hover, a:focus{
  color:var(--color-prime);
}

a:hover{
  text-decoration-color: var(--color-accent);
  text-underline-offset: .1em;
}

/*-----------*/

h1,h2,h4,h3{
  font-family:var(--font-demi);
  font-weight:400;
}

h1{
  font-size:3rem;
  margin-bottom:1em;
}

h3{
  font-size:2.25rem;
  line-height:1.15;
  margin-bottom:1.5em;
}

h4{
  font-size:1.45rem;
  line-height:1.15;
  margin-bottom:.25em;
}

p{margin-bottom: 0;}
p + p{margin-top: 1em;}

.dz{
  font-family:var(--font-demi);
  font-size:1.15rem;
  line-height:1.25;
  color:var(--color-accent);
  text-decoration: underline;
  margin-bottom:1.75em;
}

.copy-text{
  font-size: 1.15rem;
  line-height: 1.58;
}

.quote{
  font-size: 1.6rem;
  line-height:1.35;
  font-family:var(--font-book);
  font-weight:400;
  margin: 4rem 0 .5em 0;
  max-width: 64ch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width:991px) {
  .quote{ margin-top:3rem; }
}

@media (min-width:768px) and (max-width:1024px){
  .quote{font-size:1.7rem;}
}

/* @media (min-width:768px) {
.quote{ hanging-punctuation: first last; }
} */

.quote::before{content:'„';}
.quote::after{content:'“';}

.quote-src{
  font-family:var(--font-demi);
  font-size:.85rem;
}


/*-----------*/

/* --- Sticky Logo Bar --- */

.logo-sticky-bar{
  background:var(--color-sec);
  padding:1.2rem 0;
  position:fixed;
  width:100%;
  left:0;
  z-index:2;
  transition: translate .6s ease-in-out, opacity .6s ease-in-out, visibility .6s;
}

@media (min-width:768px){
  .logo-sticky-bar{
    padding:1.2rem 2rem;
  }
}

.logo-sticky-bar:not(.active){
  translate:0 -100%;
  opacity: 0;
  visibility: hidden;
}

.logo-sticky{
  cursor: pointer;
  aspect-ratio:6.5;
  object-fit: contain;
  object-position: left top;
  width:100%;
  max-width: 8rem;
}

@media (max-width:767px){
  .logo-sticky{ max-width: 10rem; }
}

.lang-switch{
  font-family:var(--font-demi);
  font-size:1.15rem;
  line-height: 1;
  translate:0 3px;
}

.lang-switch a:not(.active){color:var(--color-accent);}
.lang-switch a.active:hover{text-decoration: none;}
.lang-switch a.active{pointer-events: none;}

.lang-switch a:first-child::after{
  content:'|';
  padding:0 .5ch;
  color:var(--color-accent);
}

.logo-sticky-bar.active + #header .lang-switch{
  opacity:0;
}

/*--------*/

#header{ padding-top:2rem; }
@media (max-width:600px){
  #header{ padding-top:1.5rem; }
}

#header .row{position: relative;}

#header .lang-switch{
  position: absolute;
  top:-6px;
  right:15px;
  z-index: 1;
  transition: opacity .3s linear;
}

@media (max-width:600px){
  #header .lang-switch{
    top:auto;
    bottom:-4rem;
  }
  .page-template-imprint #header .lang-switch{ bottom:-4rem; }
}

.logo{
  cursor:pointer;
  aspect-ratio:6.5;
  object-fit: contain;
  object-position: left top;
  width:100%;
}

@media (min-width:601px){
  .logo{ width:min(80%,1040px); }
}


#intro{padding-bottom:var(--pb); transition:padding-bottom .5s linear;}


.intro-desc{
  margin:3rem 0 3rem 0;
}

.page-template-imprint .intro-desc{
  margin-bottom:6rem;
}

.intro-desc h1{
  font-size:2rem;
  line-height: 1.25;
  font-family:var(--font-demi);
  font-weight:400;
  max-width:55ch;
}

main.en .intro-desc h1{ max-width:45ch; }


/* --- Single Hero Image --- */

.intro-image{
  margin:0 0 3rem 0;
}

@media (min-width:768px){
.intro-image{
  margin:0 -2rem 3rem -2rem;
}
}

@media (max-width:600px){
.intro-image img{
  aspect-ratio:1.5;
  object-fit: cover;
  object-position: 20% top;
}
}



/* --- Akkordeon ---- */

.panel{
  --tl: .5s;
  --tt: linear;
}

.panel:last-of-type{ border-bottom:1px solid; }


/* Panel Head*/

.panel-head{
  padding:1rem 0;
  border-top:1px solid;
  cursor: pointer;
}


h2.panel-heading{
  font-family:var(--font-demi);
  font-weight:400;
  font-size:2.25rem;
  line-height:1;
  text-transform: lowercase;
  margin-bottom:0;
  margin-block-start:0 !important;
  max-width: 30ch;
  transition: all var(--tl) ease-in-out;
  translate:0 -1px;
}

.panel.active h2.panel-heading{
  font-size:5rem;
}

@media (max-width:768px) {
  h2.panel-heading{
    font-size:2rem;
    width:calc(100% - 4rem);
  }
  .panel.active h2.panel-heading{font-size:3rem;}
}

.panel-icon{
  width:6rem;
  padding:0 0 0 2rem;
}

@media (max-width:768px) {
  .panel-icon{ width:4rem; }
}

.panel-icon span{
  display: block;
  position: relative;
}

.panel-icon span::before,
.panel-icon span::after{
  content:'';
  width:1.6rem;
  height:3px;
  background-color:var(--color-prime);
  position: absolute;
  top:1rem;
  left:50%;
  translate:-50% 0;
  transition: rotate var(--tl) ease-in-out var(--tl);
}

@media (max-width:768px) {
  .panel-icon span::before,
  .panel-icon span::after{ width:1.4rem;}
}

.panel-icon span::after{rotate:90deg;}

.panel.active .panel-icon span::after{
  rotate:135deg;
  transition-delay:calc(var(--tl) * .5);
}
.panel.active .panel-icon span::before{
  rotate:-135deg;
  transition-delay:calc(var(--tl) * .5);
}


/* Panel Content */

.panel-content{
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  overflow: hidden;
  transition: grid-template-rows var(--tl) var(--tt);
}


.panel.active .panel-content{
  grid-template-rows: 1fr;
  overflow: visible;
}

.panel-content-inner{
  min-height:0;
  visibility: hidden;
  opacity: 0;
  transition: margin, visibility, opacity, transform;
  transition-duration: var(--tl);
  transition-timing-function: var(--tt);
  transition-delay: .2s;
  translate:0 -1.25rem;
}

.panel.spacer-top .panel-content-inner{
  translate:0 -3rem;
}

.panel.active .panel-content-inner{
  margin:1.25rem 0 4rem 0;
  visibility: visible;
  opacity: 1;
  transition-delay: .4s;
  translate:0 0 !important;
}

.panel.spacer-top.active .panel-content-inner{
  margin-top:3rem;
}

.panel:not(.active) img{opacity:0;}


/* ------- Content Sections ---------- */

.gap-row{ gap:4rem 0; }
.gap-row-medium{ gap:3rem 0; }
.gap-row-narrow{ gap:2rem 0; }


@media (min-width:992px){
.content-left-inner .copy-text{ max-width:47ch; }
}

.content-left-img img{
  object-fit:cover;
  margin-top:5rem;
}


@media (max-width:1299px) {
  .content-left-img img{
    aspect-ratio:.85;
    margin-top:4rem;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@media (max-width:1099px) {
  .content-left-img img{
    aspect-ratio:.75;
  }
}

@media (min-width:992px){
  .content-right-inner{padding-left:min(2.1vw,1.5rem);}
}

.content-right-img,
.content-right-heading{
  margin-top:4rem;
}

@media (max-width:991px) {
.content-right-heading{ margin-top:2rem; }
}

.content-right-heading h3{
  font-size:1.6rem;
  line-height:1.3;
  margin-bottom:0;
  max-width: 35ch;
}

/* ---- Kontakt ---- */

.kontakt-img{margin-top:3rem;}
@media (min-width:768px){
  .kontakt-img{margin:3rem -2rem 0 -2rem;}
}

@media (max-width:600px){
.kontakt-img img{
  aspect-ratio:1.5;
  object-fit: cover;
}
}

.section-kontakt{ margin: 2.5rem 0 3rem 0; }
.section-kontakt > .row{ gap:2.5rem 0; }

.kontakt-item-head{
  font-size:1.7rem;
  margin-bottom: .65em;
}
.kontakt-item-desc{line-height: 1.35;}
.kontakt-item-role{color:var(--color-accent); }

.kontakt-item a:hover{
  text-underline-offset:.1em;
  text-decoration-color: var(--color-accent);
}


.kontakt-item-img{ max-width:350px;}
@media (max-width:1024px){ .kontakt-item-img{ max-width:300px;}  }
@media (max-width:767px){ .kontakt-item-img{ max-width:230px;}  }

.kontakt-item-img img{
  margin-top:8px;
  mix-blend-mode: multiply;
}


.kontakt-sep > div{
  background-color: var(--color-accent);
  height:100%;
  width: 2px;
  margin:0 var(--spacing);
  --spacing:5.25vw;
  transition: margin .2s linear;
}

@media (max-width:1299px){
  .kontakt-sep > div{ --spacing:4.5vw; }
}
@media (max-width:1199px){
  .kontakt-sep > div{ --spacing:3vw; }
}
@media (max-width:1024px){
  .kontakt-sep-2{ display:none !important; }
  .kontakt-item:last-child{flex: 0 0 100%;}
  .section-kontakt .col-sm-auto{flex-grow:1;}
}

@media (max-width:575px){
  .kontakt-item-2{
    padding-top:1rem;
    position: relative;
  }
  .kontakt-item-2::before{
    content: '';
    position: absolute;
    top:-.75rem;
    left:0;
    width:100%;
    border-top:1px solid var(--color-accent);
  }
}


/*--- Listen ---- */

ul, ol{
 list-style: none;
 margin:0;
 padding:0;
}

.list-wrapper{ max-width:57ch; }

@media (min-width:992px){
  .list-wrapper{ max-width:500px; }
}

.step-list li{
  font-size:1.15rem;
  line-height:1.4;
  font-family:var(--font-demi);
  font-weight:400;
  margin-bottom:1.5rem;
  padding-left:3.2rem;
  position: relative;
}

.step-list li:last-child{margin-bottom:0;}

ul.step-list li::before{
  content:'';
  position: absolute;
  top:-.15em;
  left:0;
  width:2rem;
  height:2rem;
  background-color:var(--color-accent);
  -webkit-mask:var(--icon) no-repeat center/cover;
  mask:var(--icon) no-repeat center/cover;
  --icon:url('inc/assets/icon-arr.svg');
}


/* --- Impressum --- */

.page-template-imprint #intro{ padding:2.5rem 0; }

.imprint-content p{
  font-family:var(--font-book);
  font-weight:400;
  max-width:64ch;
}

.dse-content .imprint-left p{max-width:40ch;}

.imprint-left h4{margin-bottom:1em;}
.imprint-left hr{
  max-width:20%;
  background-color: var(--color-gray);
  margin:2rem 0;
}

.imprint-right h4{margin-bottom:.35em; max-width: 36ch;}
.imprint-right p{font-size:.95rem;}
.imprint-right p:not(:last-child){margin-bottom:1.4rem;}
.imprint-right p:not(:last-child):has(+ h4){margin-bottom:1.75rem;}

.imprint-right a{
  font-family:var(--font-medium);
  font-weight:500;
}

.imprint-right ul{
  margin-bottom:1.45rem;
  list-style: disc;
  padding-left:1.5rem;
  max-width:64ch;
  font-size:.95rem;
}
.imprint-right ul:has(+ h4){margin-bottom:1.75rem;}

.imprint-right li{
  font-family:var(--font-book);
  font-weight:400;
}
.imprint-right li:not(:last-child){margin-bottom:.55em}
.imprint-right li::marker{color:var(--color-accent);}

/* ---- Footer ---- */

footer{
  background-color: var(--color-accent);
  padding:1.1rem 0 1rem 0;
  font-family:var(--font-demi);
  font-weight:400;
  color:#fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-template-imprint footer{
  margin-top:10rem;
}

@media (min-width:768px){
  footer{
    margin-left:-2rem;
    margin-right:-2rem;
    padding:1.1rem 2rem 1rem 2rem;
  }
}

footer a, footer a:hover, footer a:focus{color:#fff;}
footer a:hover{ text-decoration-color: currentColor; }

footer .row{ gap:15px 0; }
footer ul{ gap:.5em 1.5em; }

@media (max-width:450px) {
  footer ul li:first-child{
    width:100%;
    order:1;
  }
}

/* --- Scroll Animation ----*/

.scroll-animation{
  transition: transform, opacity;
  transition-duration: var(--t,.5s);
  transition-delay: 0s;
  transition-timing-function: ease-in-out;
  --t:.5s;
  --td:calc(var(--t,.5s) * .5);
}

.scroll-animation.appear,
.scroll-animation.fade-up,
.scroll-animation.fade-down,
.scroll-animation.fade-left,
.scroll-animation.fade-right,
.scroll-animation.scale-up,
.scroll-animation.scale-down{
  opacity:0;
  transition-duration: 0s;
  transform: translate(var(--x,0),var(--y,0)) scale(var(--z,1));
}

.scroll-animation.appear{}
.scroll-animation.fade-up{ --y:4.5rem; }
.scroll-animation.fade-down{ --y:-3.5rem; }
.scroll-animation.fade-left{ --x:4.5rem; }
.scroll-animation.fade-right{ --x:-4.5rem; }
.scroll-animation.scale-up{ --z:.85; }
.scroll-animation.scale-down{ --z:1.2; }