/* ============================================================
   landing.css — Landing Page Sections
   ============================================================ */

/* ══════════════════════════════
   LOADER
══════════════════════════════ */
#loader {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      var(--color-bg-dark);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.1em;
  transition:      opacity  0.6s var(--ease),
                   visibility 0.6s var(--ease);
}

#loader.done {
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
}

.loader__schimmel {
  position:       absolute;
  bottom:         80px;
  left:           -220px;
  width:          200px;
  height:         auto;
  opacity:        0;
  pointer-events: none;
  animation:      schimmelRide 6s cubic-bezier(0.3, 0, 0.7, 1) 0.2s forwards;
}

@keyframes schimmelRide {
  0%   { left: -220px; opacity: 0; }
  8%   { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { left: calc(100% + 220px); opacity: 0; }
}

.loader__content {
  text-align: center;
  opacity:    0;
  transform:  translateY(24px);
  animation:  loaderIn 0.7s var(--ease) 0.1s forwards;
}

.loader__name {
  font-family:    var(--font-head);
  font-size:      clamp(2rem, 6vw, 5rem);
  font-weight:    700;
  color:          var(--color-text-inv);
  letter-spacing: -0.02em;
  line-height:    1.1;
  margin-bottom:  0.75rem;
}

.loader__sub {
  font-family:    var(--font-head);
  font-size:      clamp(0.7rem, 2vw, 1rem);
  font-weight:    400;
  color:          var(--color-accent-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@keyframes loaderIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero {
  min-height:  100vh;
  padding-top: var(--nav-h);
  display:     flex;
  align-items: center;
  position:    relative;
  overflow:    hidden;
  border-bottom: 2px solid var(--color-orange);
}

.hero__parallax-bg {
  position:         absolute;
  inset:            -10%;
  background-image: url('../images/hero-bg.webp');
  background-size:  cover;
  background-position: center;
  opacity:          0.07;
  will-change:      transform;
}

.hero__geo {
  position:     absolute;
  right:        -6vw;
  top:          50%;
  transform:    translateY(-50%);
  width:        52vw;
  height:       52vw;
  max-width:    680px;
  max-height:   680px;
  border:       1px solid var(--color-accent-light);
  border-radius: 50%;
  pointer-events: none;
  will-change:  transform;
}

.hero__geo--inner {
  position:     absolute;
  right:        9vw;
  top:          50%;
  transform:    translateY(-50%);
  width:        18vw;
  height:       18vw;
  max-width:    240px;
  max-height:   240px;
  background:   var(--color-accent-pale);
  border-radius: 50%;
  pointer-events: none;
  will-change:  transform;
}

.hero__vline {
  position:       absolute;
  left:           50%;
  top: 0; bottom: 0;
  width:          1px;
  background:     var(--color-line);
  opacity:        0.35;
  pointer-events: none;
}

.hero__content {
  position:   relative;
  z-index:    2;
  max-width:  640px;
  padding:    6rem 0;
}

.hero__label {
  margin-bottom: var(--space-md);
  opacity:       0;
  animation:     fadeUp 0.7s var(--ease) 0.8s forwards;
}

.hero__headline {
  font-family:    var(--font-head);
  font-size:      clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight:    700;
  line-height:    1.03;
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-md);
  opacity:        0;
  animation:      fadeUp 0.7s var(--ease) 1s forwards;
}

.hero__headline em {
  font-style: normal;
  color:      var(--color-accent);
}

.hero__body {
  font-size:     var(--text-md);
  color:         var(--color-text-muted);
  max-width:     480px;
  margin-bottom: var(--space-lg);
  font-style:    italic;
  line-height:   1.85;
  opacity:       0;
  animation:     fadeUp 0.7s var(--ease) 1.15s forwards;
}

.hero__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  flex-wrap:   wrap;
  opacity:     0;
  animation:   fadeUp 0.7s var(--ease) 1.3s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ══════════════════════════════
   TICKER
══════════════════════════════ */
.ticker {
  background:    var(--color-orange);
  border-top:    1px solid var(--color-orange);
  border-bottom: 1px solid var(--color-orange);
  padding:       0.85rem 0;
  overflow:      hidden;
}

.ticker__track {
  display:    flex;
  align-items: center;
  width:       max-content;
  animation:   ticker 28s linear infinite;
}

.ticker__track:hover {
  animation-play-state: paused;
}

.ticker__item {
  font-family:    var(--font-head);
  font-size:      var(--text-2xs);
  font-weight:    700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-text-inv);
  white-space:    nowrap;
  padding:        0 2.5rem;
}

.ticker__item--accent {
  color:   var(--color-bg-dark);
  opacity: 0.5;
}

@keyframes ticker {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════
   KINETIC TYPOGRAPHY
══════════════════════════════ */
.kinetic {
  padding:    5rem 0 4rem;
  border-bottom: 1px solid var(--color-line);
  overflow:   hidden;
  position:   relative;
  user-select: none;
}

.kinetic__row {
  display:     flex;
  align-items: center;
  white-space: nowrap;
  overflow:    hidden;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.kinetic__text {
  font-family:  var(--font-head);
  font-weight:  700;
  letter-spacing: var(--tracking-tight);
  white-space:  nowrap;
  display:      inline-block;
  will-change:  transform;
}

.kinetic__row--lg .kinetic__text {
  font-size: clamp(3.5rem, 8vw, 7rem);
  color:     var(--color-text);
}

.kinetic__row--outline .kinetic__text {
  font-size:          clamp(3.5rem, 8vw, 7rem);
  color:              transparent;
  -webkit-text-stroke: 1px var(--color-line);
}

.kinetic__row--accent .kinetic__text {
  font-size:      clamp(1.8rem, 4vw, 3.5rem);
  color:          var(--color-accent);
  font-weight:    300;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════
   IMAGEFILM
══════════════════════════════ */
.film {
  padding:       var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-line);
}

.film__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         var(--space-2xl);
  align-items: center;
}

.film__label {
  margin-bottom: var(--space-sm);
}

.film__headline {
  font-family:    var(--font-head);
  font-size:      var(--text-2xl);
  font-weight:    700;
  line-height:    1.15;
  margin-bottom:  var(--space-md);
  letter-spacing: -0.01em;
}

.film__body {
  color:       var(--color-text-muted);
  font-style:  italic;
  line-height: 1.85;
}

.film__player {
  position:   relative;
  background: var(--color-bg-dark);
  aspect-ratio: 16/9;
  cursor:     pointer;
  overflow:   hidden;
}

.film__poster {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.82;
  transition: opacity 0.3s var(--ease);
}

.film__player:hover .film__poster {
  opacity: 0.65;
}

.film__play {
  position: absolute;
  inset:    0;
  display:  flex;
  align-items:     center;
  justify-content: center;
}

.film__play-btn {
  width:        72px;
  height:       72px;
  border:       2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  display:      flex;
  align-items:  center;
  justify-content: center;
  transition:   background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                transform    var(--duration) var(--ease);
}

.film__player:hover .film__play-btn {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  transform:    scale(1.08);
}

.film__play-icon {
  width:  0;
  height: 0;
  border-top:    11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left:   18px solid var(--color-text-inv);
  margin-left:   4px;
}

/* ══════════════════════════════
   TEASER BILD
══════════════════════════════ */
.teaser__img-wrap {
  width:         100%;
  aspect-ratio:  4/3;
  overflow:      hidden;
  margin-bottom: var(--space-md);
}
.teaser__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s var(--ease);
}
.teaser:hover .teaser__img {
  transform: scale(1.04);
}

/* ══════════════════════════════
   TEASERS
══════════════════════════════ */
.teasers {
  padding:       var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-line);
}

