/**
 * Buach Section CSS
 * Teaser für buach.obersaxer-titsch.ch im Design «Tinte & Heu»
 */

/* ============================================
   Fonts (Fontsource, SIL Open Font License)
   ============================================ */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-narrow-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-narrow-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-narrow-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-narrow-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   Section
   ============================================ */
.buach {
  --buach-marker: #ffd23f;
  --buach-ink: #101c3f;
  --buach-font-display: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --buach-font-text: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
  --buach-border: 2px solid var(--buach-ink);
  --buach-focus-ring: 3px solid var(--buach-ink);
  --buach-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --buach-motion-slow: 400ms;
  --buach-wipe-duration: 900ms;
  --buach-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Nav: Logo 50px + Padding oben/unten (je 24px) + unterer Rand 2px */
  --buach-header-h: 6.25rem;
  --buach-more-space: calc(56px + clamp(1rem, 3vh, 2.25rem));

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100svh - var(--buach-header-h));
  height: calc(100svh - var(--buach-header-h));
  max-height: calc(100svh - var(--buach-header-h));
  padding: clamp(1rem, 3vh, 2.5rem) var(--space-md) var(--buach-more-space);
  background: var(--buach-marker);
  border-bottom: var(--buach-border);
  color: var(--buach-ink);
  font-family: var(--buach-font-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

html[data-buach-tw] #buach {
  background: var(--color-bg);
}

html[data-buach-tw] #buach::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--buach-marker);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  transition: transform var(--buach-wipe-duration) var(--buach-ease-out);
  will-change: transform;
}

html[data-buach-tw] #buach > .buach__panel {
  position: relative;
  z-index: 1;
}

html[data-buach-tw] #buach > .buach__more {
  z-index: 1;
}

html[data-buach-tw] #buach.buach--revealed::after {
  transform: scaleX(1);
}

html[data-buach-tw] #buach:not(.buach--revealed) .buach__stamp {
  visibility: hidden;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.buach p,
.buach h2 {
  margin: 0;
}

.buach a:focus-visible {
  outline: var(--buach-focus-ring);
  outline-offset: 3px;
}

/* ============================================
   Teaser-Panel
   ============================================ */
.buach__panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 44rem;
  min-height: 0;
}

.buach__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 2px minmax(0, 0.95fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
  width: 100%;
}

.buach__divider {
  background: var(--buach-ink);
}

.buach__divider--col {
  width: 2px;
  min-height: 100%;
}

.buach__divider--row {
  display: none;
  width: 100%;
  height: 2px;
}

.buach__col {
  display: grid;
  align-content: center;
  gap: clamp(0.5rem, 1.5vh, 1rem);
  min-width: 0;
}

.buach__col--detail {
  gap: clamp(0.75rem, 2vh, 1.25rem);
}

