/* ==========================================================================
   craft.css — Craftsmanship & Philosophy
   Türkise Balken (gleicher Ton wie die übrigen Seiten), Video auf einer
   Seite, große Überschrift + Beschreibung auf der anderen. Balken
   wechseln sich ab (Video links / Video rechts).
   ========================================================================== */

:root {
  --craft-bg: #f2ede1;
  --craft-deep: #0097a9;
  --craft-gold: #e7c250;
  --craft-gold-light: #f5da8a;
  --craft-cream: #f2ede1;
}

.craftWrapper {
  padding-top: 90px;
  background: var(--craft-bg);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.craft-bar {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  background: var(--craft-deep);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  border-radius: 4px;
}

/* jeder zweite Balken: Video rechts statt links */
.craft-bar:nth-of-type(even) {
  flex-direction: row-reverse;
}

.craft-bar__media {
  flex: 1 1 45%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}

.craft-bar__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.craft-bar__text {
  flex: 1 1 55%;
  color: var(--craft-cream);
}

.craft-bar__text h2 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--craft-cream);
}

.craft-bar__rule {
  width: 42px;
  height: 1px;
  background: var(--craft-gold);
  margin: 0 0 1rem;
}

.craft-bar__text p {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.75;
  color: rgba(242, 237, 225, 0.85);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Mobil: gestapelt statt nebeneinander ---------- */

@media screen and (max-width: 860px) {
  .craft-bar,
  .craft-bar:nth-of-type(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    text-align: center;
  }

  .craft-bar__media {
    aspect-ratio: 16 / 10;
  }

  .craft-bar__rule {
    margin: 0 auto 1rem;
  }

  .craft-bar__text p {
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}