/*
Theme Name: BEATKITCHEN 2026 v0.6.10
Theme URI: https://beatkitchen.de
Author: BEATKITCHEN
Description: A softened BEATKITCHEN block theme with dedicated mobile and responsive polish.
Version: 0.6.10
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: beatkitchen-2026-v06
*/

:root {
  --bk-ink: #1b1a18;
  --bk-paper: #f3eee4;
  --bk-yellow: #e6cf64;
  --bk-blue: #6578b8;
  --bk-pink: #dd7f99;
  --bk-mint: #c9ddd4;
  --bk-line: 2px solid var(--bk-ink);
  --bk-shadow: 5px 5px 0 var(--bk-ink);
}

html { scroll-behavior: smooth; }
#preise { scroll-margin-top: 96px; }
body { overflow-x: hidden; }

h1, h2, h3, h4, p {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

a { text-underline-offset: .16em; text-decoration-thickness: .09em; }

.bk-site-header {
  border-bottom: var(--bk-line);
  background: var(--bk-paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.admin-bar .bk-site-header { top: 32px; }

.bk-wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
  margin: 0;
}

.bk-wordmark a { text-decoration: none; }

.bk-kicker {
  display: inline-block;
  width: fit-content;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
  border: var(--bk-line);
  padding: .46rem .68rem;
  background: var(--bk-yellow);
  transform: rotate(-.7deg);
}

.bk-hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--bk-line);
}

.bk-hero:after {
  content: "";
  position: absolute;
  width: 14rem;
  height: 14rem;
  border: var(--bk-line);
  border-radius: 50%;
  background: var(--bk-pink);
  right: -5.5rem;
  top: -6rem;
  z-index: 0;
}

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

.bk-hero-title {
  font-size: clamp(4rem, 9.6vw, 8.7rem) !important;
  letter-spacing: -.064em;
  line-height: .80 !important;
  text-transform: uppercase;
  max-width: 8ch;
  margin-top: .45rem !important;
  margin-bottom: 1.6rem !important;
  text-wrap: balance;
}

.bk-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.42rem);
  line-height: 1.5;
  max-width: 43rem;
}

.bk-section {
  border-bottom: var(--bk-line);
}

.bk-section-title {
  font-size: clamp(2.5rem, 5.1vw, 4.8rem) !important;
  line-height: .93 !important;
  letter-spacing: -.048em;
  text-transform: uppercase;
  max-width: 14ch;
  text-wrap: balance;
}

.bk-section-title.bk-wide-title {
  max-width: 18ch;
}

.bk-section-title.bk-compact-title {
  font-size: clamp(2.25rem, 4.4vw, 4.15rem) !important;
  max-width: 17ch;
}

.bk-subtitle {
  font-size: clamp(1.6rem, 2.8vw, 2.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.bk-button .wp-block-button__link,
.wp-block-button.bk-button .wp-block-button__link {
  border: var(--bk-line) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--bk-ink);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
  transition: transform .12s ease, box-shadow .12s ease;
}

.bk-button .wp-block-button__link:hover,
.wp-block-button.bk-button .wp-block-button__link:hover {
  transform: translate(3px,3px);
  box-shadow: 1px 1px 0 var(--bk-ink);
}

.bk-photo-frame {
  border: var(--bk-line);
  box-shadow: var(--bk-shadow);
  background: #fff;
  padding: .5rem;
  transform: rotate(.8deg);
}

.bk-photo-frame img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.bk-hero .bk-photo-frame img { aspect-ratio: 4 / 5; }

.bk-card {
  border: var(--bk-line);
  min-height: 100%;
  padding: 1.35rem;
  background: var(--bk-paper);
  box-shadow: 4px 4px 0 var(--bk-ink);
}

.bk-card h3 {
  font-size: 1.25rem;
  line-height: 1.08;
  text-transform: uppercase;
  margin-top: 0;
}

.bk-number {
  font-size: 2.8rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.06em;
  margin: 0 0 .7rem;
}

.bk-blue { background: var(--bk-blue); color: #fff; }
.bk-pink { background: var(--bk-pink); }
.bk-yellow { background: var(--bk-yellow); }
.bk-mint { background: var(--bk-mint); }
.bk-ink { background: var(--bk-ink); color: var(--bk-paper); }
.bk-paper { background: var(--bk-paper); }

.bk-audience-card {
  border-top: 2px solid rgba(244,240,232,.72);
  padding-top: 1.2rem;
}

.bk-audience-card h3 {
  font-size: 1.35rem;
  margin-bottom: .6rem;
}

.bk-video-frame {
  border: var(--bk-line);
  box-shadow: var(--bk-shadow);
  background: var(--bk-ink);
  padding: .5rem;
}

.bk-video-frame iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  display: block;
}

.bk-experience-note {
  border-left: 5px solid var(--bk-pink);
  padding-left: 1.2rem;
  font-size: 1.22rem;
  line-height: 1.5;
  max-width: 34rem;
}

.bk-proof-strip {
  border-top: var(--bk-line);
  border-bottom: var(--bk-line);
  overflow: hidden;
  white-space: nowrap;
  padding: .72rem 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--bk-yellow);
}

