/* Neumorph-Design, seit 2026-10-18 Standard auf allen Frontend-Seiten, aktiv mit
   html[data-ak-nm] (siehe inc/academy-neumorph-experiment.php). Ueberschreibt das
   Design-System nur in diesem Scope; !important nur dort, wo das System
   bzw. Salient-Inline-Styles selbst mit !important arbeiten. */

/* Flaechen in Akademie-Farben (2026-10-11): Grundflaeche Papier, pinke
   Karten Rose, blaue Karten und Lehrplan Mint. Jede Flaeche bringt ihr
   eigenes, farblich passendes Schattenpaar mit (--nm-dark). Die
   Schatten-Tokens werden auf jeder Flaeche neu definiert, weil var() in
   Custom Properties dort aufgeloest wird, wo sie deklariert sind - sonst
   erben Kinder die Schatten der Grundflaeche. */
html[data-ak-nm]{
  --nm-bg: var(--ak-color-background, #F7F6F1);
  --nm-surface: var(--nm-bg);
  --nm-light: rgba(255, 255, 255, 0.95);
  --nm-dark: rgba(174, 164, 140, 0.45);
  --nm-radius: 30px;
}
html[data-ak-nm],
html[data-ak-nm] .main-content .ak-card > .vc_column-inner > .wpb_wrapper,
html[data-ak-nm] .main-content .ak-cta-banner,
html[data-ak-nm] body.single-mpcs-course .mpcs-section{
  --nm-raised: 9px 9px 18px var(--nm-dark), -9px -9px 18px var(--nm-light);
  --nm-raised-sm: 5px 5px 10px var(--nm-dark), -5px -5px 10px var(--nm-light);
  --nm-inset: inset 5px 5px 10px var(--nm-dark), inset -5px -5px 10px var(--nm-light);
}
html[data-ak-nm] .main-content .ak-card.ak-card--pink > .vc_column-inner > .wpb_wrapper{
  --nm-surface: var(--ak-color-rose, #F8EDF3);
  --nm-dark: rgba(196, 150, 174, 0.5);
}
html[data-ak-nm] .main-content .ak-card.ak-card--blue > .vc_column-inner > .wpb_wrapper,
html[data-ak-nm] .main-content .ak-cta-banner,
html[data-ak-nm] body.single-mpcs-course .mpcs-section{
  --nm-surface: var(--ak-color-panel, #EAF6F5);
  --nm-dark: rgba(140, 186, 183, 0.5);
}

/* Flaechen: alle Content-Sections auf eine gemeinsame Grundfarbe
   (Salient setzt bg_color als Inline-Style auf .row-bg) */
html[data-ak-nm] body,
html[data-ak-nm] .container-wrap,
html[data-ak-nm] .main-content .ak-section > .row-bg-wrap,
html[data-ak-nm] .main-content .ak-section > .row-bg-wrap .row-bg{
  background: var(--nm-bg) !important;
}
html[data-ak-nm] .main-content .inner_row > .row-bg-wrap .row-bg{ background: transparent !important; }

/* Karten */
html[data-ak-nm] .main-content .ak-card > .vc_column-inner > .wpb_wrapper,
html[data-ak-nm] .main-content .ak-card.ak-card--pink > .vc_column-inner > .wpb_wrapper,
html[data-ak-nm] .main-content .ak-card.ak-card--blue > .vc_column-inner > .wpb_wrapper{
  background: var(--nm-surface);
  border: 0;
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-raised);
}
html[data-ak-nm] .main-content .ak-card .wpb_text_column div[style*="padding-top: 56.25%"]{
  border-radius: 20px;
  box-shadow: var(--nm-raised-sm);
}

/* CTA-Banner (z. B. Startseite "Wo auch immer ihr gerade steht"):
   Mint-Flaeche erhaben, die innere Overlay-Ebene entfaellt, Mini-Karten
   leicht erhaben im selben Ton */
html[data-ak-nm] .main-content .ak-cta-banner{
  background: var(--nm-surface) !important;
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-raised);
}
html[data-ak-nm] .main-content .ak-cta-banner .column-bg-overlay{ background: transparent !important; }
/* Der innere Rahmen schnitt mit overflow:hidden die runden Ecken der
   (jetzt transparenten) Overlay-Flaeche - und dabei die Schatten der
   Mini-Karten an den Kanten ab */
html[data-ak-nm] .main-content .ak-cta-banner > .vc_column-inner{ overflow: visible; }
/* Mini-Karten im Mint-Banner in Sand-Beige, mit warmem Schatten */
html[data-ak-nm] .main-content .ak-cta-banner .ak-mini-card{
  --nm-surface: #F5F1ED; /* Akademie-Sand; --ak-color-testimonial-band ist seit 2026-10-11 ein Alias auf Papier */
  --nm-dark: rgba(150, 130, 105, 0.35);
  --nm-raised-sm: 5px 5px 10px var(--nm-dark), -5px -5px 10px var(--nm-light);
}
html[data-ak-nm] .main-content .ak-mini-card{
  background: var(--nm-surface);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--nm-raised-sm);
}