.buach__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.buach__brand-name {
  font-family: var(--buach-font-display);
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.buach__brand-tag {
  padding: 0.125rem 0.375rem;
  border: var(--buach-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.buach__headline {
  font-family: var(--buach-font-display);
  font-size: clamp(2rem, min(10vw, 9svh), 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.buach__headline .marker {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0 0.12em;
}

.buach__headline-br {
  display: none;
}

.buach__headline-br--mobile,
.buach__headline-br--desktop {
  display: none;
}

.tw-word {
  display: inline-block;
  white-space: nowrap;
}

.tw-c {
  display: inline-block;
}

.tw-cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.8em;
  margin-right: -0.06em;
  background: currentColor;
  vertical-align: -0.02em;
}

/*
 * Schreibmaschine: Head-Script setzt data-buach-tw="run", JS tippt danach.
 * Ohne JS: nach 5 s Failsafe (sichtbarer Titel + gelbe Section).
 */
@media (prefers-reduced-motion: no-preference) {
  html[data-buach-tw] .buach__headline .tw-c {
    visibility: hidden;
  }

  html[data-buach-tw='run'] .buach__headline .tw-c {
    animation: buach-tw-failsafe-show 0s linear 5s forwards;
  }

  html[data-buach-tw='run'] .buach__headline::before {
    content: '';
    display: inline-block;
    width: 0.06em;
    height: 0.8em;
    margin-right: -0.06em;
    background: currentColor;
    vertical-align: -0.02em;
    animation:
      buach-tw-blink 1s linear infinite,
      buach-tw-failsafe-hide 0s linear 5s forwards;
  }

  html[data-buach-tw] .buach__headline .marker {
    position: relative;
    isolation: isolate;
    background: transparent;
  }

  html[data-buach-tw] .buach__headline .marker::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--buach-marker);
    transform: scaleX(0);
    transform-origin: left center;
  }

  html[data-buach-tw='run'] .buach__headline .marker::before {
    animation: buach-tw-failsafe-sweep 0s linear 5s forwards;
  }

  html[data-buach-tw] .buach__headline.is-swept .marker::before {
    transform: scaleX(1);
    transition: transform var(--buach-motion-slow) var(--buach-ease-out);
  }

  html[data-buach-tw='run'] #buach::after {
    animation: buach-failsafe-fill var(--buach-wipe-duration) var(--buach-ease-out) 5s forwards;
  }

  html[data-buach-tw='run'] #buach:not(.buach--revealed) .buach__stamp {
    animation: buach-failsafe-show-stamp 0s linear 5s forwards;
  }
}

@keyframes buach-tw-blink {
  0%,
  49.9% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes buach-tw-failsafe-show {
  to {
    visibility: visible;
  }
}

@keyframes buach-tw-failsafe-hide {
  to {
    opacity: 0;
  }
}

@keyframes buach-tw-failsafe-sweep {
  to {
    transform: scaleX(1);
  }
}

@keyframes buach-failsafe-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes buach-failsafe-show-stamp {
  to {
    visibility: visible;
    height: auto;
  }
}

.buach__stamp {
  display: inline-block;
  width: fit-content;
  margin-top: 0.2em;
  padding: 0.08em 0.28em 0.12em;
  background: var(--buach-ink);
  color: var(--buach-marker);
  font-size: 0.92em;
  line-height: 1.05;
  transform: rotate(-2.5deg);
}

.buach__lede {
  font-size: clamp(0.9375rem, min(2.8vw, 2svh), 1.125rem);
  line-height: 1.4;
}

.buach__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0;
  border-top: none;
}

.buach__url,
.buach__tap {
  color: var(--buach-ink);
  text-decoration: none;
}

.buach__url {
  font-weight: 700;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  overflow-wrap: anywhere;
}

.buach__tap {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  font-size: 1rem;
  font-weight: 400;
}

@media (hover: hover) {
  .buach__url:hover,
  .buach__tap:hover {
    color: var(--buach-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }
}

/* ============================================
   Scroll-Hinweis
   ============================================ */
.buach__more {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1rem, 3vh, 2.25rem);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border: var(--buach-border);
  background: #fbfaf6;
  color: var(--buach-ink);
}

.buach__more:hover {
  background: var(--buach-ink);
  color: var(--buach-marker);
}

.buach__more-icon {
  animation: buach-bob 1800ms var(--buach-ease-in-out) infinite;
}

@keyframes buach-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buach__more-icon {
    animation: none;
  }

  .buach__stamp {
    transform: none;
  }

  html[data-buach-tw] #buach.buach--revealed::after {
    transition: none;
  }
}

/* ============================================
   Responsive
   ============================================ */
