/* Mela Reference 4.3.0
 * Owner-editable system layer. Loaded last on purpose.
 * This file contains only stable component contracts and Gutenberg support.
 */

:root {
  --mela-card-radius: 0px;
  --mela-button-radius: 0px;
  --mela-content-width: 1440px;
}

/* Owner-controlled geometry */
.brand-action,
.inquiry-form button,
.test-hub-grid > :is(button, a),
.test-hub-featured,
.product-card,
.personal-offer-card,
.mm-program-list > article,
.mela-gutenberg-inner .wp-block-button__link {
  border-radius: var(--mela-button-radius) !important;
}

.product-card,
.personal-offer-card,
.mm-program-list > article,
.mela-gutenberg-inner :is(.wp-block-group.is-style-mela-violet,.wp-block-group.is-style-mela-signal,.wp-block-group.is-style-mela-soft) {
  border-radius: var(--mela-card-radius) !important;
}

/* Ensure navigation and calls-to-action stay clickable above decorative layers. */
.brand-header a,
.brand-header button,
.brand-menu a,
.brand-action,
.site-footer a,
.slider-controls button,
.journal-controls button,
.product-card a,
.personal-offer-card a {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
}

/* -------------------------------------------------------------------------
   1:1 OFFERS — calmer desktop composition.
   Title receives the whole first row, so long German format names no longer
   get squeezed into an artificial narrow left column.
   ------------------------------------------------------------------------- */
.offer-editorial .personal-offer-track.mm-program-slider {
  margin-top: clamp(2.75rem, 5vw, 4.5rem) !important;
  padding-bottom: 1rem !important;
}

.offer-editorial .personal-offer-track.mm-program-slider > article {
  flex: 0 0 min(76vw, 68rem) !important;
  min-height: 35rem !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr) !important;
  grid-template-rows: auto 1fr auto !important;
  column-gap: clamp(2.5rem, 5vw, 5.5rem) !important;
  row-gap: 2.5rem !important;
  align-items: start !important;
  padding: clamp(3rem, 5vw, 5rem) !important;
}

.offer-editorial .personal-offer-track .mm-program-heading {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

.offer-editorial .personal-offer-track .mm-program-heading h3 {
  max-width: 100% !important;
  margin-top: 1.15rem !important;
  font-size: clamp(2.65rem, 4.25vw, 4.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

.offer-editorial .personal-offer-track .mm-program-copy {
  grid-column: 1 !important;
  grid-row: 2 / span 2 !important;
  align-self: start !important;
  max-width: 45rem !important;
}

.offer-editorial .personal-offer-track .mm-program-copy > p {
  max-width: 42rem !important;
  font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
  line-height: 1.65 !important;
}

.offer-editorial .personal-offer-track .mm-program-copy > ul {
  max-width: 40rem !important;
}

.offer-editorial .personal-offer-track .mm-program-booking {
  grid-column: 2 !important;
  grid-row: 2 / span 2 !important;
  align-self: end !important;
  min-height: 12rem !important;
  padding-left: clamp(1.5rem, 3vw, 3rem) !important;
  border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent) !important;
}

.offer-editorial .personal-offer-track .mm-program-booking > strong {
  margin-bottom: 1.4rem !important;
}

.offer-editorial .personal-offer-track .mm-program-booking > .brand-action {
  min-height: 4.3rem !important;
  align-items: center !important;
}

.offer-bottom-nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem var(--page-x, 4vw) 0;
  background: var(--white);
}

.offer-bottom-nav .offer-swipe-hint {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--display);
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .08em;
}

.offer-bottom-nav .offer-slider-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(10.5rem, auto));
  gap: .7rem;
  margin: 0 !important;
}