.teasers__header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  margin-bottom:    var(--space-xl);
  padding-bottom:   var(--space-md);
  border-bottom:    1px solid var(--color-line);
}

.teasers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.teaser {
  padding:          var(--space-xl) var(--space-lg);
  border-right:     1px solid var(--color-line);
  display:          flex;
  flex-direction:   column;
  position:         relative;
  overflow:         hidden;
}

.teaser:last-child {
  border-right: none;
}

/* Hover fill from bottom */
.teaser::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       var(--color-accent-pale);
  transform:        scaleY(0);
  transform-origin: bottom;
  transition:       transform 0.35s var(--ease);
  z-index:          0;
}

.teaser:hover::before {
  transform: scaleY(1);
}

.teaser > * {
  position: relative;
  z-index:  1;
}

.teaser__top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   var(--space-lg);
}

.teaser__badge {
  font-family:    var(--font-head);
  font-size:      var(--text-2xs);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:     var(--color-accent);
  color:          var(--color-text-inv);
  padding:        0.25rem 0.6rem;
  line-height:    1.4;
  white-space:    nowrap;
}

.teaser__title {
  font-family:    var(--font-head);
  font-size:      var(--text-xl);
  font-weight:    700;
  line-height:    1.15;
  margin-bottom:  var(--space-sm);
  letter-spacing: -0.01em;
}

.teaser__body {
  color:         var(--color-text-muted);
  font-size:     var(--text-sm);
  line-height:   1.85;
  flex:          1;
  margin-bottom: var(--space-lg);
}

.teaser__link {
  font-family:    var(--font-head);
  font-size:      var(--text-2xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-accent);
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  transition:     gap var(--duration) var(--ease);
}

.teaser__link:hover {
  gap: 1rem;
}

.teaser__link::after {
  content: "→";
}

/* ══════════════════════════════
   ABOUT TEASER
══════════════════════════════ */
.about-teaser {
  padding:       var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-line);
}

