/* Screen Sizes https://tailwindcss.com/docs/responsive-design
xs	25rem (400px)	@media (width >= 40rem) { ... }
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }
*/
/* 
only for stuff which is easier to write in sass than tailwind

@include lg() {}

*/
:root {
  --height-navbar: 64px;
  --height-navbar-logo: 24px;
  --height-navbar-sticky: 48px;
}
@media (width >= 40rem) {
  :root {
    --height-navbar-logo: 40px;
  }
}
@media (width >= 48rem) {
  :root {
    --height-navbar: 80px;
    --height-navbar-sticky: 64px;
  }
}
@media (width >= 80rem) {
  :root {
    --height-navbar: 112px;
    --height-navbar-sticky: 96px;
  }
}

body, .navbar, .header-video {
  max-width: 2400px;
  margin-inline: auto;
}

.highlight-text-petrol .text-primary {
  color: var(--color-petrol);
}

.colored-col.has-bg-petrol .text-primary {
  color: var(--color-petrol);
}
.colored-col.has-bg-sand .text-primary {
  color: var(--color-sand);
}

main {
  z-index: 1;
  overflow: hidden;
}

.spacer.h-navbar {
  flex-shrink: 0;
}

.navbar-toggle .bar {
  --height: 3px;
  height: var(--height);
}

.navbar-toggle .bar-1 {
  transform: translateY(calc(var(--height) * -2));
}
@media (width >= 64rem) {
  .navbar-toggle .bar-1 {
    transform: translateY(calc(var(--height) * -4));
  }
}

.navbar-toggle .bar-3 {
  transform: translateY(calc(var(--height) * 2));
}
@media (width >= 64rem) {
  .navbar-toggle .bar-3 {
    transform: translateY(calc(var(--height) * 4));
  }
}

body.home .spacer-main {
  display: none;
}

.layout-section:last-child {
  margin-bottom: 0 !important;
}

h1 em, h2 em, h3 em, h4 em {
  font-style: normal;
  font-weight: 300;
}

.btn-text {
  flex-direction: row-reverse;
  color: var(--color-primary);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 2px;
}
.btn-text .arrow {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 2px;
  margin: 5px 0;
  border-radius: 9999px;
  background-color: var(--color-primary);
  transition: width 0.4s;
}
.btn-text .arrow::before, .btn-text .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 8px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--color-primary);
  transform-origin: calc(100% - 1px) 50%;
}
.btn-text .arrow::before {
  transform: rotate(45deg);
}
.btn-text .arrow::after {
  transform: rotate(-45deg);
}
.btn-text:hover {
  color: var(--color-textColor);
}
.btn-text:hover .arrow {
  width: 48px;
  background-color: var(--color-textColor);
}
.btn-text:hover .arrow::before, .btn-text:hover .arrow::after {
  background-color: var(--color-textColor);
}

.bg-sand .writer .text-primary {
  color: var(--color-cream);
}

.header-title-wrp .content {
  background-image: url(../gfx/standort-title-bg.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  background-blend-mode: multiply;
}

.anwalt-sticky-content::before {
  content: "";
  width: 1000px;
  left: -999px;
  position: absolute;
  height: 100%;
  top: 0;
}

.anwalt-details-content::after {
  content: "";
  width: 1000px;
  right: -999px;
  position: absolute;
  height: 100%;
  top: 0;
  background-color: var(--color-cream);
}

.topic-column-title {
  border-bottom-color: var(--color-primary);
}

.theme-default .header-title-wrp .content {
  background-color: var(--color-primary);
}
.theme-default .fond {
  background-color: var(--color-sand);
}
.theme-default .anwalt-sticky,
.theme-default .anwalt-sticky-content,
.theme-default .anwalt-sticky-content::before {
  background-color: var(--color-sand);
}

.theme-sand .header-title-wrp .content {
  background-color: var(--color-sand);
}
.theme-sand .fond {
  background-color: var(--color-petrol);
}
.theme-sand .anwalt-sticky,
.theme-sand .anwalt-sticky-content,
.theme-sand .anwalt-sticky-content::before {
  background-color: var(--color-petrol);
}
.theme-sand .topic-column-title {
  border-bottom-color: var(--color-sand);
}

.theme-petrol .header-title-wrp .content {
  background-color: var(--color-petrol);
}
.theme-petrol .fond {
  background-color: var(--color-primary);
}
.theme-petrol .anwalt-sticky,
.theme-petrol .anwalt-sticky-content,
.theme-petrol .anwalt-sticky-content::before {
  background-color: var(--color-primary);
}
.theme-petrol .topic-column-title {
  border-bottom-color: var(--color-petrol);
}

.accordion-item:first-child {
  border-top: 2px solid var(--color-textColor);
}
.accordion-item:last-child {
  border-bottom: 2px solid var(--color-textColor);
}
.accordion-item .writer p + ul {
  margin-top: -0.5rem;
}
.accordion-item .writer ul li ul {
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
}
.accordion-item .writer ul:not(:last-child):not(:only-child) {
  margin-bottom: 1rem;
}

.accordion-button .acc-icon {
  --iconsize: 20px;
  --iconstroke: 4px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: var(--iconsize);
  height: var(--iconsize);
  margin-bottom: var(--iconstroke);
}
.accordion-button .acc-icon .bar {
  width: var(--iconsize);
  height: var(--iconstroke);
  background-color: currentColor;
}
.accordion-button .acc-icon .bar.hor {
  margin-top: var(--iconstroke);
}
.accordion-button .acc-icon .bar.vert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%) rotate(90deg);
  transition: all 0.4s;
}
.accordion-button.active .acc-icon .bar.vert {
  transform: translate(-50%) rotate(90deg) scale(0);
}