@media (min-width: 768px) {
  .buach__panel {
    max-width: 48rem;
  }

  .buach__cols {
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .buach__headline {
    font-size: clamp(2.25rem, min(6vw, 10svh), 3.75rem);
  }

  .buach__headline-br--desktop {
    display: inline;
  }

  .buach__col--detail .buach__lede {
    font-size: 1.4375rem;
    line-height: 1.45;
  }

  .buach__col--detail .buach__url {
    font-size: 1.125rem;
  }

  .buach__col--detail .buach__tap {
    font-size: 1.125rem;
  }
}

@media (min-width: 900px) {
  .buach__panel {
    max-width: 52rem;
  }
}

@media (max-width: 767.98px) {
  .buach {
    --buach-m-xs: 0.5rem;
    --buach-m-sm: 0.75rem;
    --buach-m-md: 1rem;
    --buach-m-lg: 1.5rem;
    /* Klarer Abstand zwischen Headline-Gruppe und Text-Gruppe */
    --buach-m-cluster: clamp(2rem, 6.5vh, 3.25rem);
    /* Pfeil sitzt etwas höher; der Block endet darüber */
    --buach-more-space: calc(56px + clamp(2.25rem, 6vh, 3.25rem));

    justify-content: center;
    padding-top: clamp(1.75rem, 6vh, 3rem);
    padding-bottom: var(--buach-more-space);
    padding-inline: max(var(--space-sm), env(safe-area-inset-left, 0px))
      max(var(--space-sm), env(safe-area-inset-right, 0px));
  }

  .buach__panel {
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
  }

  .buach__cols {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    height: auto;
    row-gap: var(--buach-m-cluster);
  }

  .buach__col {
    align-content: start;
    justify-items: start;
  }

  .buach__col--lead {
    display: grid;
    gap: var(--buach-m-sm);
    justify-items: start;
  }

  .buach__brand {
    justify-content: flex-start;
  }

  .buach__col--detail {
    display: grid;
    gap: var(--buach-m-md);
    justify-items: stretch;
  }

  .buach__divider--col {
    display: none;
  }

  .buach__divider--row {
    display: block;
    margin-block: 0;
  }

  .buach__headline {
    width: 100%;
    font-size: clamp(2.75rem, 13vw, 3.75rem);
    text-align: left;
  }

  .buach__headline-br--mobile {
    display: block;
  }

  .buach__headline-br--desktop {
    display: none;
  }

  .buach__headline .marker {
    margin-top: 0;
    padding: 0 0.12em;
  }

  .buach__stamp {
    display: block;
    width: fit-content;
    margin-top: var(--buach-m-xs);
    margin-inline: 0;
  }

  .buach__more {
    bottom: clamp(1.75rem, 5vh, 2.75rem);
  }

  .buach__lede {
    font-size: clamp(1.1875rem, 5vw, 1.4375rem);
    line-height: 1.5;
    max-width: 34ch;
    text-wrap: pretty;
  }

  .buach__cta {
    min-height: var(--tap-min, 44px);
    align-items: center;
    gap: var(--buach-m-sm);
  }

  .buach__url {
    font-size: clamp(1rem, 3.8vw, 1.125rem);
    line-height: 1.3;
  }

  .buach__tap {
    font-size: 1.0625rem;
    min-height: var(--tap-min, 44px);
    padding-inline: 0.25rem;
  }
}

@media (max-width: 767.98px) and (max-height: 720px) {
  .buach {
    --buach-m-cluster: clamp(1.25rem, 4vh, 2rem);
    --buach-more-space: calc(56px + clamp(1.5rem, 4vh, 2.25rem));
    padding-top: clamp(1rem, 3.5vh, 1.75rem);
  }

  .buach__more {
    bottom: clamp(1.25rem, 3.5vh, 2rem);
  }
}

@media (max-height: 720px) {
  .buach__brand-name {
    font-size: 1.125rem;
  }

  .buach__brand-tag {
    font-size: 0.8125rem;
  }

  .buach__headline {
    font-size: clamp(2rem, 10svh, 3.25rem);
  }

  .buach__lede {
    font-size: clamp(1.0625rem, 4.5vw, 1.1875rem);
    line-height: 1.4;
  }

}

@media (max-height: 560px) {
  .buach__headline {
    font-size: clamp(1.75rem, 9svh, 2.5rem);
  }

  .buach__stamp {
    font-size: 0.85em;
  }
}