@charset "UTF-8";
:root {
  --primary: hsl(0, 0%, 100%);
  --second: hsl(62, 87%, 43%);
  --bgColor: hsl(207, 59%, 7%);
  --textColor: hsl(0, 0%, 100%);
  --textColorBlack: hsl(0, 0%, 0%);
  --articleColor: hsla(0, 100%, 50%, 0.146);
  --universalColor: hsl(16, 57%, 45%);
  --divColor: hsla(225, 61%, 26%, 0.563);
  --borderGreen: hsl(134, 100%, 30%);
  --borderRed: hsl(0, 100%, 50%);
  --borderBlue: hsl(226, 62%, 50%);
}

/* ===== Base / Reset ===== */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
  background: hsl(220, 20%, 8%);
  color: hsl(40, 20%, 90%);
  line-height: 1.6;
}

h1,
h2,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
}

a {
  text-decoration: none;
  color: inherit;
}

section {
  padding: 6rem 0;
}

nav {
  position: fixed;
  width: 100%;
  z-index: 1000;
  border-bottom: 0.2px solid hsl(220, 15%, 20%);
  padding: 1rem 1.5rem;
  backdrop-filter: blur(10px);
  overflow: visible; /* damit größere Logos nicht abgeschnitten werden */
}
nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
}
nav ul li {
  margin-left: 2rem;
}
nav ul li a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: 0.3s;
}
nav ul li a:hover {
  background: linear-gradient(135deg, hsl(23, 67%, 48%), hsl(10, 75%, 51%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#juristic {
  padding-top: 6rem; /* Höhe der Navbar ausgleichen */
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 600px 1fr; /* 3 Spalten, mittlere Spalte fix für Inhalt */
  justify-items: center; /* mittlere Spalte horizontal zentrieren */
  overflow: hidden;
}
#juristic div {
  grid-column: 2; /* Alle Inhalte in die mittlere Spalte */
  text-align: left; /* Text linksbündig */
  margin: 1em 0;
  width: 100%;
}
#juristic h2 {
  margin-bottom: 0.7em;
  background: linear-gradient(135deg, hsl(23, 67%, 48%), hsl(10, 75%, 51%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#juristic ul {
  display: grid;
  list-style: none;
  font-weight: bold;
  font-style: oblique;
}

.text-gradient-red {
  background: linear-gradient(135deg, hsl(23, 67%, 48%), hsl(10, 75%, 51%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.line__accent {
  width: 64px;
  height: 2px;
  background: linear-gradient(135deg, hsl(28, 70%, 45%), hsl(35, 80%, 55%));
  margin: 0 auto 1rem;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: all 0.3s ease;
}

.btn--primary {
  background: linear-gradient(135deg, hsl(23, 67%, 48%), hsl(10, 75%, 51%));
  color: hsl(40, 20%, 95%);
  box-shadow: 0 20px 60px -15px rgba(255, 180, 50, 0.2);
}

.btn--primary:hover {
  opacity: 0.9;
}

.btn--secondary {
  border: 1px solid hsl(220, 15%, 20%);
  color: hsl(40, 20%, 90%);
}

.btn--secondary:hover {
  border-color: hsl(28, 70%, 45%);
  color: hsl(28, 70%, 45%);
}

.nav__item {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: auto;
  overflow: visible;
}
.nav__item a {
  display: flex;
  align-items: center;
}

.nav__logo {
  height: 4rem;
  max-width: 100%;
  width: auto;
}

.nav__title {
  font-size: clamp(1em, 4vw, 2em);
  font-weight: bold;
}

.nav__links {
  display: flex;
  gap: 2rem;
}

.nav__links a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(220, 10%, 55%);
  transition: color 0.3s;
}

.nav__links a:hover {
  color: linear-gradient(135deg, hsl(35, 80%, 55%), hsl(0, 100%, 50%));
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.hamburger div {
  width: 25px;
  height: 3px;
  background: white;
  transition: 0.3s;
}

.introduction {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.introduction__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 50%;
}

.introduction__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.introduction__content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  color: white;
}

.introduction__subtitle {
  font-size: clamp(0.9em, 1vw, 1.3em);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  background: linear-gradient(135deg, hsl(23, 67%, 48%), hsl(10, 75%, 51%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.introduction__title {
  font-size: clamp(2em, 5vw, 6em);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.introduction__text {
  font-size: clamp(1em, 1vw, 1.3em);
  margin-bottom: 2rem;
}

.introduction__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

#services {
  background: hsla(220, 15%, 18%, 0.3);
}

.services__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.service__card {
  background: hsl(220, 18%, 12%);
  border: 1px solid hsl(220, 15%, 20%);
  padding: 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.service__card h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1em, 1vw, 1.5em);
}
.service__card p {
  color: hsl(220, 10%, 55%);
  font-size: clamp(0.9em, 1vw, 1.1em);
}
.service__card img {
  background-color: orange;
  padding: 0.5rem; /* optional, für Abstand um Logo */
  border-radius: 0.25rem; /* optional, abgerundete Ecken */
  display: inline-block; /* verhindert, dass Hintergrund den ganzen Container ausfüllt */
  height: 3rem;
  margin-bottom: 15%;
}
.service__card:hover {
  box-shadow: 0 20px 60px -15px rgba(255, 180, 50, 0.2);
}

.services__subtitle {
  text-align: center;
  font-size: clamp(1em, 1vw, 1.5em);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  background: linear-gradient(135deg, hsl(35, 80%, 55%), hsl(0, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.services__title {
  text-align: center;
  font-size: clamp(1em, 5vw, 2.5em);
  margin-bottom: 2rem;
}

.gallery__subtitle {
  text-align: center;
  font-size: clamp(1em, 1vw, 1.5em);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  background: linear-gradient(135deg, hsl(35, 80%, 55%), hsl(0, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.gallery__title {
  text-align: center;
  font-size: clamp(1em, 5vw, 2.5em);
  margin-bottom: 2rem;
}

.gallery__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gallery__item {
  position: relative;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.7s;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s;
  pointer-events: none; /* Klicks "durchreichen" zum Bild darunter */
}

.gallery__item:hover .gallery__overlay {
  background: rgba(0, 0, 0, 0.5);
}

.gallery__label {
  font-size: clamp(0.8em, 1vw, 1em);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.5s;
  text-align: center;
  width: 100%;
}

.gallery__item:hover .gallery__label {
  transform: translateY(0);
}

.gallery__wrapper {
  position: relative;
  overflow: hidden;
}

.gallery__flex {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease;
}

.gallery__item {
  min-width: calc((100% - 2rem) / 3);
}

.gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
}

.gallery__btn.prev {
  left: 10px;
}

.gallery__btn.next {
  right: 10px;
}

.gallery__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 3%;
}

.gallery__link {
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  position: relative;
  padding-bottom: 5px;
}

.gallery__link.active {
  border-bottom: 2px solid white;
  opacity: 1;
}

.gallery__link {
  opacity: 0.6;
  transition: 0.3s;
}

.gallery__link:hover {
  opacity: 1;
}

.gallery__section {
  display: none;
  padding: 0;
  margin-bottom: 10em;
}

.gallery__section.active {
  display: block;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: cover;
  border-radius: 8px;
}

.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 1001;
}

.lightbox__btn.prev {
  left: 10px;
}

.lightbox__btn.next {
  right: 10px;
}

.lightbox__swipe {
  display: none;
  position: absolute;
  bottom: 20px;
  font-size: 0.9rem;
  color: white;
  text-align: center;
  width: 100%;
  opacity: 0.7;
}

.lightbox__counter {
  position: absolute;
  bottom: 50px; /* über Swipe-Hinweis */
  width: 100%;
  text-align: center;
  color: white;
  font-size: 1rem;
  opacity: 0.8;
  pointer-events: none;
}

.about__subtitle {
  text-align: center;
  font-size: clamp(1em, 1vw, 1.5em);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  background: linear-gradient(135deg, hsl(35, 80%, 55%), hsl(0, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.about__title {
  text-align: center;
  font-size: clamp(1em, 5vw, 2.5em);
  margin-bottom: 2rem;
}

#about {
  background: hsla(220, 15%, 18%, 0.3);
}

.about__text {
  margin: 0 auto 2rem auto;
  max-width: 700px;
  text-align: center;
  font-size: clamp(1.1em, 2vw, 1.1em);
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  border-top: 1px solid hsl(220, 15%, 20%);
  padding-top: 2rem;
}

.about__stats .value {
  text-align: center;
  font-size: clamp(2em, 5vw, 2.5em);
  background: linear-gradient(135deg, hsl(23, 67%, 48%), hsl(10, 75%, 51%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.about__stats .label {
  text-align: center;
  font-size: clamp(1em, 2vw, 1em);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(220, 10%, 55%);
}

.contact__subtitle {
  text-align: center;
  font-size: clamp(1em, 1vw, 1.5em);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  background: linear-gradient(135deg, hsl(35, 80%, 55%), hsl(0, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.contact__title {
  text-align: center;
  font-size: clamp(1em, 5vw, 2.5em);
  margin-bottom: 2rem;
}

.contact__item .label {
  font-size: clamp(1em, 2vw, 0.95em);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(220, 10%, 55%);
}

.contact__item .value {
  font-size: clamp(0.7em, 1vw, 2em);
  font-family: Arial, Helvetica, sans-serif;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto; /* zentriert horizontal */
  max-width: 50%;
}

.contact__item {
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

#footer {
  background: hsla(220, 15%, 18%, 0.3);
  border-top: 1px solid hsl(220, 15%, 20%);
  padding: 2.5rem 0;
  text-align: center;
  color: hsl(220, 10%, 55%);
  display: flex;
  flex-wrap: wrap; /* bei kleinen Bildschirmen umbrechen */
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.8rem;
  padding-left: 3%;
  padding-right: 3%;
}
#footer p {
  flex: 1 1 33%; /* 33% Breite */
  text-align: left;
  font-size: 1rem;
}
#footer li a {
  text-decoration: none;
  font-size: 1rem;
}
#footer ul {
  flex: 1 1 33%; /* 33% Breite */
  list-style: none;
}
#footer img {
  height: 3em;
  width: auto;
}
#footer .footer__juristic {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-left: auto;
  padding: 0;
}
#footer .footer__socials {
  display: flex;
  justify-content: center;
  gap: 2em;
}

/* raleway-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/raleway-v37-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/raleway-v37-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/raleway-v37-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/raleway-v37-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/playfair-display-v40-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/playfair-display-v40-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/playfair-display-v40-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/playfair-display-v40-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/playfair-display-v40-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@media screen and (max-width: 1200px) {
  #footer {
    display: grid;
    gap: 2em;
    place-items: center;
  }
  #footer img {
    height: 4rem;
  }
  #footer .footer__juristic {
    margin: auto;
  }
  #footer .footer__juristic li a {
    font-size: clamp(1em, 4vw, 1.3em);
  }
  #footer p {
    text-align: center;
  }
  nav {
    padding: 1%;
  }
  nav ul li {
    padding: 0;
    margin: 0;
  }
  nav ul .logo {
    font-size: clamp(1em, 2vw, 3em);
  }
  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(20, 20, 30, 0.95);
    padding: 1rem 0;
    gap: 1rem;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  .nav__links.is-open {
    display: flex;
  }
  .nav__links a {
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 500;
    color: hsl(40, 20%, 90%);
    padding: 0.5rem 1rem;
    width: 100%;
    text-align: center;
  }
  .nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    cursor: pointer;
  }
  .nav__hamburger div {
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 2px;
    transition: all 0.4s ease;
  }
  .nav__hamburger.active div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav__hamburger.active div:nth-child(2) {
    opacity: 0;
  }
  .nav__hamburger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  .introduction__title {
    font-size: clamp(4em, 10vw, 6em);
  }
  span {
    font-size: clamp(1em, 2vw, 3em);
  }
  #services {
    text-align: center;
  }
  .service__card p {
    font-size: clamp(0.8em, 5vw, 1em);
  }
  .contact__item .label {
    font-size: clamp(1em, 2vw, 1em);
  }
  .contact__item .value {
    font-size: clamp(1em, 2vw, 1em);
  }
  p {
    font-size: clamp(0.8em, 5vw, 1em);
  }
  .section__subtitle {
    font-size: clamp(0.8em, 5vw, 1em);
  }
}
@media (max-width: 768px) {
  .gallery__item {
    min-width: 100%;
    margin-bottom: 2em;
  }
  .gallery__flex {
    display: block;
  }
  #juristic {
    padding: 2em;
    padding-top: 6rem;
    display: block;
  }
  .contact__grid {
    display: block;
    max-width: 100%;
  }
  .introduction__content {
    padding: 2%;
  }
  .about__stats {
    display: block;
  }
  .about__stats div {
    padding-top: 10%;
  }
  .lightbox__btn {
    display: none;
  }
  .lightbox__swipe {
    display: block;
  }
}

/*# sourceMappingURL=styles.css.map */