.offer-bottom-nav .offer-slider-controls button {
  min-height: 3.8rem !important;
  padding: 0 1.35rem !important;
  border: 1px solid var(--black) !important;
  background: var(--white) !important;
  color: var(--black) !important;
  font-family: var(--display) !important;
  font-size: .72rem !important;
  font-weight: 750 !important;
  letter-spacing: .06em !important;
}
.offer-bottom-nav .offer-slider-controls button:last-child {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* -------------------------------------------------------------------------
   WORK TOOLS — commerce state and download action are visually explicit.
   ------------------------------------------------------------------------- */
.product-card {
  display: flex !important;
  flex-direction: column !important;
}
.product-card .tool-commerce {
  margin-top: auto !important;
  padding-top: 1.5rem !important;
}
.product-card > .worktool-action {
  min-height: 4rem !important;
  margin-top: 1rem !important;
  font-size: .76rem !important;
}
.product-card .tool-commerce > span {
  opacity: .72;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
}

/* -------------------------------------------------------------------------
   GUTENBERG AREAS — the native WordPress editor is allowed on every managed
   page as an additional free-layout content area.
   ------------------------------------------------------------------------- */
.mela-gutenberg-area {
  width: 100%;
  padding: clamp(4.5rem, 8vw, 8rem) var(--page-x, 4vw);
  background: var(--white);
  color: var(--black);
}
.mela-gutenberg-area--business {
  border-top: 1px solid color-mix(in srgb, var(--black) 14%, transparent);
}
.mela-gutenberg-inner {
  width: min(100%, var(--mela-content-width));
  margin-inline: auto;
}
.mela-gutenberg-inner > * {
  max-width: 58rem;
  margin-inline: auto;
}
.mela-gutenberg-inner > .alignwide {
  max-width: min(100%, 78rem);
}
.mela-gutenberg-inner > .alignfull {
  width: calc(100% + (2 * var(--page-x, 4vw)));
  max-width: none;
  margin-left: calc(-1 * var(--page-x, 4vw));
  margin-right: calc(-1 * var(--page-x, 4vw));
}
.mela-gutenberg-inner :is(h2,h3,h4) {
  font-family: var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}
.mela-gutenberg-inner h2 {
  margin: 4rem auto 1.5rem;
  font-size: clamp(2.4rem, 5vw, 5.8rem);
  line-height: .99;
  letter-spacing: -.055em;
}
.mela-gutenberg-inner h3 {
  margin: 2.8rem auto 1.1rem;
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1.02;
}
.mela-gutenberg-inner :is(p,li) {
  font-family: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.68;
}
.mela-gutenberg-inner a:not(.wp-block-button__link) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.mela-gutenberg-inner .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}
.mela-gutenberg-inner .wp-block-quote,
.mela-gutenberg-inner .wp-block-quote.is-style-mela-editorial {
  max-width: 72rem;
  margin: clamp(3rem, 6vw, 6rem) auto;
  padding: clamp(2.5rem, 6vw, 5rem);
  border: 0;
  background: var(--violet);
  color: var(--white);
}
.mela-gutenberg-inner .wp-block-quote :is(p,cite) { color: inherit; }
.mela-gutenberg-inner .wp-block-group:is(.is-style-mela-violet,.is-style-mela-signal,.is-style-mela-soft) {
  max-width: 78rem;
  margin: clamp(3rem, 6vw, 6rem) auto;
  padding: clamp(2.5rem, 6vw, 5rem);
}
.mela-gutenberg-inner .wp-block-group.is-style-mela-violet { background: var(--violet); color: var(--white); }
.mela-gutenberg-inner .wp-block-group.is-style-mela-signal { background: var(--signal); color: var(--black); }
.mela-gutenberg-inner .wp-block-group.is-style-mela-soft { background: var(--violet-light); color: var(--black); }
.mela-gutenberg-inner .wp-block-group:is(.is-style-mela-violet,.is-style-mela-signal,.is-style-mela-soft) :is(h2,h3,p,li,a) { color: inherit; }
.mela-gutenberg-inner .wp-block-button__link {
  min-height: 3.8rem;
  display: inline-flex;
  align-items: center;
  padding: .9rem 1.25rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Generic WordPress pages also inherit the visual language. */
.mela-generic-content,
.native-page-shell > article {
  width: min(calc(100% - 2 * var(--page-x, 4vw)), var(--mela-content-width));
  margin-inline: auto;
  padding: clamp(8rem, 12vw, 12rem) 0 clamp(5rem, 9vw, 9rem);
}
.mela-generic-content > h1,
.native-page-shell > article > h1 {
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .95;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.entry-content { max-width: 58rem; }
.entry-content :is(p,li) { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.68; }

/* Article Gutenberg blocks: the body is no longer limited to paragraphs only. */
.article-body :is(.wp-block-image,.wp-block-gallery,.wp-block-columns,.wp-block-table,.wp-block-video,.wp-block-embed) {
  margin-block: clamp(2rem, 5vw, 4rem);
}
.article-body .wp-block-image img,
.article-body .wp-block-video video { width: 100%; height: auto; }
.article-body .wp-block-button__link {
  display: inline-flex;
  min-height: 3.7rem;
  align-items: center;
  border-radius: var(--mela-button-radius) !important;
  background: var(--black);
  color: var(--white);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .offer-editorial .personal-offer-track.mm-program-slider > article {
    flex-basis: min(88vw, 60rem) !important;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, .5fr) !important;
  }
}

@media (max-width: 819px) {
  .offer-editorial .personal-offer-track.mm-program-slider > article {
    display: flex !important;
    min-height: 0 !important;
    flex: 0 0 calc(100vw - 2.5rem) !important;
    padding: 2.4rem 1.45rem !important;
  }
  .offer-editorial .personal-offer-track .mm-program-heading h3 {
    font-size: clamp(2rem, 9.2vw, 3.2rem) !important;
    line-height: .99 !important;
  }
  .offer-editorial .personal-offer-track .mm-program-booking {
    min-height: 0 !important;
    margin-top: 2.25rem !important;
    padding: 1.5rem 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent) !important;
  }
  .offer-bottom-nav {
    align-items: stretch;
    flex-direction: column;
    padding-inline: 1.25rem;
  }
  .offer-bottom-nav .offer-slider-controls {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .offer-bottom-nav .offer-slider-controls button {
    min-width: 0;
    padding-inline: .7rem !important;
  }
  .mela-gutenberg-area { padding-inline: 1.25rem; }
  .mela-gutenberg-inner > .alignfull {
    width: calc(100% + 2.5rem);
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}

/* -------------------------------------------------------------------------
   4.3 FINAL INTERACTION LAYER
   ------------------------------------------------------------------------- */

/* Every neon-green CTA carries the black square marker requested in the
   reference design, regardless of its surrounding surface. */
main :is(a,button).brand-action--signal::after,
.brand-menu :is(a,button).brand-action--signal::after,
.site-footer :is(a,button).brand-action--signal::after,
:is(a,button).brand-action--signal::after {
  content:"" !important;
  position:static !important;
  display:block !important;
  width:.66rem !important;
  min-width:.66rem !important;
  height:.66rem !important;
  min-height:.66rem !important;
  flex:0 0 .66rem !important;
  margin:0 0 0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--black) !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  order:2 !important;
  transform:none !important;
}

/* Product and journal shelves are navigated with branded buttons. Native
   browser scrollbars stay hidden so they do not become part of the design. */
.product-slider,
.journal-track,
.mm-program-slider,
.personal-offer-track {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  scroll-snap-type:x mandatory;
}
.product-slider::-webkit-scrollbar,
.journal-track::-webkit-scrollbar,
.mm-program-slider::-webkit-scrollbar,
.personal-offer-track::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }
.product-slider > *,
.journal-track > *,
.mm-program-slider > *,
.personal-offer-track > * { scroll-snap-align:start; }

