/* sections.css — Über kfo media, Referenz, Kontakt, Footer */

/* ============================================================
   ÜBER KFO MEDIA
   ============================================================ */

#ueber {
  background-color: var(--cream);
  color: var(--dark);
  padding: var(--space-xl) 0;
}

#ueber .section-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

#ueber .eyebrow {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

#ueber .headline-l {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s 0.1s var(--ease-smooth),
              transform 0.8s 0.1s var(--ease-smooth);
}

#ueber .body-text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s 0.2s var(--ease-smooth),
              transform 0.8s 0.2s var(--ease-smooth);
}

#ueber.is-visible .eyebrow,
#ueber.is-visible .headline-l,
#ueber.is-visible .body-text {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   REFERENZ
   ============================================================ */

#referenz {
  background-color: var(--dark);
  color: var(--cream-light);
  padding: var(--space-xl) 0;
}

#referenz .section-inner {
  max-width: 1100px;
}

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

.referenz-visual {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.9s var(--ease-smooth),
              transform 0.9s var(--ease-smooth);
}

.referenz-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.9s 0.15s var(--ease-smooth),
              transform 0.9s 0.15s var(--ease-smooth);
}

#referenz.is-visible .referenz-visual,
#referenz.is-visible .referenz-text {
  opacity: 1;
  transform: translateX(0);
}

.screenshot-placeholder {
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(245, 240, 234, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

#referenz .eyebrow {
  color: var(--gold-light);
}

#referenz .eyebrow::before {
  background-color: var(--gold);
}

#referenz .tags .label {
  border-color: rgba(245, 240, 234, 0.3);
  color: var(--cream-light);
}

@media (max-width: 900px) {
  .referenz-grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .referenz-visual {
    transform: translateY(-16px);
  }

  .referenz-text {
    transform: translateY(16px);
  }

  #referenz.is-visible .referenz-visual,
  #referenz.is-visible .referenz-text {
    transform: translateY(0);
  }
}

/* ============================================================
   KONTAKT
   ============================================================ */

#kontakt {
  background-color: var(--dark-deep);
  color: var(--cream-light);
  padding: var(--space-m) 0 var(--space-s) 0;
}

#kontakt .section-inner {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

#kontakt .headline-l {
  color: var(--cream-light);
}

#kontakt .body-text {
  color: var(--cream-light);
  opacity: 0.7;
}

/* --- Formular --- */

#contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-top: var(--space-s);
}

.form-field {
  position: relative;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 240, 234, 0.25);
  color: var(--cream-light);
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 1rem;
  padding: 1.4rem 0 0.5rem;
  outline: none;
  resize: none;
  transition: border-color 0.3s var(--ease-smooth);
  cursor: none;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gold);
}

/* Floating Label */
.form-field label {
  position: absolute;
  top: 1.4rem;
  left: 0;
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-light);
  opacity: 0.4;
  pointer-events: none;
  transition: top 0.25s var(--ease-smooth),
              font-size 0.25s var(--ease-smooth),
              opacity 0.25s var(--ease-smooth);
}

/* Label schwebt nach oben wenn Feld Inhalt hat oder fokussiert ist */
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  top: 0.2rem;
  font-size: 0.5rem;
  opacity: 0.7;
  color: var(--gold-light);
}

/* Submit */
.btn-submit {
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  background-color: var(--gold);
  padding: 1em 2em;
  border: none;
  cursor: none;
  transition: background-color 0.3s var(--ease-smooth),
              transform 0.2s var(--ease-smooth);
  margin-top: var(--space-xs);
}

.btn-submit:hover {
  background-color: var(--gold-light);
}

.btn-submit:active {
  transform: scale(0.97);
}

/* Erfolgs-Nachricht */
#form-success {
  padding: var(--space-m) 0;
  color: var(--gold-light);
}

#form-success p {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Kontaktdaten unter Formular */
.kontakt-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(245, 240, 234, 0.1);
}

.kontakt-info a {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--cream-light);
  opacity: 0.6;
  transition: opacity 0.25s var(--ease-smooth);
}

.kontakt-info a:hover {
  opacity: 1;
}

.kontakt-info .label {
  color: var(--cream-light);
  opacity: 0.35;
}

/* ============================================================
   FOOTER
   ============================================================ */

#main-footer {
  background-color: var(--dark);
  color: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m) var(--space-m);
}

#main-footer .label {
  opacity: 0.3;
}

.footer-nav {
  display: flex;
  gap: var(--space-m);
}

.footer-nav a {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-light);
  opacity: 0.3;
  transition: opacity 0.25s var(--ease-smooth);
}

.footer-nav a:hover {
  opacity: 0.8;
}

@media (max-width: 600px) {
  #main-footer {
    flex-direction: column;
    gap: var(--space-s);
    text-align: center;
    padding: var(--space-l) var(--space-m);
  }
}