/* Listen: einzelne, leicht erhabene Pillen statt Trennlinien */
html[data-ak-nm] .main-content .ak-divided-list > .wpb_wrapper{ border-top: 0; }
html[data-ak-nm] .main-content .ak-divided-list > .wpb_wrapper > p,
html[data-ak-nm] .main-content .ak-divided-list > .wpb_wrapper > p:last-child{
  margin: 0 0 14px;
  padding: 13px 18px !important;
  border: 0;
  border-radius: 18px;
  background: var(--nm-surface);
  box-shadow: var(--nm-raised-sm);
}
html[data-ak-nm] .main-content .ak-divided-list > .wpb_wrapper > p:last-child{ margin-bottom: 4px; }

/* Buttons: erhaben, beim Hover/Klick eingedrueckt */
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn,
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--primary,
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--outline{
  background: var(--nm-surface) !important;
  border: 0 !important;
  box-shadow: var(--nm-raised-sm) !important;
  transition: box-shadow 0.2s ease;
}
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--primary,
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--primary span{ color: #fff !important; }
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--primary{ background: var(--ak-color-primary) !important; }
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--outline,
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--outline span{ color: var(--ak-color-text) !important; }
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn:hover,
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn:active{
  background: var(--nm-surface) !important;
  box-shadow: var(--nm-inset) !important;
}
/* Primaer-Button bleibt Magenta, eingedrueckt mit Schatten im eigenen Ton */
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--primary:hover,
html[data-ak-nm] .main-content .ak-btn.ak-btn.ak-btn.ak-btn--primary:active{
  background: var(--ak-color-primary-hover, #8A0C4C) !important;
  box-shadow: inset 4px 4px 8px rgba(70, 5, 38, 0.45), inset -4px -4px 8px rgba(214, 80, 148, 0.35) !important;
}
html[data-ak-nm] .main-content .ak-btn:focus-visible,
html[data-ak-nm] .mpcs-lesson-row-link:focus-visible{
  outline: 2px solid var(--ak-color-primary);
  outline-offset: 3px;
}

/* Lehrplan (MemberPress Courses) */
html[data-ak-nm] body.single-mpcs-course .mpcs-section{
  background: var(--nm-surface);
  border: 0;
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-raised);
  overflow: visible;
  margin-bottom: 28px;
  padding-bottom: 10px;
}
html[data-ak-nm] body.single-mpcs-course .mpcs-section-header{
  background: transparent;
  border-bottom: 0;
}
html[data-ak-nm] body.single-mpcs-course .mpcs-lessons{ padding: 4px 16px 10px; }
@media (min-width: 901px){ html[data-ak-nm] body.single-mpcs-course .mpcs-lessons{ padding: 4px 24px 12px; } }
html[data-ak-nm] body.single-mpcs-course .mpcs-lesson,
html[data-ak-nm] body.single-mpcs-course .mpcs-lesson:last-child{
  margin: 0 0 14px;
  border: 0;
  border-radius: 20px;
  background: var(--nm-surface);
  box-shadow: var(--nm-raised-sm);
}
html[data-ak-nm] body.single-mpcs-course .mpcs-lesson:last-child{ margin-bottom: 0; }
html[data-ak-nm] body.single-mpcs-course .mpcs-lesson-row-link{ border-radius: 20px; transition: box-shadow 0.2s ease; }
html[data-ak-nm] body.single-mpcs-course a.mpcs-lesson-row-link:hover{ background: transparent; box-shadow: var(--nm-inset); }
html[data-ak-nm] body.single-mpcs-course .mpcs-button.is-outline,
html[data-ak-nm] body.single-mpcs-course.ak-course-design .mpcs-bookmark-link-title,
html[data-ak-nm] body.single-mpcs-course.ak-course-design .mpcs-bookmark-link-title.is-green,
html[data-ak-nm] body.single-mpcs-course.ak-course-design .mpcs-bookmark-link-title.is-purple{
  background: var(--nm-bg);
  border: 0;
  box-shadow: var(--nm-raised-sm);
  color: var(--ak-color-primary);
}
html[data-ak-nm] body.single-mpcs-course .mpcs-button.is-outline{ color: var(--ak-color-text); }
html[data-ak-nm] body.single-mpcs-course .mpcs-button.is-purple{
  background: var(--ak-color-primary);
  border: 0;
  box-shadow: var(--nm-raised-sm);
  color: #fff;
}
html[data-ak-nm] body.single-mpcs-course.ak-course-design .course-progress-bar-main{
  height: 12px !important;
  background: var(--nm-surface);
  box-shadow: var(--nm-inset);
  padding: 2px;
}

/* Weitere Bausteine (2026-10-12, nach Audit Shop, Angebote, NetzwerkBildung,
   Lektion, Produkt, Checkout): Flaechen ohne Rahmen, erhaben in ihrem Ton */

/* Bereich vor dem Footer (globale Sektion, z. B. "Bist du an unseren
   Angeboten interessiert") */
html[data-ak-nm] .nectar-global-section.before-footer,
html[data-ak-nm] .nectar-global-section.before-footer .row-bg{
  background: var(--nm-bg) !important;
}

/* Rose-Flaechen innerhalb von Rastern bringen eigene Schatten-Tokens mit */
html[data-ak-nm] .ak-product-card-option--featured{
  --nm-surface: var(--ak-color-rose, #F8EDF3);
  --nm-dark: rgba(196, 150, 174, 0.5);
  --nm-raised-sm: 5px 5px 10px var(--nm-dark), -5px -5px 10px var(--nm-light);
}

/* Produktraster (Bildungs-Angebote) */
html[data-ak-nm] .ak-product-card{
  background: var(--nm-surface);
  border: 0;
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-raised);
}
html[data-ak-nm] .ak-product-card-image{
  border-radius: 22px;
  box-shadow: var(--nm-inset);
}
html[data-ak-nm] .ak-product-card-option,
html[data-ak-nm] .ak-product-card-option--featured{
  background: var(--nm-surface);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--nm-raised-sm);
}
html[data-ak-nm] .ak-product-filter-item.ak-product-filter-item{
  background: var(--nm-surface);
  border: 0;
  box-shadow: var(--nm-raised-sm);
  transition: box-shadow 0.2s ease;
}
html[data-ak-nm] .ak-product-filter-item.ak-product-filter-item:hover,
html[data-ak-nm] .ak-product-filter-item.ak-product-filter-item[aria-pressed="true"],
html[data-ak-nm] .ak-product-filter-item.ak-product-filter-item.is-active{
  box-shadow: var(--nm-inset);
}