.bk-proof-strip span {
  display: inline-block;
  padding-right: 3rem;
}

.bk-career-main,
.bk-career-small {
  border: var(--bk-line);
  background: #fff;
  padding: .4rem;
  margin: 0;
}

.bk-career-main img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  display: block;
}

.bk-career-small img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Keep Danny Carey's head in frame while preserving the square gallery card. */
.bk-career-danny img {
  object-position: 50% 0%;
}

.bk-career-caption {
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: .5rem .15rem .1rem;
}

.bk-quote {
  border-top: 2px solid rgba(255,255,255,.8);
  padding-top: 1rem;
}

.bk-quote p:first-child {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.45;
}

.bk-price {
  border: var(--bk-line);
  padding: 1.4rem;
  height: 100%;
  background: #fff;
}

.bk-price strong.bk-amount {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.06em;
  margin: .7rem 0;
}

.bk-contact {
  position: relative;
  overflow: hidden;
}

.bk-contact .bk-photo-frame {
  transform: rotate(-1deg);
}

.bk-contact .bk-photo-frame img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.bk-site-footer {
  border-top: var(--bk-line);
}

.bk-smallcaps {
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.bk-rule { border-top: var(--bk-line); }

@media (max-width: 900px) {
  .bk-section-title { max-width: none; }
}

@media (max-width: 781px) {
  .admin-bar .bk-site-header { top: 46px; }
  .bk-site-header { position: relative; top: 0; }
  .bk-hero-title { font-size: clamp(3.6rem, 18vw, 5.9rem) !important; }
  .bk-section-title,
  .bk-section-title.bk-compact-title {
    font-size: clamp(2.4rem, 12vw, 4rem) !important;
    max-width: none;
  }
  .bk-photo-frame { transform: none; box-shadow: 4px 4px 0 var(--bk-ink); }
  .bk-career-main img { min-height: 320px; }
}


/* v0.3 colour tuning */
.bk-blue {
  background: #6578b8;
}
.bk-pink {
  background: #dd7f99;
}
.bk-yellow {
  background: #e6cf64;
}
.bk-mint {
  background: #c9ddd4;
}

/* Let the softened palette feel more tactile and less fluorescent. */
.bk-card.bk-blue {
  background: #6d80bc;
}
.bk-card.bk-pink {
  background: #e088a0;
}
.bk-card.bk-yellow {
  background: #ead46e;
}
.bk-card.bk-mint {
  background: #cfe1da;
}

.bk-proof-strip {
  background: #ead46e;
}

.bk-kicker {
  background: #ead46e;
}

/* Slightly warmer white surfaces so the whole page sits together. */
.bk-price,
.bk-career-main,
.bk-career-small,
.bk-photo-frame {
  background: #f8f4ec;
}


/* v0.4 music-production pathway */
.bk-production-intro {
  max-width: 48rem;
  font-size: 1.08rem;
  line-height: 1.55;
}

.bk-production-step {
  border-top: var(--bk-line);
  padding-top: 1rem;
  margin-top: 1rem;
}

.bk-production-step .bk-step-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}

