/* Optimierte CSS-Version mit besserer Struktur und Performance */

/* Font-Definitionen */
@font-face {
  font-family: "TradeGothicLTStd";
  src: url("../fonts/TradeGothicLTStd-Bd2.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "TradeGothic";
  src: url("../fonts/TradeGothic.woff") format("woff");
  font-display: swap;
}

/* Reset und Base Styles */
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: "Roboto Slab", serif;
  overflow: hidden;
}

/* Container */
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #ffffff;
}

#container div {
  position: absolute;
}

/* Utility Classes */
.hide {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

/* Varianten für verschiedene Hide-Szenarien */
.hide-visually {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hide-opacity {
  opacity: 0;
  pointer-events: none;
}

.show {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

/* Layout Components */
.bg {
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  background: #e0bc7f;
  z-index: 1;
}

.produkt {
  left: 0;
  top: 0;
  z-index: 2;
}

.logo {
  left: 0;
  top: 0;
  z-index: 4;
}

/* Text Styles - Gemeinsame Eigenschaften */
.headline-1,
.headline-2 {
  left: 77px;
  width: 1237px;
  height: 170px;
  font-family: "TradeGothicLTStd", sans-serif;
  font-size: 135px;
  letter-spacing: -5px;
  overflow: hidden;
  z-index: 4;
}

.headline-1 {
  top: 75px;
  color: #e0bc7f;
}

.headline-2 {
  top: 221px;
  color: #f8f6ea;
}

.subline,
.legal {
  left: 85px;
  width: 524px;
  font-family: "TradeGothic", sans-serif;
  letter-spacing: -2px;
  color: #f8f6ea;
  overflow: hidden;
  z-index: 4;
}

.subline {
  top: 367px;
  height: 210px;
  font-size: 42px;
}

.legal {
  top: 989px;
  height: 100px;
  font-size: 25px;
}

/* Kreis Components - Gemeinsame Eigenschaften */
.kreis-1-bg,
.kreis-2-bg {
  height: 435px;
  width: 435px;
  background-color: #e0bc7f;
  border-radius: 50%;
  z-index: 4;
}

.kreis-1-bg {
  left: 175px;
  top: 496px;
}

.kreis-2-bg {
  left: 1397px;
  top: 222px;
}

/* Kreis Text Styles - Gemeinsame Eigenschaften */
.kreis-1-txt-1,
.kreis-1-txt-4,
.kreis-2-txt-1,
.kreis-2-txt-4 {
  width: 290px;
  height: 75px;
  font-family: "TradeGothic", sans-serif;
  color: #3c4455;
  text-align: center;
  font-weight: 700;
  overflow: hidden;
  text-transform: uppercase;
  z-index: 5;
}

.kreis-1-txt-1,
.kreis-2-txt-1 {
  font-size: 44px;
}

.kreis-1-txt-4,
.kreis-2-txt-4 {
  font-size: 42px;
  letter-spacing: -2px;
}

/* Kreis 1 Spezifische Positionen */
.kreis-1-txt-1 {
  left: 206px;
  top: 534px;
}

.kreis-1-txt-2 {
  left: 259px;
  top: 596px;
  font-family: "TradeGothicLTStd", sans-serif;
  font-size: 276px;
  letter-spacing: -5px;
  color: #f8f6ea;
  text-align: right;
  font-weight: 700;
  z-index: 5;
}

.kreis-1-txt-3 {
  left: 386px;
  top: 558px;
  font-family: "TradeGothic", sans-serif;
  font-size: 100px;
  letter-spacing: 1px;
  color: #f8f6ea;
  font-weight: 700;
  z-index: 5;
}

.kreis-1-txt-4 {
  left: 284px;
  top: 822px;
}

/* Kreis 2 Spezifische Positionen */
.kreis-2-txt-1 {
  left: 1428px;
  top: 260px;
}

.kreis-2-txt-2 {
  left: 1481px;
  top: 322px;
  font-family: "TradeGothicLTStd", sans-serif;
  font-size: 276px;
  letter-spacing: -5px;
  color: #f8f6ea;
  text-align: right;
  font-weight: 700;
  z-index: 5;
}

.kreis-2-txt-3 {
  left: 1608px;
  top: 284px;
  font-family: "TradeGothic", sans-serif;
  font-size: 100px;
  letter-spacing: 1px;
  color: #f8f6ea;
  font-weight: 700;
  z-index: 5;
}

.kreis-2-txt-4 {
  left: 1506px;
  top: 548px;
}

#videos {
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 100%;
}

.video.contain {
  object-fit: contain;
}

.video.cover {
  object-fit: cover;
}