.about-teaser__inner {
  display:     grid;
  grid-template-columns: 1fr 1.3fr;
  gap:         var(--space-2xl);
  align-items: center;
}

.about-teaser__img-wrap {
  position: relative;
}

.about-teaser__img {
  width:       100%;
  aspect-ratio: 3/4;
  object-fit:  cover;
  display:     block;
}

/* Bauhaus-Quadrat als Deko-Element */
.about-teaser__square {
  position:  absolute;
  bottom:    -2rem;
  left:      -2rem;
  width:     8rem;
  height:    8rem;
  border:    1px solid var(--color-accent);
  z-index:   -1;
}

.about-teaser__label {
  margin-bottom: var(--space-sm);
}

.about-teaser__headline {
  font-family:    var(--font-head);
  font-size:      var(--text-3xl);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom:  0.4rem;
}

.about-teaser__sub {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    400;
  color:          var(--color-accent);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom:  var(--space-lg);
}

.about-teaser__divider {
  height:     1px;
  background: var(--color-line);
  margin:     var(--space-md) 0;
}

.about-teaser__body {
  color:         var(--color-text-muted);
  font-style:    italic;
  line-height:   1.85;
  margin-bottom: var(--space-lg);
}

/* ══════════════════════════════
   CTA BLOCK
══════════════════════════════ */
.cta-block {
  background:  var(--color-bg-dark);
  padding:     var(--space-2xl) 0;
  border-top:  3px solid var(--color-orange);
}

.cta-block__inner {
  display:     grid;
  grid-template-columns: 1fr auto auto;
  gap:         var(--space-2xl);
  align-items: center;
}

.cta-block__img-wrap {
  width:         200px;
  flex-shrink:   0;
}

.cta-block__img {
  width:        100%;
  aspect-ratio: 3/4;
  object-fit:   cover;
  display:      block;
  opacity:      0.85;
  filter:       grayscale(20%);
  transition:   opacity .3s, filter .3s;
}

.cta-block__img:hover {
  opacity: 1;
  filter:  grayscale(0%);
}

@media (max-width: 1024px) {
  .cta-block__img-wrap { display: none; }
  .cta-block__inner { grid-template-columns: 1fr auto; }
}

.cta-block__headline {
  font-family:    var(--font-head);
  font-size:      var(--text-2xl);
  font-weight:    700;
  color:          var(--color-text-inv);
  line-height:    1.15;
  margin-bottom:  var(--space-sm);
}

.cta-block__body {
  color:       #777;
  font-style:  italic;
  line-height: 1.85;
  max-width:   500px;
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.footer {
  background:   var(--color-bg-dark);
  border-top:   1px solid var(--color-line-dark);
  padding:      var(--space-xl) 0 var(--space-lg);
}

.footer__inner {
  display:     grid;
  grid-template-columns: 1fr auto;
  gap:         var(--space-xl);
  align-items: start;
  margin-bottom:  var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom:  1px solid var(--color-line-dark);
}

.footer__brand {
  font-family:    var(--font-head);
  font-size:      var(--text-lg);
  font-weight:    700;
  color:          var(--color-text-inv);
  letter-spacing: var(--tracking-wide);
  margin-bottom:  0.4rem;
}

.footer__tagline {
  font-size:  var(--text-sm);
  color:      #555;
  font-style: italic;
}

.footer__nav {
  display:   flex;
  gap:       var(--space-md);
  flex-wrap: wrap;
}

.footer__nav a {
  font-family:    var(--font-head);
  font-size:      var(--text-2xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          #555;
  transition:     color var(--duration) var(--ease);
}

.footer__nav a:hover {
  color: var(--color-text-inv);
}

.footer__nav a.accent {
  color: var(--color-accent);
}

.footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--text-xs);
  color:     var(--color-text-dark);
}

.footer__legal {
  display: flex;
  gap:     var(--space-md);
}

.footer__legal a {
  font-size:  var(--text-xs);
  color:      var(--color-text-dark);
  transition: color var(--duration) var(--ease);
}

.footer__legal a:hover {
  color: var(--color-text-inv);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .film__inner         { grid-template-columns: 1fr; }
  .about-teaser__inner { grid-template-columns: 1fr; }
  .about-teaser__img   { aspect-ratio: 4/3; }
  .cta-block__inner    { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer__inner       { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .teasers__grid  { grid-template-columns: 1fr; }
  .teaser         { border-right: none; border-bottom: 1px solid var(--color-line); }
  .teaser:last-child { border-bottom: none; }
  .hero__geo, .hero__geo--inner, .hero__vline { display: none; }
  .footer__bottom { flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
  .kinetic__row--lg .kinetic__text,
  .kinetic__row--outline .kinetic__text { font-size: clamp(2.5rem, 10vw, 5rem); }
}