.footer-content h4 {
  color: var(--color-primary);
}
.footer-content h2 {
  color: var(--color-cream);
  text-transform: none;
  text-shadow: 4px 4px 8px var(--color-textColor);
}
.footer-content .btn-secondary {
  background-color: rgba(0, 0, 0, 0.5);
}
.footer-content .btn-secondary:hover {
  background-color: var(--color-textColor);
}

body.no-background .site-footer {
  background-color: var(--color-textColor);
}

.footer-menu-links .btn-text {
  color: var(--color-cream);
  text-transform: none;
  font-weight: bold;
  font-family: var(--font-copy);
  padding: 0 0.25rem;
}
.footer-menu-links .btn-text .arrow {
  display: none;
}
.footer-menu-links .btn-text:hover {
  text-decoration: underline;
}
.footer-menu-links .divider:last-child {
  display: none;
}

body.karriere .footer-karriere .btn {
  display: none;
}

@media (width < 40rem) {
  body.anwalt .anwalt-header .layout.container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.anwalt .footer-karriere {
  background-color: var(--color-textColor);
}
body.anwalt .footer-karriere .divider {
  display: none;
}

.anwalt-title-wrp .title ul li {
  margin-bottom: 0.125rem;
}

.feature .line {
  background-color: var(--color-primary);
  margin-top: -3px;
}

.feature-numbers .feature {
  background-color: rgba(255, 255, 255, 0.3);
  text-align: center;
  align-items: center;
  padding: 4rem 2rem;
  gap: 0;
}
.feature-numbers .feature .line {
  display: none;
}
.feature-numbers .feature .feature-title {
  font-size: var(--text-h1);
  justify-content: center;
  border-bottom: 4px solid var(--color-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.grid-item .feature {
  height: 100%;
}
.grid-item .feature .btn {
  margin-top: auto;
  margin-bottom: 2rem;
}
.grid-item:nth-child(3n+1) .feature .line {
  background-color: var(--color-primary);
}
.grid-item:nth-child(3n+2) .feature .line {
  background-color: var(--color-petrol);
}
.grid-item:nth-child(3n+3) .feature .line {
  background-color: var(--color-sand);
}

.article-list .article-card:nth-child(3n+1) .cover.placeholder {
  background-color: var(--color-primary);
}
.article-list .article-card:nth-child(3n+2) .cover.placeholder {
  background-color: var(--color-petrol);
}
.article-list .article-card:nth-child(3n+3) .cover.placeholder {
  background-color: var(--color-sand);
}

.swiper-slide.slide-width-auto {
  width: auto;
}

.topic-teaser {
  --teaser-bg: var(--color-primary);
  --teaser-text: var(--color-cream);
  width: 100%;
  height: 100%;
  background-color: var(--teaser-bg);
  color: var(--teaser-text);
}
.topic-teaser .topic-icon {
  color: var(--teaser-text);
}
.topic-teaser .btn-text {
  color: var(--teaser-text);
}
.topic-teaser .btn-text .arrow,
.topic-teaser .btn-text .arrow::before,
.topic-teaser .btn-text .arrow::after {
  background-color: var(--teaser-text);
}
.topic-teaser.theme-petrol {
  --teaser-bg: var(--color-petrol);
}
.topic-teaser.theme-sand {
  --teaser-bg: var(--color-sand);
  --teaser-text: var(--color-textColor);
}
.topic-teaser.theme-light {
  --teaser-bg: var(--color-cream);
  --teaser-text: var(--color-textColor);
}

.file-upload .input-type-icon {
  right: inherit;
  left: 1px;
}
.file-upload input[type=file] {
  align-items: center;
}
.file-upload input[type=file]::file-selector-button {
  background-color: var(--color-textColor);
  color: white;
  border-color: transparent;
  border-radius: 0;
  text-transform: uppercase;
  font-family: var(--font-copy);
  margin-right: 0.5rem;
  margin-left: 2.25rem;
  margin-top: -2px;
  padding: 0.25rem 0.5rem;
}
.file-upload input[type=file]::file-selector-button:hover {
  background-color: var(--color-primary);
  color: white;
}