.bk-production-step h4 {
  margin-top: 0;
  margin-bottom: .45rem;
  font-size: 1.18rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.bk-production-step p {
  margin-top: 0;
  font-size: .96rem;
  line-height: 1.5;
}

.bk-production-note {
  border-left: 4px solid var(--bk-pink);
  padding-left: .9rem;
  margin-top: 1.2rem;
  font-size: .94rem;
}


/* =========================================================
   v0.6 — RESPONSIVE / MOBILE POLISH
   Based on real iPhone testing at approximately 390px wide.
   ========================================================= */

/* Prevent any wide child, ticker or Gutenberg alignment rule from
   making the document itself horizontally scrollable. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.wp-site-blocks,
main,
main.wp-block-group,
.alignfull {
  max-width: 100vw;
}

.wp-site-blocks,
main.wp-block-group {
  overflow-x: hidden;
}

img,
iframe,
video {
  max-width: 100%;
}

/* The ticker may remain visually wider than the viewport,
   but it must scroll/clip inside itself rather than widen the page. */
.bk-proof-strip {
  width: 100%;
  max-width: 100vw;
  overflow: hidden !important;
  contain: paint;
}

.bk-proof-strip span {
  max-width: none;
  white-space: nowrap;
}

/* Gutenberg columns should never create a min-content overflow. */
.wp-block-column,
.wp-block-columns,
.wp-block-group {
  min-width: 0;
}

@media (max-width: 781px) {

  /* Header */
  .bk-wordmark {
    font-size: 1.42rem;
  }

  .bk-site-header .wp-block-navigation__responsive-container-open {
    padding: .25rem;
  }

  /* Hero: retain impact but guarantee that SCHLAGZEUG fits the viewport. */
  .bk-hero-title {
    font-size: min(13vw, 4.8rem) !important;
    line-height: .84 !important;
    letter-spacing: -.055em;
    max-width: 100%;
    width: 100%;
    text-wrap: wrap;
  }

  .bk-hero:after {
    width: 10rem;
    height: 10rem;
    right: -4.4rem;
    top: -4.7rem;
  }

  .bk-hero .bk-photo-frame img {
    aspect-ratio: 4 / 5;
  }

  /* Headline hierarchy: still poster-like, but less exhausting on a phone. */
  .bk-section-title,
  .bk-section-title.bk-wide-title {
    font-size: clamp(2.4rem, 10.5vw, 3.75rem) !important;
    line-height: .94 !important;
    letter-spacing: -.045em;
    max-width: 100%;
  }

  .bk-section-title.bk-compact-title {
    font-size: clamp(2.25rem, 9.6vw, 3.45rem) !important;
    line-height: .95 !important;
    max-width: 100%;
  }

  .bk-subtitle {
    font-size: clamp(1.75rem, 7.2vw, 2.35rem) !important;
    line-height: 1.02 !important;
  }

  .bk-lead {
    font-size: 1.06rem;
    line-height: 1.48;
  }

  .bk-kicker {
    font-size: .69rem;
    padding: .42rem .6rem;
    letter-spacing: .09em;
  }

  /* Cards */
  .bk-card {
    padding: 1.08rem;
  }

  .bk-card h3 {
    font-size: 1.12rem;
  }

  .bk-number {
    font-size: 2.45rem;
    margin-bottom: .58rem;
  }

  .bk-price {
    padding: 1.12rem;
  }

  .bk-price strong.bk-amount {
    font-size: clamp(3rem, 14vw, 4rem);
    margin: .65rem 0;
  }

  /* Audience / experience */
  .bk-audience-card {
    padding-top: 1rem;
  }

  .bk-audience-card h3 {
    font-size: 1.2rem;
  }

  .bk-experience-note {
    font-size: 1.05rem;
    line-height: 1.46;
    padding-left: .95rem;
    border-left-width: 4px;
  }

  /* Archive: preserve the scrapbook feeling, but remove forced desktop height. */
  .bk-career-main img {
    min-height: 0;
    height: auto;
  }

  .bk-career-main,
  .bk-career-small {
    padding: .34rem;
  }

  .bk-career-caption {
    font-size: .7rem;
    margin-top: .42rem;
  }

  /* Testimonials */
  .bk-quote {
    padding-top: .9rem;
  }

  .bk-quote p:first-child {
    font-size: 1.03rem;
    line-height: 1.42;
  }

  /* Music production */
  .bk-production-intro {
    font-size: 1.02rem;
    line-height: 1.48;
  }

  .bk-production-step {
    margin-top: .85rem;
    padding-top: .85rem;
  }

  .bk-production-step h4 {
    font-size: 1.08rem;
  }

  .bk-production-step p {
    font-size: .98rem;
    line-height: 1.48;
  }

  .bk-production-note {
    font-size: .96rem;
    line-height: 1.48;
  }

  /* Buttons stay generous but should not create width pressure. */
  .wp-block-buttons {
    gap: 1rem !important;
  }

  .wp-block-button {
    max-width: 100%;
  }

  .bk-button .wp-block-button__link,
  .wp-block-button.bk-button .wp-block-button__link {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Footer: left alignment reads more naturally on a narrow screen. */
  .bk-site-footer .has-text-align-right {
    text-align: left !important;
  }

  .bk-site-footer .wp-block-columns {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {

  /* Reduce compounded desktop spacing once columns stack. */
  .bk-hero {
    padding-top: 48px !important;
    padding-bottom: 58px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .bk-section {
    padding-top: 52px !important;
    padding-bottom: 56px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .bk-contact {
    padding-top: 54px !important;
    padding-bottom: 58px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .bk-site-footer {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .bk-hero-title {
    font-size: 12.7vw !important;
    line-height: .85 !important;
    margin-bottom: 1.35rem !important;
  }

  .bk-section-title,
  .bk-section-title.bk-wide-title {
    font-size: 10.1vw !important;
  }

  .bk-section-title.bk-compact-title {
    font-size: 9.5vw !important;
  }

  .bk-lead {
    font-size: 1.03rem;
  }

  /* Mobile cards feel less like giant slabs while staying tactile. */
  .bk-card {
    padding: 1rem;
  }

  .bk-price {
    padding: 1rem;
  }

  .bk-price strong.bk-amount {
    font-size: 3.2rem;
  }

  /* Reduce long stacked gaps introduced by desktop margin declarations. */
  .wp-block-columns {
    row-gap: 1.15rem;
  }

  .bk-photo-frame,
  .bk-video-frame {
    box-shadow: 4px 4px 0 var(--bk-ink);
  }

  /* The contact buttons read better as a clear vertical pair. */
  .bk-contact .wp-block-buttons {
    align-items: flex-start;
  }

  .bk-contact .wp-block-button {
    width: auto;
  }

  /* Footer wordmark should not compete with the main page. */
  .bk-site-footer h3 {
    font-size: 1.5rem !important;
    margin-bottom: .55rem;
  }
}

/* v0.6.9 — quiet contract callout beneath pricing */
.bk-contract-callout {
  border: var(--bk-line);
  background: var(--bk-paper);
  box-shadow: 4px 4px 0 var(--bk-ink);
  padding: 1.15rem 1.25rem;
  gap: 1rem 2rem;
}

.bk-contract-copy {
  flex: 1 1 28rem;
}

.bk-contract-copy p {
  margin: 0;
}

.bk-contract-copy .bk-smallcaps {
  margin-bottom: .35rem;
}

.bk-contract-button .wp-block-button__link {
  background: transparent;
  color: var(--bk-ink);
  border: var(--bk-line);
  box-shadow: 3px 3px 0 var(--bk-ink);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .78rem 1rem;
}

@media (max-width: 781px) {
  .bk-contract-callout {
    align-items: flex-start !important;
  }
  .bk-contract-callout .wp-block-buttons {
    width: 100%;
  }
}

/* v0.6.2 — featured regular lesson plan */
.bk-price-featured {
  position: relative;
  box-shadow: 6px 6px 0 var(--bk-ink);
}

.bk-price-badge {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .34rem .6rem .28rem;
  border: var(--bk-line);
  background: var(--bk-pink);
  color: var(--bk-ink);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .09em;
}

@media (min-width: 782px) {
  .bk-price-featured {
    transform: translateY(-8px);
  }
}

@media (max-width: 781px) {
  .bk-price-badge {
    margin-bottom: .7rem;
  }
}


/* v0.6.3 — subtle Instagram cue in contact details */
.bk-contact a[href*="instagram.com"] {
  display: inline-flex;
  align-items: center;
  gap: .38em;
}

.bk-contact a[href*="instagram.com"]::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 1.05em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231b1a18%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.4%22%20cy%3D%226.6%22%20r%3D%221%22%20fill%3D%22%231b1a18%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* v0.6.5 — privacy-first click-to-load WDR video */
.bk-video-consent {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 9;
  color: var(--bk-paper);
}

.bk-video-placeholder {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .75rem;
  padding: clamp(1.3rem, 4vw, 2.6rem);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(27,26,24,.86) 0%, rgba(27,26,24,.66) 46%, rgba(27,26,24,.38) 100%),
    url("assets/images/wdr-beatkitchen-thumbnail.jpg") center / cover no-repeat;
}

.bk-video-eyebrow,
.bk-video-title,
.bk-video-play,
.bk-video-privacy {
  position: relative;
  z-index: 1;
}

.bk-video-eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bk-yellow);
}

.bk-video-title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem, 4.5vw, 3.2rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
}

.bk-video-play {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  margin-top: .35rem;
  padding: .72rem .9rem;
  border: var(--bk-line);
  border-radius: 0;
  background: var(--bk-yellow);
  color: var(--bk-ink);
  box-shadow: 4px 4px 0 var(--bk-paper);
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.bk-video-play:hover,
.bk-video-play:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--bk-paper);
}

.bk-video-play:focus-visible {
  outline: 3px solid var(--bk-pink);
  outline-offset: 4px;
}

.bk-video-play-icon {
  width: 0;
  height: 0;
  border-top: .38rem solid transparent;
  border-bottom: .38rem solid transparent;
  border-left: .62rem solid var(--bk-ink);
}

.bk-video-privacy,
.bk-video-noscript {
  margin: .15rem 0 0;
  font-size: .73rem;
  line-height: 1.35;
  opacity: .78;
}

.bk-video-noscript a {
  color: var(--bk-paper);
}

.bk-video-consent.is-loaded {
  padding: .5rem;
}

.bk-video-consent.is-loaded iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

@media (max-width: 781px) {
  .bk-video-placeholder {
    padding: 1.2rem;
  }

  .bk-video-title {
    font-size: clamp(1.65rem, 9vw, 2.5rem);
  }

  .bk-video-play {
    font-size: .72rem;
  }
}


/* v0.6.7 — whole WDR preview is clickable */
.bk-video-placeholder {
  cursor: pointer;
}

.bk-video-placeholder:hover .bk-video-play {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--bk-paper);
}