/* Nummerierte Punkte (Feature-Grid, z. B. NetzwerkBildung) */
html[data-ak-nm] .main-content .ak-feature-item{
  background: var(--nm-surface);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--nm-raised-sm);
}

/* Video-Vorschauen (Lektionen, Videobibliothek) */
html[data-ak-nm] .ak-video-card-media{
  border-radius: 20px;
  box-shadow: var(--nm-raised-sm);
}

/* SureCart: Produktkacheln im Shop und auf Produktseiten, Kauf-Buttons */
html[data-ak-nm] .main-content .wp-block-group.has-background{
  background: var(--nm-surface) !important;
  border: 0;
  border-radius: 24px;
  box-shadow: var(--nm-raised);
}
html[data-ak-nm] .main-content .sc-button__link{
  background: var(--ak-color-primary) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--nm-raised-sm);
}
html[data-ak-nm] .main-content .sc-button__link:hover{
  background: var(--ak-color-primary-hover, #8A0C4C) !important;
  box-shadow: inset 4px 4px 8px rgba(70, 5, 38, 0.45), inset -4px -4px 8px rgba(214, 80, 148, 0.35);
}

/* Buttons ausserhalb von .main-content (Bereich vor dem Footer) und
   Lektions-Navigation („Naechster Abschnitt“): Farbe bleibt, nur erhaben */
html[data-ak-nm] .nectar-global-section .ak-btn,
html[data-ak-nm] body.single-mpcs-lesson .mpcs-clearfix > a{
  box-shadow: var(--nm-raised-sm) !important;
}

@media (prefers-reduced-motion: reduce){
  html[data-ak-nm] .main-content .ak-btn,
  html[data-ak-nm] .mpcs-lesson-row-link{ transition: none; }
}