/* Privacy text stays one readable inline sentence next to the checkbox on
   desktop and stacks only when the viewport genuinely needs it. */
.inquiry-consent {
  display:grid !important;
  grid-template-columns:1.15rem minmax(0,1fr) !important;
  align-items:start !important;
  column-gap:.85rem !important;
  width:100% !important;
}
.inquiry-consent > input {
  width:1.05rem !important;
  height:1.05rem !important;
  margin:.18rem 0 0 !important;
}
.inquiry-consent > span {
  display:block !important;
  min-width:0 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  line-height:1.55 !important;
}
.inquiry-consent a { white-space:nowrap; }

/* Native modal system — booking and email-gated downloads. */
body.mela-modal-open { overflow:hidden; }
.mela-modal[hidden] { display:none !important; }
.mela-modal {
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:clamp(1rem,3vw,2.5rem);
}
.mela-modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
}
.mela-modal__panel {
  position:relative;
  z-index:1;
  width:min(100%,52rem);
  max-height:calc(100dvh - 2rem);
  overflow:auto;
  padding:clamp(2rem,5vw,4rem);
  background:var(--violet-light);
  color:var(--black);
  box-shadow:0 24px 90px rgba(0,0,0,.28);
}
.mela-modal__panel > small,
.mela-modal__panel label > span {
  display:block;
  margin-bottom:.55rem;
  font-family:var(--display);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.mela-modal__panel > h2 {
  max-width:12ch;
  margin:.65rem 0 1rem;
  font-family:var(--display);
  font-size:clamp(2.5rem,6vw,5.2rem);
  line-height:.94;
  letter-spacing:-.06em;
  text-transform:uppercase;
}
.mela-modal__panel > p { max-width:42rem; font-size:1.05rem; line-height:1.6; }
.mela-modal__close {
  position:absolute;
  top:1rem;
  right:1rem;
  width:2.8rem;
  height:2.8rem;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  font-size:1.7rem;
  cursor:pointer;
}
.mela-modal form { display:grid; gap:1rem; margin-top:2rem; }
.mela-modal__grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mela-modal input,
.mela-modal select,
.mela-modal textarea {
  width:100%;
  min-height:3.5rem;
  border:1px solid currentColor;
  border-radius:0;
  background:rgba(255,255,255,.86);
  color:var(--black);
  padding:.8rem 1rem;
  font:inherit;
}
.mela-modal textarea { min-height:7rem; resize:vertical; }
.mela-modal .brand-action { width:100%; margin-top:.3rem; }
.mela-booking-success,
.mela-download-success {
  padding:1rem 1.15rem;
  border:1px solid currentColor;
  font-weight:650;
}
.mela-download-direct { margin-top:0 !important; }

/* The download popup inherits the card family instead of using one generic
   dialog colour. */
.mela-download-modal[data-tone="dark"] .mela-modal__panel { background:var(--black); color:var(--white); }
.mela-download-modal[data-tone="dark"] .mela-modal__panel input { background:var(--white); color:var(--black); }
.mela-download-modal[data-tone="violet"] .mela-modal__panel { background:var(--violet); color:var(--white); }
.mela-download-modal[data-tone="signal"] .mela-modal__panel { background:var(--signal); color:var(--black); }
.mela-download-modal[data-tone="soft"] .mela-modal__panel { background:var(--violet-light); color:var(--black); }
.mela-download-modal[data-tone="dark"] .inquiry-consent a,
.mela-download-modal[data-tone="violet"] .inquiry-consent a { color:inherit; }

/* Dedicated, editable 1:1 and contact pages. */
.beratung-hero,
.contact-page-hero {
  min-height:calc(100dvh - 72px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(22rem,.72fr);
  gap:0;
  padding-top:72px;
}
.beratung-hero-copy,
.contact-page-hero > div:first-child {
  padding:clamp(4rem,8vw,8rem) var(--page-x,4vw);
  align-self:center;
}
.beratung-hero-copy > small,
.contact-page-hero > div:first-child > small,
.beratung-contact > small {
  color:var(--violet);
  font-family:var(--display);
  font-size:.75rem;
  font-weight:750;
  letter-spacing:.08em;
}
.beratung-hero h1,
.contact-page-hero h1 {
  margin:1rem 0 1.6rem;
  font-family:var(--display);
  font-size:clamp(3.3rem,7vw,7.6rem);
  line-height:.91;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.beratung-hero h1 b,
.contact-page-hero h1 b { color:var(--violet); }
.beratung-hero-copy > p,
.contact-page-hero > div:first-child > p { max-width:46rem; font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.6; }
.beratung-hero-visual { min-height:34rem; background-size:cover; background-position:center; }
.contact-page-form { padding:clamp(3rem,6vw,6rem) var(--page-x,4vw); background:var(--violet); color:var(--white); }
.contact-page-form .inquiry-form { max-width:44rem; margin:auto; }
.beratung-contact { padding:clamp(5rem,9vw,9rem) var(--page-x,4vw); background:var(--violet-light); }
.beratung-contact h2 { max-width:14ch; margin:1rem 0; font-family:var(--display); font-size:clamp(3rem,6vw,6rem); line-height:.94; letter-spacing:-.06em; }
.beratung-contact p { max-width:44rem; font-size:1.15rem; line-height:1.65; }

/* Work Tool CTAs are compact and consistent at desktop scale. */
.product-card > .worktool-action {
  width:100% !important;
  min-height:3.7rem !important;
  padding:.9rem 1.25rem !important;
  margin-top:1.1rem !important;
}

@media(max-width:819px){
  .mela-modal { padding:.5rem; place-items:end center; }
  .mela-modal__panel { width:100%; max-height:92dvh; padding:2.4rem 1.25rem 1.5rem; }
  .mela-modal__grid { grid-template-columns:1fr; }
  .beratung-hero,.contact-page-hero { grid-template-columns:1fr; padding-top:64px; }
  .beratung-hero-visual { min-height:42vh; order:-1; }
  .contact-page-form { padding:2.5rem 1.25rem; }
  .inquiry-consent { grid-template-columns:1.1rem minmax(0,1fr) !important; column-gap:.7rem !important; }
  .inquiry-consent > span { font-size:.82rem !important; line-height:1.5 !important; }
}

/* 4.3 journal navigation replaces the exposed native horizontal scrollbar. */
.journal-bottom-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem var(--page-x,4vw) 1.4rem;
  background:var(--black);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.16);
}
.journal-counter{
  font-family:var(--display);
  font-size:.74rem;
  font-weight:750;
  letter-spacing:.08em;
}
.journal-bottom-controls{display:flex;gap:.65rem;margin:0!important}
.journal-bottom-controls button{
  min-width:9.5rem;
  min-height:3.4rem;
  border:1px solid rgba(255,255,255,.35)!important;
  background:transparent!important;
  color:var(--white)!important;
  font-family:var(--display)!important;
  font-weight:750!important;
}
.journal-bottom-controls button:last-child{
  background:var(--white)!important;
  color:var(--black)!important;
}
.slider-controls button:disabled,
.journal-controls button:disabled{
  opacity:.32!important;
  cursor:not-allowed!important;
}
@media(max-width:819px){
  .journal-masthead .journal-controls{display:none!important}
  .journal-bottom-nav{padding:1rem 1.25rem 1.25rem;align-items:stretch;flex-direction:column}
  .journal-bottom-controls{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .journal-bottom-controls button{min-width:0!important;width:100%!important}
}

/* Global design settings remain authoritative even over legacy card colours. */
main [data-tone="violet"],
.offer-editorial .personal-offer-track > article[data-tone="violet"] {
  background-color:var(--violet) !important;
  background-image:none !important;
}
main [data-tone="paper"] { background-color:var(--violet-light) !important; }
.offer-editorial .personal-offer-track > article[data-tone="paper"] {
  --offer-card-kicker:var(--violet) !important;
  --offer-card-marker:var(--violet) !important;
}

/* Journal navigation lives underneath the cards. The small legacy arrow pair
   in the masthead is intentionally suppressed so there is only one obvious
   way to move through articles. */
.journal-masthead .journal-controls {
  display:none !important;
}

/* Journal card imagery is owner-editable through the normal WordPress
   featured-image control. The original generated visuals remain as fallbacks. */
.journal-thumb--image {
  position:relative;
  overflow:hidden;
}
.journal-thumb--image > img {
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  object-fit:cover;
  object-position:center;
}