/* Tap-Hint nur Mobil → auf Desktop ausblenden */
@media (min-width: 900px) {
  .tap-hint {
    display: none !important;
  }
}


@font-face {
  font-family: "Pacifico";
  src: url("fonts/Pacifico-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}



html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Lato", sans-serif;
}




/* HORIZONTAL SCROLL */
.horizontal-wrapper {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.panel {
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start; /* jede Sektion fängt exakt an */
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}





/* Panel 2: Illustration + Textbox im Glaslook */
.panel-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1vw;
  background: transparent;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1.7fr 1.5fr;
  gap: 3vw;
  align-items: center;
  width: 75vw;
  max-width: 1400px;
}

/* Linke Spalte – Illustration */
.image-column img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}
.image-column {
    transform: scale(1.1);
    transform-origin: center;
}



/* Button-Row: zwei Buttons nebeneinander, zentriert */
.btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;   /* zentriert unter Überschrift / in der Glasbox */
  align-items: center;
  margin: 4rem auto 1rem; /* Abstand oben/unten, zentriert */
  width: auto;
}

/* Beide Buttons verwenden die vorhandene .btn-gallery / .glass-btn Regeln */
/* Optional: etwas visuelle Priorisierung für 'Termin buchen' */
.btn-gallery.btn-primary {
  /* leicht intensiverer goldener Schein */
  box-shadow:
    0 10px 28px rgba(0,0,0,0.20),
    0 0 18px rgba(209,182,98,0.10);
  border: 1.6px solid rgba(209,182,98,1);
}
/* Button-Farbvariablen (leicht anpassbar) */
:root{
  --btn-text-dark: #2c2b28;        /* dunkles Tannengrün für Text (sehr guter Kontrast auf hellem Glas) */
  --btn-bg-default: rgba(255,255,255,0.14); /* leicht helleres Glas für bessere Lesbarkeit */
  --btn-bg-hover: rgba(255,255,255,0.18);
  --btn-gold: rgba(209,182,98,1);
}



/* Basis: Glas-Button */
.btn-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin: 0 auto 2.5rem;
  padding: .62rem 1.15rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  color: rgba(192, 157, 53, 0.95);
  border: 1.4px solid rgba(255,255,255,0.08);
  background: rgba(255, 255, 255, 0.267);        /* <- aufgehelltes Glas */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}


/* Hover / Fokus: etwas heller Hintergrund + goldener Schein, Text bleibt dunkel */
.btn-gallery:hover,
.btn-gallery:focus {
  transform: translateY(-4px);
  background: rgba(209,182,98,0.40);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.22),
    0 0 22px rgba(209,182,98,0.12);
  color: rgba(255, 255, 255, 0.95);
  outline: none;
   border: 1.5px solid var(--btn-gold);
}



/* Navigation – dezente Goldpfeile */
/* Navigation – dezente Goldpfeile, rechts vom Header */
.nav-arrows {
  position: fixed;
  top: 50%;
  left: var(--header-w);                  /* beginnt rechts neben dem Header */
  width: calc(100% - var(--header-w));    /* Pfeilbereich = Restbreite */
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;                   /* Pfeile blockieren keine Klicks außerhalb */
  z-index: 50;
  transform: translateY(-50%);
}

.arrow {
  pointer-events: auto; /* aktiviert Klick auf Pfeil selbst */
  background: rgba(209, 182, 98, 0.15);
  color: rgba(209, 182, 98, 0.85);
  border: none;
  font-size: 2.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 50%;
  cursor: pointer;
  transition:
    opacity 0.5s ease,
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.arrow:hover {
  background: rgba(209, 182, 98, 0.3);
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.arrow.left {
  margin-left: 0;
}

.arrow.right {
  margin-right: 1rem;
}




.ghost-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 1.8rem;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: transparent;
  text-shadow: 0 2px 6px rgba(87, 66, 8, 0.75);
  margin-left: 2rem;
  margin-right: auto;
}

.ghost-btn:hover {
  background: rgba(209, 182, 98, 0.85);
  color: #d4b321;
  box-shadow: 0 0 10px rgba(209, 182, 98, 0.6);
  transform: translateY(-2px);
}




.whatsapp-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 2rem;
  border: 2px solid rgba(209, 182, 98, 0.85);
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  background: rgba(209, 182, 98, 0.25);
  backdrop-filter: blur(3px);
}

.whatsapp-btn:hover {
  background: rgba(209, 182, 98, 0.9);
  box-shadow: 0 0 15px rgba(209, 182, 98, 0.6);
  transform: translateY(-2px);
}
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.whatsapp-btn .wa-icon {
  color: rgba(209, 182, 98, 0.9);
  transition: color 0.3s ease;
}

.whatsapp-btn:hover .wa-icon {
  color: #fff;
}



/* === PANEL 3 === */


.panel-3 {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  background: transparent;
  overflow: hidden;
}



/* === Navigation-Pfeile Fix === */
.panel-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12000;   /* höher als Header (9999) */
  pointer-events: auto;
}

.panel-nav.left {
  left: 20px;      /* Abstand links */
}

.panel-nav.right {
  right: 20px;     /* Abstand rechts */
}

.panel-nav button {
  background: rgba(209,182,98,0.9);
  border: none;
  color: #09221b;
  padding: 0.8rem 1rem;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.panel-nav button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}


/* Hauptbreakpoint: alles unter 900px = vertikal, lesbar, weich */
@media (max-width: 1250px) {
  /* Body darf endlich normal vertikal scrollen */
  html,
  body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Horizontal-Wrapper wird zum normalen, vertikal scrollenden Container */
  .horizontal-wrapper {
    display: block;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-snap-type: none;
    margin-top: 80px; /* Platz unter dem Header */
  }

  .panel {
    width: 100%;
    height: auto;
    min-height: 100vh;
    scroll-snap-align: none;
    padding: 4rem 1.5rem 5rem;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  /* ===== Panel 1 – Goldbox mit Video ===== */
  .panel-1 {
    padding-top: 2rem;
  }

  .hero-box {
    width: 90vw;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 3rem;
  }

  /* ===== Panel 2 – Illustration & Glasbox ===== */
  .panel-2 {
    padding-top: 2rem;
  }

  .content-wrapper {
    width: 90vw;
    max-width: 700px;
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .image-column {
    order: 1;
    text-align: center;
  }

  .image-column img {
    max-width: 420px;
    margin: 0 auto;
    transform: scale(1); /* etwas kleiner als Desktop */
  }

  .glass-column {
    order: 2;
    width: 100%;
  }

  .glass-box {
    padding: 2rem 1.6rem 2.4rem;
    text-align: center;
  }

  .glass-box h2 {
    font-size: 1.8rem;
    margin-left: 0;
  }

  .glass-box p {
    font-size: 1.05rem;
    margin-left: 0;
  }

  .btn-row {
    flex-direction: column;
    margin: 2.2rem auto 0.5rem;
    width: 100%;
  }

  .btn-gallery {
    width: 100%;
    justify-content: center;
  }

/* === Mini-Marlena Einbindung in Panel 2 === */
/* ============================
   MINI-MARLENA IM SALON (Panel 2)
   ============================ */

/* Eltern-Container MUSS relativen Kontext haben */
.image-column {
    position: relative !important;
    z-index: 0 !important;
    overflow: visible !important;
}

/* Salonbild – Ebene 1 */
.image-column img {
    position: relative !important;
    z-index: 1 !important;
    display: block;
}


/* Mini-Marlena – immer darüber */
#marlena {
    position: absolute !important;
    z-index: 99999 !important;      /* bleibt über dem Bild */
    pointer-events: none;           /* blockiert keine Klicks */

    width: 64px;
    height: 64px;

    background-image: url("bilder/pixel_marlena_full_atlas_64_transparent.png");
    background-position: 0 0;
    image-rendering: pixelated;

    /* Startposition vor dem Tresen (prozentual, responsiv) */
    left: 52%;
    top: 63%;

    /* Figur vergrößern */
    transform-origin: 50% 100%;
    transform: scale(1.5);
}

.image-wrapper {
    transform: scale(1.1);
}

.image-wrapper img {
    transform: none !important;
}


/* Sicherstellen, dass kein Container Stacking-Contexts erzeugt */
.panel-2,
.panel-2 * {
    transform: none !important;
    isolation: auto !important;
    overflow: visible !important;
}
}

#marlena {
  position: absolute;
  width: 64px;
  height: 64px;

  background-image: url("bilder/pixel_marlena_full_atlas_64_transparent.png");
  background-position: 0 0;
  image-rendering: pixelated;

  /* Figur vergrößern */
  transform-origin: 50% 100%;
  transform: scale(1.0);

  /* Position → später Feintuning */
  left: 52%;
  top: 63%;

  z-index: 9999;
  pointer-events: none;
}


.panel-2 {
  position: relative;
}

.image-column {
  position: relative;
  z-index: 10; /* ÜBER der Glasbox */
}

.glass-column {
  position: relative;
  z-index: 1; /* UNTER der image-column */
}

.glass-box {
  position: relative;
  z-index: 1; /* UNTER Marlena und Bild  */
}

.marlena-hint {
  margin-top: 1rem;
  text-align: center;

  background: rgba(0, 0, 0, 0.5);
  color: white;

  padding: 8px 14px;
  border-radius: 10px;

  font-size: 0.95rem;
  letter-spacing: 0.2px;

  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);

  width: fit-content;
  margin-left: auto;
  margin-right: auto;

  animation: hintFade 2s ease-in-out;
}

@keyframes hintFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== Panel 2 – Titel über der Glasbox ===== */
@media (min-width: 1251px) {
  .panel-2 .panel-title {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-family: "Pacifico", cursive;
    font-size: 2.6rem;
    font-weight: 400;
    color: #d1b662;
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
    margin: 0 auto 2.5rem;
    z-index: 10;
    transform: translateY(-10px); /* optional: leicht nach oben rücken */
  }
}

@media (min-width: 1251px) {
  .panel-2 .panel-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: "Pacifico", cursive;
    font-size: 2.6rem;
    font-weight: 400;
    color: #ffffff; /* Schrift in Weiß */
    text-shadow:
      0 0 10px rgba(209,182,98,0.8),
      0 0 20px rgba(209,182,98,0.6),
      0 0 30px rgba(209,182,98,0.4);
    z-index: 10;
    margin: 0;
    padding-top: 4rem;
    width: 100%;
  }

  .panel-2 {
    position: relative;
  }
}





.panel-1-slogan {
  position: relative;
  z-index: 20;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
  margin-top: -5rem;  /* fein anpassen, wenn nötig */
   text-shadow:
    0 0 10px rgba(209,182,98,0.8),
    0 0 20px rgba(209,182,98,0.6),
    0 0 30px rgba(209,182,98,0.4);
}

.panel-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel-1-slogan {
  width: 100%;
  text-align: center;
  order: -1;              /* steht immer über der hero-box */
  margin-bottom: 2rem;
}
/* Sanfter Fade-in für den Slogan */
.panel-1-slogan {
  opacity: 0;
  animation: sloganFade 1.2s ease-out forwards;
}

@keyframes sloganFade {
  from {
    opacity: 0;
    text-shadow:
      0 0 0 rgba(209,182,98,0.0),
      0 0 0 rgba(209,182,98,0.0);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(209,182,98,0.8),
      0 0 20px rgba(209,182,98,0.6),
      0 0 30px rgba(209,182,98,0.4);
    transform: translateY(0);
  }
}

/* MOBILE: "Weiter"-Button unter dem Video ausblenden */
@media (max-width: 1250px) {
  .continue-btn,
  .continue-button,
  .hero-continue,
  .scroll-next {
    display: none !important;
  }
}
/* MOBILE: Navigationspfeile ausblenden (keine horizontale Navigation nötig) */
@media (max-width: 1250px) {
  .nav-arrows,
  .nav-arrows button,
  .arrow,
  .arrow.left,
  .arrow.right {
    display: none !important;
  }
}

/* MOBILE: Panels dichter aneinander rücken */
@media (max-width: 1250px) {
  .panel {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* speziell Panel-2: weniger Abstand nach oben */
  .panel-2 {
    margin-top: -1rem !important;
    padding-top: 1rem !important;
  }

  /* optional: Panel-3 leicht anschmiegen */
  .panel-3 {
    margin-top: -0.5rem !important;
  }
}

@media (min-width: 1251px) {
  .panel-3 {
    align-items: flex-start !important; /* Überschrift oben */
    padding-top: -3rem !important;       /* schöner Abstand zum oberen Rand */
  }

  .gallery-heading {
    margin-bottom: -3rem !important;     /* Abstand nach unten zur Galerie */
  }
}

/* bis hier alles gut */ 

/* === DESKTOP: Footer garantiert zweireihig + Innen-Layouts fixen === */
@media (min-width:1251px){

  /* Footer nicht als Grid/Flex-Zeile missbrauchen */
  .site-footer{ display:block !important; }

  /* Zwei Reihen untereinander */
  .site-footer .footer-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:150% !important;
  }

  /* Reihen sind echte Blöcke (falls irgendwo display:contents steht) */
  .site-footer .footer-row{
    display:block !important;
    width:100% !important;
  }

  /* ----- Reihe 1 (fr-top): eine Linie, Socials ganz rechts ----- */
  .site-footer .fr-top{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    column-gap:100px !important;
    row-gap:1px !important;
    width:100% !important;
  }
  .site-footer .fr-top .footer-item{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    gap:0.8rem !important;
  }
  .site-footer .fr-top .footer-item--socials{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:20px !important;
    flex:0 0 auto !important;
  }

  /* ----- Reihe 2 (fr-bottom): 3-Spalten-Grid ----- */
  .site-footer .fr-bottom{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important; /* Links | Zahlungen | Copy */
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
  }
  .site-footer .fr-bottom .footer-links{ justify-self:start !important; }
  .site-footer .fr-bottom .footer-payments{
    justify-self:center !important;
    display:inline-flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    white-space:wrap !important;
  }
  .site-footer .fr-bottom .footer-copy{
    justify-self:end !important;
    white-space:nowrap !important;
    text-align:right !important;
  }

  /* Lange Texte in Reihe 1 nicht umbrechen lassen */
  .site-footer .fi-value{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:50vw; /* optional, Platzhüter */
  }
}


@media (min-width:1251px){
  footer.site-footer .footer-inner{
    max-width: 1800px !important;     /* ← DEIN Wert */
    width: calc(100vw - 200px) !important; /* 100vw minus Headerkante; feintunen */
    padding-left: 160px !important;
    padding-right: 0 !important;
  }
}
/* bis hier alles gut - INDEX HTML ENDE */ 


/* MEIN WEG HTML ANFANG */ 
/* ===== MEIN WEG – nur auf dieser Unterseite aktiv ===== */

body.page-mein-weg .mw-horizontal {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  height: calc(100vh - 100px); /* Platz unter Header, bei Bedarf anpassen */
}

body.page-mein-weg .mw-panel {
  flex: 0 0 100vw;           /* jede „Seite“ = 1 Bildschirmbreite */
  scroll-snap-align: start;
  padding: 50px 5px 110px -10px;  /* nur Beispielwerte */
}

body.page-mein-weg .mw-panel-inner {
  max-width: 1400px;
}

/* Mein-Weg: horizontale Scrollbar verstecken – nur Desktop */
@media (min-width: 1251px){
  body.page-mein-weg .horizontal-wrapper,
  body.page-mein-weg .mw-horizontal{
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
  }
  body.page-mein-weg .horizontal-wrapper::-webkit-scrollbar,
  body.page-mein-weg .mw-horizontal::-webkit-scrollbar{
    display: none;                /* Chrome/Safari/Edge */
  }
}

@media (min-width: 1251px){
  body.page-mein-weg { overflow-x: clip; } /* schneidet nur Überhang ab, kein Scroll-Lock */
}



/* Panel 1: Portrait bändigen – nur Desktop */
@media (min-width: 1251px){
  body.page-mein-weg .mw-panel-ueber .mw-panel-inner{
    max-width: 1100px;
    padding: 30px 50px;
  }
  body.page-mein-weg .mw-portrait{ margin: 16px 0 0; }
  body.page-mein-weg .mw-portrait img{
    display: block;
    width: 350px; /* skaliert runter */
    height: auto;            /* Proportionen bleiben korrekt */
    margin-bottom: 8rem;
  }
}

@media (min-width:1251px){
  /* 1–2 px „Hairline“-Rand, sehr dezent */
  body.page-mein-weg .mw-portrait img.mw-keyline{
    border: 1px solid rgba(209,182,98,.85);
    border-radius: 18px;                  /* wie Glasboxen */
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }
}



/* Mein-Weg: Überschrift & Untertext – Desktop, einheitlich wie Index */
@media (min-width: 1251px){
  /* H1 in Pacifico + Weiß + goldener Glow */
  body.page-mein-weg .mw-hero h1{
    font-family: "Pacifico", cursive;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
      0 0 10px rgba(209,182,98,0.8),
      0 0 20px rgba(209,182,98,0.6),
      0 0 30px rgba(209,182,98,0.4);
    margin: 20px 0 10px;
  }

  /* kurzer Untertext unter der Headline – lesbar, aber dezent */
  body.page-mein-weg .mw-hero p{
    color: rgba(255,255,255,0.92);
    font-size: 1.3rem;
    max-width: 70ch;
    line-height: 1.6;
    margin: 0 0 20px;
  }
}
@media (min-width: 1251px){
  body.page-mein-weg .mw-tl{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px,1fr);
    gap: 14px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
  }
  body.page-mein-weg .mw-tl-item{
    position: relative;
    padding: 12px 14px;
    border: 1px solid rgba(213,182,98,.45);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(3px);
  }
/* Mein-Weg – Timeline: Glasoptik + Icons (Desktop) */
@media (min-width: 1251px){

  /* Wenn noch nicht gesetzt: Timeline-Reihe */
  /* (Lass diesen Block weg, falls du ihn bereits identisch drin hast) */
  /* body.page-mein-weg .mw-tl{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px,1fr);
    gap: 14px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
  } */

  /* Glas-Boxen mit Goldrand (dieser Block darf die alte .mw-tl-item-Definition ersetzen) */
  body.page-mein-weg .mw-tl-item{
    /* 1:1 an .glass-box aus index angelehnt */
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    background-color: rgba(255, 255, 255, 0.404);
    border: 3px solid rgba(209, 182, 98, 0.85); /* Goldrand */
    border-radius: 18px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.15);
   

    /* Layout/Innenabstand wie zuvor, nur leicht angepasst */
    position: relative;
    padding: 18px 18px 16px 18px;
    text-align: left;
  }
  body.page-mein-weg .mw-tl-year{ display:block; font-weight:700; margin-bottom:4px; }
  body.page-mein-weg .mw-tl-text{ opacity:.95; }


  /* Textfarbe & Glow wie auf Index-Glasboxen: weiß + goldener Schein */
  body.page-mein-weg .mw-tl-item,
  body.page-mein-weg .mw-tl-item .mw-tl-year,
  body.page-mein-weg .mw-tl-item .mw-tl-text{
    color: rgba(255,255,255,0.95);
    text-shadow:
      0 0 6px rgba(163,131,35,0.50),
      0 0 12px rgba(129,104,30,0.35);
  }

  /* Die Gold-Pill (Icon) oben links bleibt ohne Shadow */
  /* Gold-Pill als Icon-Träger: feste Größe + zentriertes SVG */
  body.page-mein-weg .mw-tl-item::before{
    content: "";
    position: absolute;
    top: -12px; left: 12px;
    width: 30px; height: 30px;           /* statt padding */
    border-radius: 999px;
    background-color: rgba(209,182,98,.9);/* Goldkapsel */
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;          /* Icon-Größe */
  }

  /* Icon-Inhalte (sichtbar & schnell prüfbar) */
@media (min-width: 1251px){
  /* ✂️ Schere (Stroke-Icon) */
  body.page-mein-weg .mw-tl-item[data-icon="schere"]::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23182115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4L8.5 15.5'/%3E%3Cpath d='M8.5 8.5L20 20'/%3E%3C/svg%3E");
  }

  /* 🎓 Meister (Graduation Cap) */
  body.page-mein-weg .mw-tl-item[data-icon="meister"]::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23182115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-5 9 5-9 5-9-5z'/%3E%3Cpath d='M21 10v4'/%3E%3Cpath d='M12 15v6'/%3E%3Cpath d='M6 12v3a6 3 0 0012 0v-3'/%3E%3C/svg%3E");
  }

  /* 🔑 Schlüssel */
  body.page-mein-weg .mw-tl-item[data-icon="schluessel"]::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23182115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3Cpath d='M11.5 11.5L21 21'/%3E%3Cpath d='M17 17l-2 2'/%3E%3Cpath d='M14 14l-2 2'/%3E%3C/svg%3E");
  }

  /* ❤️ Herz */
  body.page-mein-weg .mw-tl-item[data-icon="herz"]::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23182115'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.76 0 3.2.88 4 2.09C11.3 4.88 12.74 4 14.5 4 17 4 19 6 19 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  }
}

}
}

@media (min-width: 1251px){
  body.page-mein-weg .mw-row{
    display: grid;
    grid-template-columns: clamp(360px, 34vw, 520px) 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 16px;
  }
  body.page-mein-weg .mw-side{ align-self: start; }
}

@media (min-width: 1251px){
  body.page-mein-weg .mw-portrait{ position: relative; overflow: hidden; }

  body.page-mein-weg .mw-signature--on-photo{
    position: absolute;
    left: 100px;
    bottom: 150px;
    z-index: 2;
    pointer-events: none;

    font-family: "Pacifico", cursive;
    font-size: clamp(2.5rem, 2vw, 2.7rem);
    color: rgba(255,255,255,.95);
    text-shadow:
      0 0 6px rgba(163,131,35,.50),
      0 0 12px rgba(129,104,30,.35);
  }

  /* Optional, falls der Hintergrund zu hell ist:
     <figcaption class="mw-signature mw-signature--on-photo chip">… */
  body.page-mein-weg .mw-signature--on-photo.chip{
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    /* mit Chip reicht ein leichter Shadow */
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
  }
}

@media (min-width: 1251px){
  /* Signatur leicht gekippt wie ein Autogramm */
  body.page-mein-weg .mw-signature--on-photo.mw-signature--tilt{
    transform: rotate(-9deg) skewX(-2deg);
    transform-origin: left 85%;
    /* dein aktuelles position: absolute; left: 220px; bottom: 90px; bleibt! */
    /* optischer Halt */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
    /* etwas sattere Tinte */
    text-shadow:
      0 0 6px rgba(163,131,35,.45),
      0 0 12px rgba(129,104,30,.30);
  }

  /* wichtig, damit sie über den Bildrand „rüber“ darf */
  body.page-mein-weg .mw-portrait{ overflow: visible; }
}

@media (min-width: 1251px){
  body.page-mein-weg .mw-panel-ueber{ position: relative; }
  body.page-mein-weg .mw-panel-ueber .mw-panel-inner{ position: relative; z-index: 1; }

  body.page-mein-weg .mw-parallax{
    position: absolute; inset: -6vh -10vw;
    z-index: 0; pointer-events: none;
    transform: translateX(0); /* wird per JS leicht verschoben */
  }
  body.page-mein-weg .mw-parallax-gold{
    background: radial-gradient(60% 60% at 30% 50%,
      rgba(213,182,98,0.22) 0%,
      rgba(213,182,98,0.08) 45%,
      transparent 70%);
    filter: blur(10px);
  }
  body.page-mein-weg .mw-parallax-monstera{
    background-image: url("bilder/monstera.png");
    background-repeat: no-repeat;
    background-size: 520px auto;
    background-position: right 10% center;
    opacity: 0.18;
  }
}

/* Panel 1: Intro-Absatz größer + weiter unten, Button unten rechts mit Platz für Mini-Marlena */
@media (min-width: 1251px){
  /* 1) Text größer + weiter runter */
  body.page-mein-weg .mw-intro{
    color: rgba(255,255,255,.95);
    max-width: 48ch;
    line-height: 2.0;
    font-size: clamp(1.15rem, 1.3vw, 1.35rem); /* größer */
    margin: 90px 0 0 110px;                           /* weiter unten */
    text-shadow:
      0 0 6px rgba(138, 107, 14, 0.774),
      0 0 12px rgba(77, 60, 10, 0.692);
  }

  /* 2) Container reserviert unten genug Platz (Mini-Marlena + Button) */
  body.page-mein-weg .mw-bridge{
    position: relative;
    padding-bottom: 208px; /* vorher 56px – jetzt ~90–100px für Mini-Marlena + Buttonhöhe */
  }
} 


  /* 3) Button unten rechts – mit Rand/Platz */
@media (min-width: 1251px){
  body.page-mein-weg .mw-to-panel2{
    /* Position wie gehabt */
    position: absolute;
    right: clamp(24px, 4vw, 60px);
    bottom: 56px;             /* lassen wir erstmal so */
    z-index: 3;

    /* Optik: deutlich mehr Kontrast */
    display: inline-block;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255,255,255,.98);
    text-decoration: none;

    /* Glas-Chip mit stärkerem Kontrast & Goldrand */
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    border: 2px solid rgba(209,182,98,.85);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    box-shadow:
      0 8px 28px rgba(0,0,0,.28),
      inset 0 0 0 1px rgba(255,255,255,.08);

    /* leichter Gold-Glow auf der Schrift für Lesbarkeit */
    text-shadow:
      0 0 6px rgba(163,131,35,.50),
      0 0 12px rgba(129,104,30,.35);

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      background .18s ease,
      border-color .18s ease;
  }

  body.page-mein-weg .mw-to-panel2:hover{
    transform: translateX(3px) translateY(-1px);
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
    border-color: rgba(213,182,98,.95);
    box-shadow:
      0 10px 34px rgba(0,0,0,.34),
      inset 0 0 0 1px rgba(255,255,255,.10);
  }

  body.page-mein-weg .mw-to-panel2:active{
    transform: translateX(2px) translateY(0);
  }

  /* Tastatur-Fokus gut sichtbar, ohne Layoutsprung */
  body.page-mein-weg .mw-to-panel2:focus-visible{
    outline: 2px solid rgba(209,182,98,.95);
    outline-offset: 3px;
  }
}
@media (min-width:1251px){
  body.page-mein-weg .mw-portrait img{
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  }
  body.page-mein-weg .mw-portrait:hover img{
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
    filter: saturate(1.06);
  }
}

@media (min-width:1251px){
  body.page-mein-weg .mw-tl-item{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  /* Hover & Tastatur-Fokus */
  body.page-mein-weg .mw-tl-item:hover,
  body.page-mein-weg .mw-tl-item:focus-within{
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }

  /* Pulsiert ein feiner Ring um die Gold-Pill (Pseudo) */
  body.page-mein-weg .mw-tl-item:hover::after,
  body.page-mein-weg .mw-tl-item:focus-within::after{
    content:"";
    position:absolute; top:-16px; left:8px; width:42px; height:42px; border-radius:999px;
    box-shadow: 0 0 0 2px rgba(209,182,98,.55), 0 0 18px rgba(209,182,98,.35);
    animation: mwPulse 1.2s ease-out forwards;
    pointer-events:none;
  }
  @keyframes mwPulse{
    0%{ transform: scale(.9); opacity:.0; }
    40%{ opacity:1; }
    100%{ transform: scale(1.15); opacity:0; }
  }

  /* Icon selbst ein Hauch „bounce“ */
  body.page-mein-weg .mw-tl-item:hover::before,
  body.page-mein-weg .mw-tl-item:focus-within::before{
    transform: translateZ(0) scale(1.04);
    transition: transform .18s ease;
  }
}
@media (min-width:1251px){
  body.page-mein-weg .mw-to-panel2{
    transform: translateZ(0); /* GPU hint */
  }
  body.page-mein-weg .mw-to-panel2:hover{
    transform: translateX(3px) translateY(-1px) scale(1.02);
  }
  body.page-mein-weg .mw-to-panel2:active{
    transform: translateX(2px) translateY(0) scale(0.995);
  }
}
@media (min-width:1251px){
  body.page-mein-weg .mw-tl-item{ outline: none; }
  body.page-mein-weg .mw-tl-item:focus-visible{ outline:2px solid rgba(209,182,98,.95); outline-offset:3px; }
}
/* PANEL 1 ENDE */


/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/


/* PANEL 2 von MEIN_WEG.HTML */ 
@media (min-width:1251px){
  /* Panel 2 jetzt als Bühne: kein 2-Spalten-Layout */
  body.page-mein-weg .mw-panel-beratung .mw-panel-inner{
    max-width: none;
    padding: 20px 20px 0;
  }
  body.page-mein-weg .mw-p2-row{ display: block; }     /* alte Grid-Spalte aus */
  body.page-mein-weg .mw-p2-side{ display: none; }     /* rechte Spalte aus */

  /* Vollflächen-Szene */
  body.page-mein-weg .mw-iso{
    position: relative;
    width: 100%;
    height: 110vh; /* füllt das Panel, passe bei Bedarf */
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
  }
  body.page-mein-weg .mw-iso img{
    width: 100%;
    height: 78%;
    object-fit: cover;          /* Bild füllt die Bühne */
    object-position: center;
    display: block;
    margin-top: 2rem;
  }

  /* Hotspots: Punkte auf dem Bild */
  body.page-mein-weg .mw-hotspot{
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 999px;
    border: 2px solid rgba(209,182,98,.95);
    background: rgba(0,0,0,.25);
    box-shadow: 0 0 12px rgba(0,0,0,.25);
    cursor: pointer;
  }

  /* Glas-Chips direkt im Raum */
  body.page-mein-weg .mw-chip{
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid rgba(209,182,98,.85);
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    color: rgba(255,255,255,.98);
    text-shadow:
      0 0 6px rgba(163,131,35,.50),
      0 0 12px rgba(129,104,30,.35);
    font-weight: 600;
    white-space: nowrap;
    box-shadow:
      0 8px 28px rgba(0,0,0,.28),
      inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events: auto;
  }

  /* Fehlerkultur mit Luft nach unten (Straße/Buttons) */
  body.page-mein-weg .mw-fehlerkultur{ margin: 16px 0 8px; }
}

@media (min-width:1251px){
  /* Bühne bewusst darunter stapeln */
  .panel.panel-2 .mw-iso{ z-index: 1; }

  /* H2 darüberlegen und leicht ins Bild schieben */
  .panel.panel-2 .mw-hero h2#mw-h2{
    position: relative;
    z-index: 2;                /* über .mw-iso */
    display: inline-block;
    transform: translate(-6px, -26px);  /* nur H2 verschoben */
    color: rgba(255,255,255,.98);
    text-shadow:
      0 0 6px rgba(163,131,35,.50),
      0 0 12px rgba(129,104,30,.35);
  }
}

/* Panel 2 – H2 sicher sichtbar, überlappend ins Bild (nur Desktop) */
@media (min-width:1251px){
  /* 1) Bühne bekommt oben Platz für die überlagerte Headline */
  body.page-mein-weg .mw-panel-beratung .mw-iso{
    margin-top: 68px; /* Platzhalter für die H2-Höhe */
  }

  /* 2) Headline-Block als Overlay oben links, ohne Layout zu beeinflussen */
  body.page-mein-weg .mw-panel-beratung .mw-hero{
    position: absolute;   /* nur dieser Block wird überlagert */
    top: 20px;
    left: 200px;
    z-index: 1000;        /* sicher über Bild/Chips/Hotspots */
    pointer-events: none; /* nichts blockieren */
    margin: 0;
  }

  /* 3) H2-Stil (sichtbar & leicht ins Bild gezogen) */
  body.page-mein-weg .mw-panel-beratung .mw-hero h2{
    display: inline-block;
    transform: translateY(-4px);  /* minimal in die Bühne ragen */
    color: rgba(255,255,255,.98);
    text-shadow:
      0 0 6px rgba(163,131,35,.50),
      0 0 12px rgba(129,104,30,.35);
    font-family: "Pacifico", cursive;
    font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  }

  /* 4) Unterzeile optional – zieht leicht mit */
  body.page-mein-weg .mw-panel-beratung .mw-hero .mw-sub{
    margin: 0 0 0 2px;
    max-width: 40ch;
    transform: translateY(-8px);
    color: rgba(255,255,255,.95);
    text-shadow:
      0 0 4px rgba(163,131,35,.45),
      0 0 10px rgba(129,104,30,.30);
  }
}
@media (min-width:1251px){
  /* Subzeile dichter an H2 – hart übersteuern */
  .panel.panel-2 .mw-hero .mw-sub{
    margin-top: -60px !important;  /* vorher evtl. +4px */
    margin-left: 2px !important;
    transform: none !important;   /* frühere translateY aufheben */
  }
}
@media (min-width:1251px){
  /* Panel 2: H2 Glow exakt wie Panel 1 H1 */
  .panel.panel-2 .mw-hero h2{
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow:
      0 0 10px rgba(209,182,98,0.8),
      0 0 20px rgba(209,182,98,0.6),
      0 0 30px rgba(209,182,98,0.4) !important;
  }
}

@media (min-width:1251px){
  /* Panel 2 selbst als Bezugspunkt – beeinflusst H2/Sub NICHT */
  .panel.panel-2{ position: relative; }

  /* Fehlerkultur: unten mittig, im Vordergrund */
  .panel.panel-2 .mw-fehlerkultur{
    position: absolute;
    left: 22%;
    bottom: 150px;             /* bei Bedarf +/– anpassen */
    transform: translateX(-50%);
    z-index: 1200;
    margin: 0;
    max-width: 50ch;
    text-align: center;

    /* nur Lesbarkeit, keine Chip-Optik */
    color: rgba(255,255,255,.98);
    text-shadow:
      0 0 10px rgba(209,182,98,.80),
      0 0 20px rgba(209,182,98,.60),
      0 0 30px rgba(209,182,98,.40);

    pointer-events: none;     /* Hotspots bleiben klickbar */
  }
}
@media (min-width:1251px){
  /* Button unten rechts, oberhalb des Statements */
  .panel.panel-2 .mw-to-panel3{
    position: absolute;
    right: 170px;
    bottom:175px; /* Statement sitzt bei ~24px – hier bewusst drüber */
    z-index: 1201;

    display: inline-block;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255,255,255,.98);
    text-decoration: none;

    /* Glas-Pill wie in Panel 1 */
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    border: 2px solid rgba(209,182,98,.85);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    box-shadow:
      0 8px 28px rgba(0,0,0,.28),
      inset 0 0 0 1px rgba(255,255,255,.08);

    text-shadow:
      0 0 10px rgba(209,182,98,.80),
      0 0 20px rgba(209,182,98,.60),
      0 0 30px rgba(209,182,98,.40);

    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  }
  .panel.panel-2 .mw-to-panel3:hover{
    transform: translateX(3px) translateY(-1px);
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
    border-color: rgba(213,182,98,.95);
    box-shadow:
      0 10px 34px rgba(0,0,0,.34),
      inset 0 0 0 1px rgba(255,255,255,.10);
  }
  .panel.panel-2 .mw-to-panel3:focus-visible{
    outline: 2px solid rgba(209,182,98,.95);
    outline-offset: 3px;
  }
}

@media (min-width:1251px){
  /* Positioniert Tips an denselben Prozent-Koordinaten wie die Chips,
     erscheint über dem Bild, leicht oberhalb der Markierung */
  .panel.panel-2 .mw-tip{
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -110%); /* steht über dem Punkt/Chip */
    z-index: 1202;
    width: clamp(240px, 26vw, 360px);
    padding: 14px 16px;
    border-radius: 18px;
    border: 3px solid rgba(209,182,98,.85);               /* Goldrand */
    background: rgba(255,255,255,0.404);                   /* Glas */
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.95);
    text-shadow:
      0 0 6px rgba(163,131,35,.50),
      0 0 12px rgba(129,104,30,.35);
    pointer-events: none;   /* blockiert keine Hotspots */
    opacity: 0;             /* default: unsichtbar */
    transform-origin: 50% 100%;
    transition: opacity .18s ease, transform .18s ease;
  }
  .panel.panel-2 .mw-tip h3{
    margin: 0 0 6px;
    font-weight: 700;
  }
  .panel.panel-2 .mw-tip.show{
    opacity: 1;
    transform: translate(-50%, -118%); /* kleiner „Lift“ beim Einblenden */
  }
}

@media (min-width:1251px){
  /* Technik & Präzision → nach unten öffnen */
  .panel.panel-2 .mw-tip[data-spot="technik"]{
    transform: translate(-50%, 63%);      /* statt -110% nach unten */
    transform-origin: 50% 0%;
  }
  .panel.panel-2 .mw-tip[data-spot="technik"].show{
    transform: translate(-50%, 53%);       /* kleiner Lift beim Einblenden */
  }

  /* Material & Pflege → nach unten öffnen */
  .panel.panel-2 .mw-tip[data-spot="material"]{
    transform: translate(-50%, 54%);
    transform-origin: 50% 0%;
  }
  .panel.panel-2 .mw-tip[data-spot="material"].show{
    transform: translate(-50%, 44%);
  }
}
/* ENDE VON PANEL 2 */ 

/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/

/* PANEL 3 — Desktop, sauber konsolidiert */
@media (min-width:1251px){
  /* Container & Grundlayout */
  body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner{
    max-width: 1320px;             /* breiter, damit "gestreut" wirkt */
    padding: 40px 60px 80px;       /* Padding war weggefallen */
    position: relative;             /* für CTA-Positionierung */
    overflow: visible;              /* Scatter darf überstehen */
  }

  /* Headline (Gold-Glow wie Panel 1) + Sub */
  body.page-mein-weg .mw-panel-erwartungen .mw-hero h2#mw-h3{
    font-family: "Pacifico", cursive;
    color: rgba(255,255,255,0.92);
    text-shadow:
      0 0 10px rgba(209,182,98,0.80),
      0 0 20px rgba(209,182,98,0.60),
      0 0 30px rgba(209,182,98,0.40);
    margin: 0 0 10px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-hero .mw-sub{
    margin: 0 0 20px;
    color: rgba(255,255,255,0.92);
    max-width: 70ch;
    text-shadow:
      0 0 6px rgba(163,131,35,.45),
      0 0 12px rgba(129,104,30,.30);
  }

  /* Grid (3×2, mehr Luft) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr)); /* schmaler = hochformatiger */
    gap: 28px 36px;
    align-content: start;
  }

  /* Glas-Karten (Basis + Hochformat + Scatter) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card{
    position: relative;
    padding: 20px 18px 18px;
    border-radius: 18px;
    border: 0.1px solid rgba(209,182,98,0.85);     /* Goldrand */
    background: rgba(255,255,255,0.404);         /* Glas */
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.96);
    text-shadow:
      0 1px 2px rgba(223,183,9,0.28),
      0 0 1px rgba(221,166,13,0.26);

    min-height: clamp(280px, 36vh, 380px);      /* hochformatiger */
    transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
    transition: transform .18s ease, box-shadow .18s ease, z-index .18s;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card h3{
    margin: 0 0 8px;
  }
  /* Hover: leicht anheben + geradeziehen */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:hover,
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:focus-within{
    transform: translate(0, -4px) rotate(0deg);
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
    z-index: 2;
  }
  /* Wilder Streu-Offset */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(1){ --r:-2.2deg; --dx:-6px;  --dy:-8px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(2){ --r: 1.8deg; --dx: 8px;  --dy: 4px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(3){ --r:-1.2deg; --dx:12px;  --dy:-10px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(4){ --r: 2.6deg; --dx:-10px; --dy: 6px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(5){ --r:-3.4deg; --dx: 6px;  --dy:12px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(6){ --r: 1.2deg; --dx:-8px;  --dy:-6px;  }

  /* CTA unten rechts (gleiches Pill-Design) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta{
    position: absolute;
    right: clamp(24px, 4vw, 60px);
    bottom: 24px;
    display: flex;
    gap: 10px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta .btn-cta{
    display: inline-block;
    padding: 12px 16px;
    border-radius: 999px;
    color: rgba(255,255,255,.98);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .2px;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    border: 2px solid rgba(209,182,98,.85);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
    text-shadow:
      0 0 10px rgba(209,182,98,.80),
      0 0 20px rgba(209,182,98,.60),
      0 0 30px rgba(209,182,98,.40);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta .btn-cta:hover{
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
    border-color: rgba(213,182,98,.95);
    box-shadow: 0 10px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.10);
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta .btn-cta:focus-visible{
    outline: 2px solid rgba(209,182,98,.95);
    outline-offset: 3px;
  }
}

@media (min-width:1251px){
  /* Panel 3: Karten wirklich HOCHKANT */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid{
    grid-template-columns: repeat(3, 220px); /* schmal ==> Portrait */
    justify-content: space-between;          /* schön gestreut */
    gap: 28px 36px;
  }

  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card{
    width: 200px;              /* fix schmal */
    min-height: 300px;         /* höher -> hochkant */
    padding: 18px 16px 16px;
    font-size: 1.0rem;
    transform: translate(var(--dx,0), var(--dy,0)) rotate(var(--r,0deg));
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p{
    margin: 0; line-height: 1.45;
  }

  /* Dezenter Scatter (kannst du anpassen) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(1){ --r:-1.4deg; --dx:-6px;  --dy:-6px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(2){ --r: 1.2deg;  --dx: 8px;   --dy: 3px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(3){ --r:-0.9deg;  --dx: 10px;  --dy:-8px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(4){ --r: 2.0deg;  --dx:-10px;  --dy: 6px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(5){ --r:-2.2deg;  --dx: 6px;   --dy: 10px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(6){ --r: 1.0deg;  --dx:-8px;   --dy:-6px; }
}

@media (min-width:1251px){
  /* Panel 3: Zweispaltiges Layout – links Headline, rechts Karten */
  body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner{
    display: grid;
    grid-template-columns: 540px 1fr;   /* Breite der linken Spalte (H2+Sub) */
    grid-auto-rows: min-content;
    column-gap: 10px;
    align-items: start;
  }

  /* Headline-Block in die linke Spalte setzen */
  body.page-mein-weg .mw-panel-erwartungen .mw-hero{
    grid-column: 1;
    margin: 0;              /* keinen extra Bottom-Abstand erzeugen */
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-hero .mw-sub{
    margin: 20px 0 0;        /* etwas Luft unter der H2 */
  }

  /* Karten-Grid in die rechte Spalte */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid{
    grid-column: 2;
  }
}

@media (min-width:1251px){
  /* Panel 3 – H2 feintunen: größer, tiefer, weiter links */
  body.page-mein-weg .mw-panel-erwartungen .mw-hero h2#mw-h3{
    font-size: clamp(2rem, 3.0vw, 3rem); /* größer */
    line-height: 1.5;
    transform: translate(-40px, 25px);      /* 12px nach links, 8px nach unten */
  }

  /* Subzeile folgt der H2 etwas weiter unten */
  body.page-mein-weg .mw-panel-erwartungen .mw-hero .mw-sub{
    margin-top: 70px;
    transform: translateX(-40px);          /* leicht mit nach links */
  }
}

@media (min-width:1251px){
  /* CTA unter der Subzeile, links in Spalte 1 */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta{
    position: static;            /* hebt absolute auf */
    grid-column: 1;              /* linke Spalte (neben den Karten) */
    margin: -300px 0 0;            /* Abstand unter der Subzeile */
    display: flex;
    gap: 30px;
    justify-content: flex-start; /* linksbündig */
    align-items: center;
    flex-wrap: wrap;             /* falls eng: bricht sauber um */
  }
}

@media (min-width:1251px){
  /* Startzustand: gestapelt mittig, leicht skaliert & transparent */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid:not(.is-dealt) .mw-exp-card{
    transform: translate(0,0) scale(.88) rotate(0deg);
    opacity: 0;
  }
  /* Deal-Animation: auf Final-Scatter + sicht–bar */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card{
    opacity: 1;
    transform: translate(var(--dx,0), var(--dy,0)) rotate(var(--r,0deg));
    transition:
      opacity .25s ease,
      transform .55s cubic-bezier(.2,.8,.2,1),
      box-shadow .22s ease, z-index .22s;
  }
  /* kleine Staffelung */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card:nth-child(1){ transition-delay: .00s; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card:nth-child(2){ transition-delay: .06s; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card:nth-child(3){ transition-delay: .12s; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card:nth-child(4){ transition-delay: .18s; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card:nth-child(5){ transition-delay: .24s; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid.is-dealt .mw-exp-card:nth-child(6){ transition-delay: .30s; }
}

@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card{
    position: relative; overflow: hidden;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); /* zarte Vignette */
  }
  /* feine Leinenstruktur & Noise als Overlay */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 2px),
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.06) 50%, transparent 51%) repeat;
    background-size:
      100% 4px,           /* feine „Leinen“-Linien */
      200px 200px;        /* zartes Noise */
    mix-blend-mode: overlay;
    opacity:.55;
  }
}
@media (min-width:1251px){
  /* Kopfzeile: dein <strong> bekommt ein Ribbon */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p > strong{
    display:inline-block;
    padding: 6px 10px 5px;
    margin: -2px -6px 6px -6px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(209,182,98,.22), rgba(209,182,98,.10));
    border: 1px solid rgba(209,182,98,.65);
    text-shadow:
      0 0 8px rgba(209,182,98,.45),
      0 0 16px rgba(129,104,30,.30);
  }
  /* kleine goldene Unterstreichung unter dem Titel */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p > strong::after{
    content:""; display:block; height:2px; margin-top:6px;
    background: linear-gradient(90deg, rgba(209,182,98,.9), rgba(209,182,98,.2));
    border-radius: 2px;
  }
}
@media (min-width:1251px){
  /* innerer Schein */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card::after{
    content:""; position:absolute; inset:2px; border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10),
                inset 0 0 18px rgba(209,182,98,.25);
    pointer-events:none;
    transition: box-shadow .2s ease;
  }
  /* Hover-Glow verstärkt */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:hover::after,
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:focus-within::after{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10),
                inset 0 0 24px rgba(209,182,98,.32),
                0 0 22px rgba(209,182,98,.20);
  }
}
@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p .mw-emoji{
    margin-left: 8px;
    filter: saturate(1.05);
  }
}

@media (min-width:1251px){
  /* 1) Lesbarkeits-Scrim: dezente dunkle Schicht UNTER dem Text, ÜBER dem Glas */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card{
    position: relative;
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card::before{
    content:"";
    position:absolute; inset:6px; border-radius:14px;
    background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.10));
    z-index: 0;                 /* liegt unter dem Inhalt, über dem Glas */
    pointer-events: none;
  }
  /* Inhalt über die Scrim heben */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card > *{
    position: relative; z-index: 1;
  }

  /* 2) Text-Kontrast + Glow minimal hochdrehen */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p{
    color: rgba(255,255,255,.98);
    text-shadow:
      0 0 8px  rgba(163,131,35,.45),
      0 0 16px rgba(129,104,30,.30),
      0 1px 1px rgba(0,0,0,.45);   /* kleiner dunkler Stützs Schatten */
    line-height: 1.5;
  }

  /* 3) Ribbon-Titel leicht kräftiger (bleibt elegant) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p > strong{
    background: linear-gradient(180deg, rgba(209,182,98,.28), rgba(209,182,98,.12));
    border-color: rgba(209,182,98,.75);
  }
}
@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card p{
    color: rgba(255,255,255,.98);
    text-shadow:
      0 0 1px rgba(0,0,0,.35),
      0 2px 6px rgba(0,0,0,.35),
      0 0 8px rgba(209,182,98,.25); /* leichter Gold-Hauch */
  }
}

/* =========================
   PANEL 3 – Karten (Desktop)
   ========================= */
@media (min-width:1251px){

  /* Grid für die 6 Karten (leicht „gestreut“) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 28px 36px;
    align-content: start;
    position: relative;
    z-index: 0;
  }

  /* Karten-Grundkörper (Porträtformat) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card{
    position: relative;
    min-height: clamp(300px, 36vh, 380px);
    border-radius: 18px;
    /* leichte „Streuung“ per Variablen (kannst du je Karte überschreiben) */
    --r: 0deg;   /* Rotation */
    --dx: 0px;   /* x-Shift */
    --dy: 0px;   /* y-Shift */
    transform: translate(var(--dx), var(--dy)) rotate(var(--r));
    transition: transform .18s ease, box-shadow .18s ease;
  }
  /* etwas „wilder“ verteilen */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(1){ --r:-2.2deg; --dx:-6px;  --dy:-8px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(2){ --r: 1.6deg; --dx: 8px;  --dy: 4px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(3){ --r:-1.0deg; --dx:12px;  --dy:-10px;}
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(4){ --r: 2.4deg; --dx:-10px; --dy: 6px;  }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(5){ --r:-3.0deg; --dx: 6px;  --dy:12px; }
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:nth-child(6){ --r: 1.2deg; --dx:-8px;  --dy:-6px;  }

  /* Hover/Fokus: leicht anheben & geradeziehen */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:hover,
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-card:focus-within{
    transform: translate(0, -4px) rotate(0deg);
    z-index: 1;
  }

  /* 3D-Flip-Setup */
  body.page-mein-weg .mw-panel-erwartungen .mw-card3d{
    perspective: 1200px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-card3d .mw-card3d-inner{
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    border-radius: 18px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-card3d.is-flipped .mw-card3d-inner{
    transform: rotateY(180deg);
  }

  /* Front/Back – gemeinsamer Rahmen/Glasshadow */
  body.page-mein-weg .mw-panel-erwartungen .mw-card3d .face{
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backface-visibility: hidden;
    border: 3px solid rgba(209,182,98,0.85);           /* Goldrand */
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
  }
}
@media (min-width:1251px){

  /* Flip-Container */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard{
    position: relative;
    width: 100%;
    min-height: clamp(300px, 38vh, 420px);
    perspective: 1200px;
    outline: none;
    cursor: pointer;
  }

  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .mw-flipcard-inner{
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    border-radius: 20px;
  }

  /* Flip-Zustand */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard.is-flipped .mw-flipcard-inner{
    transform: rotateY(180deg);
  }

  /* EINE Glaskarte (Front & Back identisch) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face{
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: 18px;
    border-radius: 20px;
    backface-visibility: hidden;

    /* Glaslook wie auf Index */
    border: 1px solid rgba(209,182,98,0.85);
    background-color: rgba(255, 255, 255, 0.26);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.96);
    text-shadow:
      0 0 10px rgba(209,182,98,0.80),
      0 0 20px rgba(209,182,98,0.60),
      0 0 30px rgba(209,182,98,0.40);
  }

  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back{
    transform: rotateY(180deg);
  }

  /* FRONT: Icon groß, nichts weiter */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.front .icon{
    width: 95%;              /* größer/kleiner: 70–88% */
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.28));
  }

  /* BACK: Titel Pacifico, Text gut lesbar (Sans) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back{
    grid-template-rows: auto auto;
    row-gap: 10px;
    text-align: center;
    padding: 22px 20px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back h3{
    font-family: "Pacifico", cursive;
    font-size: 1.6rem;
    margin: 0;
    color: rgba(255,255,255,0.95);
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back p{
    font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.06rem;
    line-height: 1.55;
    margin: 0;
    max-width: 50ch;
    text-shadow: 0 1px 2px rgba(0,0,0,.35); /* Lesbarkeit */
  }
@media (min-width:1251px){
  /* Basis: transform aus Variablen zusammensetzen */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .mw-flipcard-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* NEU: Variablen */
    --ry: 0deg;   /* Rotation per Klick */
    --ty: 0px;    /* Lift per Hover  */
    transform: rotateY(var(--ry)) translateY(var(--ty));
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    border-radius: 20px;
  }

  /* Flip-Zustand per Klasse: setzt NUR die Rotation */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard.is-flipped .mw-flipcard-inner{
    --ry: 180deg;
  }

  /* Hover hebt NUR leicht an – überschreibt NICHT die Rotation */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:hover .mw-flipcard-inner{
    --ty: -8px;
  }
}
}

/* ========= PANEL 3 – Finetuning (Desktop) ========= */
@media (min-width:1251px){

  /* a) "handgemacht": leichte Grundrotation pro Karte (fein) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard      { --r0: 0deg; }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:nth-child(1){ --r0:-1.6deg; }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:nth-child(2){ --r0: 1.2deg; }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:nth-child(3){ --r0:-0.8deg; }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:nth-child(4){ --r0: 1.8deg; }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:nth-child(5){ --r0:-1.2deg; }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:nth-child(6){ --r0: 0.9deg; }

  /* unser Flip-Transform nimmt die Grundrotation mit */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .mw-flipcard-inner{
    --ry: 0deg;           /* Klick-Flip */
    --ty: 0px;            /* Hover-Lift */
    transform: rotate(var(--r0)) rotateY(var(--ry)) translateY(var(--ty));
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:hover .mw-flipcard-inner{ --ty:-3px; }

  /* b) "Mehr"-Ghost-Button (Front, unten rechts) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.front{
    display: grid; grid-template-rows: 1fr auto; /* Icon + Button-Zeile */
  
    align-content: stretch;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.front .icon{
    align-self: center;
    width: 78%; height: auto; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0,0,0,.28));
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .ghost-more{
    justify-self: end;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.95);
    border: 2px solid rgba(209,182,98,.9);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    text-shadow:
      0 0 10px rgba(209,182,98,.80),
      0 0 20px rgba(209,182,98,.60);
    font: 700 0.95rem/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .ghost-more:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,.30);
    border-color: rgba(213,182,98,.98);
  }

  

  /* d) Scroll-Reveal + zusätzlicher Hover-Effekt */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard{
    opacity: 0;
    transform: translateY(12px) rotate(var(--r0));
    transition: opacity .5s ease, transform .5s ease;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard.is-inview{
    opacity: 1;
    transform: translateY(0) rotate(var(--r0));
  }
  /* leichte Scale auf Hover oben drauf (nur wenn nicht gerade gedreht wird) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:not(.is-flipped):hover{
    transform: translateY(-2px) rotate(0deg);
  }

  /* e) Seitenhinweis „Tap/Klick = Flip“ (rechts am Panel) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flip-hint{
    position: absolute;
    right: clamp(10px, 2vw, 24px);
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 2px solid rgba(209,182,98,.85);
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    color: rgba(255,255,255,.98);
    font: 700 .9rem/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: .3px;
    text-shadow:
      0 0 10px rgba(209,182,98,.80),
      0 0 20px rgba(209,182,98,.60);
    pointer-events: none;  /* nur Hinweis */
    z-index: 5;
  }
}
/* HOTFIX: Karten sofort sichtbar machen (Reveal vorerst aus) */
@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard{
    opacity: 0;
    transform: translateY(12px) rotate(var(--r0,0deg));
    transition: opacity .5s ease, transform .5s ease;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard.is-inview{
    opacity: 1;
    transform: translateY(0) rotate(var(--r0,0deg));
  }
}
/* ===== PANEL 3 – Flip-Fix (Desktop) ===== */
@media (min-width:1251px){
  /* Basis: Perspektive + 3D-Setup */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard{
    perspective: 1200px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .mw-flipcard-inner{
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    /* Variablen: Rotation per Klick, Lift per Hover */
    --ry: 0deg;   /* Rotation Y (Flip) */
    --ty: 0px;    /* Translate Y (Hover) */
    transform: rotateY(var(--ry)) translateY(var(--ty)) !important;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    border-radius: 20px;
  }

  /* Flip-Zustand per Klasse → setzt NUR die Rotation */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard.is-flipped .mw-flipcard-inner{
    --ry: 180deg !important;
  }

  /* Hover hebt NUR leicht an – überschreibt NICHT die Rotation */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:hover .mw-flipcard-inner{
    --ty: -2px;
  }

  /* Wichtig: alte Hover-Transforms neutralisieren (falls irgendwo vorhanden) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard:hover .mw-flipcard-inner{
    transform: rotateY(var(--ry)) translateY(var(--ty)) !important;
  }

  /* 3D-Seiten */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face{
    position: absolute; inset: 0;
      font-family: 'Lato';
    display: grid; place-items: center;
    padding: 18px;
    border-radius: 20px;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    /* dein Glaslook (ein Layer) */
    border: 3px solid rgba(209,182,98,0.85);
    background-color: rgba(255,255,255,0.40);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.96);
    text-shadow:
      0 0 10px rgba(209,182,98,0.80),
      0 0 20px rgba(209,182,98,0.60),
      0 0 30px rgba(209,182,98,0.40);
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back{
    transform: rotateY(180deg);
  }

  /* Front: Icon groß, clean */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.front .icon{
    width: 78%; height: auto; object-fit: contain; object-position: center;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.28));
    display:block;
  }

  /* Back: dein typografisches Setup */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back{
    grid-template-rows: auto auto;
    row-gap: 10px;
    text-align:center;
    padding: 22px 20px;
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back h3{
    font-family: "Pacifico", cursive;
    font-size: 1.6rem; margin: 0; color: rgba(255,255,255,0.95);
    text-shadow:
      0 0 10px rgba(209,182,98,.80), 0 0 20px rgba(209,182,98,.60),
      0 0 30px rgba(209,182,98,.40), 0 1px 2px rgba(0,0,0,.45);
    -webkit-text-stroke: 0.6px rgba(0,0,0,.25);
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back p{
    font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.06rem; line-height: 1.55; margin: 0; max-width: 50ch;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
}

/* === Panel 3: Karten-Überschriften & Signature-Palette (Desktop) === */
@media (min-width:1251px){

  /* Signature-Farben nur noch: Weiß, Gold, Tannengrün */
  :root{
    --sig-white: rgba(255,255,255,0.96);
    --sig-gold:  #D1B662;                          /* wie dein Goldrand */
    --sig-tanne: #0F3B2E;                          /* Tannengrün */
  }

  /* Karten-Überschrift (Back): andere Schrift + Tannengrün */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back h3{
    font-family: 'Lato';
    font-size: 1.6rem;
    margin: 0;
    color: var(--sig-tanne);
    /* Mini-Halo für Lesbarkeit, ohne Gold-Glow-Overkill */
    text-shadow:
      0 1px 2px rgba(0,0,0,.45),
      0 0 6px rgba(15,59,46,.20);                  /* sanfter, farbgleicher Schein */
    -webkit-text-stroke: 0.4px rgba(0,0,0,.25);    /* hauchdünne Outline */
  }

  /* Optional: Back-Text neutraler (weiß) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back p{
    color: var(--sig-white);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
  }
}
@media (min-width:1251px){
  :root{ --sig-tanne:#0F3B2E; }

  /* FRONT-Titel: Playfair + Tannengrün (kleiner als Back) */
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.front .front-title{
    font-family: 'Lato' !important;
    font-weight: 700;
    font-size: 1.2rem;           /* kleiner als Rückseite */
    line-height: 1.25;
    margin-top: 1rem;
    color: var(--sig-tanne) !important;
    text-align: center;
    /* dezenter Halo für Lesbarkeit, kein Goldglow */
    text-shadow:
      0 1px 2px rgba(0,0,0,.45),
      0 0 6px rgba(15,59,46,.18);
    -webkit-text-stroke: 0.4px rgba(0,0,0,.20);
    pointer-events: none;         /* Klicks flippen weiter die Karte */
  }
}

@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner{ position: relative; }
}

/* Panel 3 – Flip-Hinweis links, gut sichtbar (nur Desktop) */
@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner{
    position: relative; /* Bezugspunkt für den Hinweis */
  }
  body.page-mein-weg .mw-panel-erwartungen .mw-flip-hint{
    position: absolute;
left: clamp(424px, 7vw, 180px);
right: auto;
bottom:84px;
top: auto;
transform: none !important;

    z-index: 6;
    pointer-events: none;          /* nur Hinweis, keine Klicks abfangen */
  }
}

/* ============ Scroll-Dots & Wegweiser (Desktop) ============ */
@media (min-width:1251px){
  /* Dots: unten mittig, Glas + Goldrahmen, klickbar */
  .mw-dots{
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 2px solid rgba(209,182,98,.85);
    background: rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    box-shadow: 0 8px 26px rgba(0,0,0,.22);
    z-index: 40;
  }
  .mw-dots .dot{
    width: 10px; height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    border: 2px solid rgba(209,182,98,.85);
    display: inline-block;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .mw-dots .dot:hover{ transform: scale(1.15); }
  .mw-dots .dot[aria-current="true"]{
    background: rgba(209,182,98,.95);
    box-shadow: 0 0 10px rgba(209,182,98,.80), 0 0 20px rgba(209,182,98,.50);
  }

  /* Wegweiser: rechte Kante, vertikal mittig */
  .mw-edge-hint{
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: none; /* nur Button klickbar machen */
  }
  .mw-edge-hint .mw-edge-btn{
    pointer-events: auto;
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 999px;
    border: 2px solid rgba(209,182,98,.9);
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    color: rgba(255,255,255,.96);
    font: 700 .95rem/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: .2px;
    box-shadow: 0 10px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.08);
    text-shadow:
      0 0 10px rgba(209,182,98,.80),
      0 0 20px rgba(209,182,98,.60);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
  }
  .mw-edge-hint .mw-edge-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(213,182,98,.98);
    box-shadow: 0 12px 36px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.10);
  }
  .mw-edge-hint.is-end .mw-edge-btn{ opacity: .25; pointer-events: none; }
}

/* Scroll-Dots & Wegweiser über Footer legen */
.mw-dots,
.mw-edge-hint{
  position: fixed;           /* viewport-basiert */
  z-index: 10;             /* über Header/Footer */
}

/* Abstand vom Footer: per Variable (wird gleich via JS gesetzt) */
.mw-dots{ bottom: 95px; left:50%; transform:translateX(-50%); }
.mw-edge-hint{ right: 18px; top: 50%; transform: translateY(-50%); }

/* Falls der Footer Schatten/Overlay hat, sicherheitshalber Pointer durchlassen */
.site-footer{ pointer-events: auto; }

/* Scroll-Dots: aktiver Dot = Gold */
.mw-dots .dot[aria-current="true"]{
  background: #D1B662 !important; /* Gold */
  border-color: #D1B662 !important;
  box-shadow:
    0 0 10px rgba(209,182,98,.80),
    0 0 20px rgba(209,182,98,.50);
}

/* optional: Keyboard-Fokus sichtbar */
.mw-dots .dot:focus-visible{
  outline: 2px solid #D1B662;
  outline-offset: 2px;
}

@media (min-width:1251px){
  .mw-edge-hint{ display:none !important; }
}

/* Bis hier alles gut */

/* ===========================
   Panel 2 – Glasbox responsive
   =========================== */

/* Mittelbreite Desktops */
@media (min-width: 1251px) and (max-width: 1600px) {
  .panel-2 .glass-box {
    width: 80%;
    padding: 1.8rem 1.6rem 2rem;
  }

  .panel-2 .glass-box h2 {
    font-size: 1.5rem;
    margin-bottom: 1.6rem;
  }

  .panel-2 .glass-box p {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .panel-2 .btn-row {
    margin-top: 1.8rem;
  }
}

/* Schmale Desktops und große Tablets */
@media (min-width: 900px) and (max-width: 1250px) {
  .panel-2 .glass-box {
    width: 90%;
    padding: 1.4rem 1.2rem 1.6rem;
  }

  .panel-2 .glass-box h2 {
    font-size: 1.35rem;
    margin-bottom: 1.2rem;
  }

  .panel-2 .glass-box p {
    font-size: 1rem;
    line-height: 1.45;
  }

  .panel-2 .btn-row {
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.4rem;
  }

  .panel-2 .btn-gallery.glass-btn {
    width: 100%;
    text-align: center;
  }
}

/* Panel 2 – Glasbox feinabgestimmt (nur Box selbst) */
@media (min-width: 1251px) {
  .panel-2 .glass-column {
    margin-top: 1.5rem;             /* Abstand zur Überschrift */
    width: clamp(420px, 42vw, 620px); /* passt sich Bildschirmbreite an */
    max-height: 70vh;             /* bleibt optisch ausgewogen */
    padding: 2rem 1.8rem 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
  }

  .panel-2 .glass-box h2 {
    margin-top: 0;
    margin-bottom: 1.8rem;
    font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  }

  .panel-2 .glass-box p {
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.5;
    margin-bottom: 1.4rem;
  }

  .panel-2 .btn-row {
    margin-top: 1.6rem;
    gap: 0.8rem;
  }
}

@media (min-width: 1251px) {
.glass-column {
  height: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
}
#panel-2 {
  align-items: flex-start;
}
.glass-box {
  height: auto !important;
  min-height: 0 !important;
}
#panel-2 {
  height: auto !important;
  min-height: 0 !important;
}

}





@media (min-width:1251px) {
  :root { --meinweg-gap: 10px; } /* bei Bedarf nur diesen Wert anpassen */

  /* 1) Hauptmaßnahme:
     Wir verschieben die inneren Content-Container rechts um die Header-Breite + Gap.
     Dadurch bleibt das Scroll-/Panel-Layout unangetastet, der Text wird sichtbar. */
  body.page-mein-weg .mw-panel-inner {
    margin-left: calc( max(var(--header-w, 250px), var(--header-w-shrunk, 150px)) + var(--meinweg-gap) ) !important;
    box-sizing: border-box !important;
    /* sorgt dafür, dass der sichtbare Inhalt nicht über den Viewport hinausragt */
    max-width: calc(100% - ( max(var(--header-w, 250px), var(--header-w-shrunk, 150px)) + var(--meinweg-gap) )) !important;
    transition: margin-left .18s ease !important;
    will-change: margin-left !important;
  }

  /* 2) Safety: Panel-Inhalte behalten die Panellogik (100vw) für das horizontale Snap.
     Wir ändern NICHT die .mw-panel Breite, nur den inneren Inhalt. */
  body.page-mein-weg .mw-panel {
    min-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* 3) Extra: Panel-1 (Headline / Sub / Portrait) greifen jetzt sauber auf .mw-panel-inner zurück.
     Keine separaten 'left/transform' Overrides mehr nötig. */
  body.page-mein-weg .mw-panel-ueber .mw-hero h1,
  body.page-mein-weg .mw-panel-ueber .mw-intro,
  body.page-mein-weg .mw-panel-ueber .mw-portrait {
    /* diese Elemente nutzen jetzt die margin-left des .mw-panel-inner.
       Falls du bei einzelnen Elementen eine andere Feinanpassung brauchst,
       ändere nur margin-inline-start hier (nicht die Header-Logik). */
    margin-inline-start: 0 !important;
  }
}

@media (min-width:1251px) {
  body.page-mein-weg .mw-tl {
    /* Grid bleibt, aber wird responsiv: Elemente füllen Reihen und umbrechen bei Platzmangel */
    display: grid !important;
    grid-auto-flow: row; /* erlaubt mehrere Reihen */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px;
    align-items: start;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
  }

  /* Sicherstellen, dass einzelne Items nicht brechen / ihre Gold-Pill behalten */
  body.page-mein-weg .mw-tl-item {
    min-width: 160px;        /* verhindert zu enge Kacheln */
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: left;
  }

  /* Falls nötig: kurze Zeilenumbrüche im Text verhindern, saubere Darstellung */
  body.page-mein-weg .mw-tl-item .mw-tl-year,
  body.page-mein-weg .mw-tl-item .mw-tl-text {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1251px) {
  body.page-mein-weg .mw-to-panel2 {
    position: fixed !important;
    right: clamp(20px, 4vw, 64px) !important; /* responsiv nach rechts rücken */
    bottom: calc(var(--footer-height, 64px) + 16px) !important; /* immer oberhalb Footer */
    z-index: 12050 !important;    /* über Panels, ohne Modals zu stören */
    left: auto !important;
    top: auto !important;
    pointer-events: auto !important;
    transition: right 160ms ease, bottom 160ms ease;
  }
}

@media (min-width:1251px) {
  /* Nur H1 + Subtext / Intro in Panel-1 anpassen — keine andere Regel ändern */
  body.page-mein-weg .mw-panel-ueber .mw-hero h1,
  body.page-mein-weg .mw-panel-ueber .mw-hero p,
  body.page-mein-weg .mw-panel-ueber .mw-intro {
    position: relative !important; /* sicherstellen, dass top wirkt (ist schon gesetzt) */
    top: clamp(10px, 1.6vw, 36px) !important; /* verschiebt nach unten: responsive */
    transition: top 120ms ease !important;
    will-change: top !important;
  }

p.mw-intro, #text {
  text-shadow: 
0 0 10px rgba(100, 73, 0, 0.3), 
0 0 5px rgba(54, 40, 0, 0.2), 
0 0 5px rgba(54, 40, 0, 0.2) !important;
}
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Minimaler Fix: zeige .mw-to-panel2 ausschließlich in Panel 1 (mw-panel-ueber) — Desktop only */
@media (min-width:1251px) {
  /* Verstecke alle Panel-1-Weiter-Buttons global (sichert gegen Duplikate/Clones) */
  body.page-mein-weg .mw-to-panel2 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Erlaube den Button **nur** wenn er im Panel 1 steht (scope = .mw-panel-ueber) */
  body.page-mein-weg .mw-panel-ueber .mw-to-panel2 {
    display: inline-block !important;
    visibility: visible !important;
    pointer-events: auto !important;

    /* Positionierung: exakt wie vorher, aber streng innerhalb von Panel-1 */
    position: absolute !important;
    right: clamp(24px, 4vw, 60px) !important;
    bottom: 56px !important;
    z-index: 3000 !important; /* hoch genug, aber nicht globaler Layout-Eingriff */
  }
}


@media (min-width:1251px) {
  /* Panel-1: robust unten-rechts platzieren (relativ zum Panel) */
  body.page-mein-weg .panel.panel-1 .mw-to-panel2 {
    position: absolute !important; /* relativ zu .panel-1 (Panel bleibt position: relative) */
    right: clamp(5px, 0.5vw, 12px) !important; /* responsiv: bleibt rechts, skaliert leicht mit Viewport */
    bottom: calc( var(--footer-height, 64px) - 10px + env(safe-area-inset-bottom, 0px) ) !important;
    z-index: 1202 !important; /* über Inhalt, aber unter evtl. sehr hohe UI-Elemente */
    transform: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    pointer-events: auto !important;
  }

  /* Auf allen anderen Panels vollständig ausblenden (sicherheitshalber) */
  body.page-mein-weg .panel:not(.panel-1) .mw-to-panel2 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

@media (min-width:1251px) {
  body.page-mein-weg .mw-intro {
    /* etwas weniger Abstand zur Timeline:
       - bei großen Bildschirmen bleibt genug Luft
       - bei schmaleren Desktops rückt der Text automatisch etwas weiter nach oben */
    margin-top: clamp(24px, 1.8vw, 24px) !important;
    transition: margin-top 120ms ease !important;
    will-change: margin-top !important;
  }

  /* Falls die Timeline noch zuviel Abstand hat, kleinere Top-Marge */
  body.page-mein-weg .mw-tl {
    margin-top: 24px !important;
  }
}

/* bis hier alles gut, panel 1 von mein-weg ist responsive gut */ 

/* PANEL 2 Responsive desktop */

@media (min-width:1251px) and (max-width:1400px) {
  body.page-mein-weg .mw-iso img {
    /* linear von 0.92 (bei 1251px) auf 1.00 (bei 1400px) */
    --mw-scale: clamp(
      0.92,
      calc(0.92 + ((100vw - 1251px) / (1400 - 1251)) * 0.08),
      1
    );

    max-width: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform: translateX(-1.6vw) scale(var(--mw-scale)) !important;
    transform-origin: center center !important;
    transition: transform .18s ease !important;
    will-change: transform !important;
  }
}


/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Nur .mw-fehlerkultur: responsive Schrift + sanfte, responsive Höhenanpassung */
@media (min-width:1251px) {
  body.page-mein-weg .mw-fehlerkultur {
    position: absolute !important; /* bleibt an seinem Panel-Bezugspunkt */
    left: 22% !important;          /* unverändert, nur Sicherstellung */
    transform: translateX(-50%) !important;

    /* Text skalieren: kleinste, ideale, größte Größe */
    font-size: clamp(1.02rem, 0.9rem + 0.7vw, 1.28rem) !important;
    line-height: 1.6 !important;
    max-width: 54ch !important;
    text-align: center !important;
    padding: 6px 12px !important;

    /* Vertikal: hält Abstand zur Timeline konstant, verschiebt sich leicht bei schmalerer Breite */
    bottom: clamp(110px, 11vh, 170px) !important;

    /* sanfte Übergänge wenn Viewport sich ändert */
    transition: font-size .16s ease, bottom .16s ease !important;
    will-change: font-size, bottom !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Nur: .mw-fehlerkultur etwas höher + weiter nach rechts (minimal, responsiv) */
@media (min-width:1251px) {
  body.page-mein-weg .mw-fehlerkultur {
    /* weiter nach rechts (responsiv, klammern verhindern extremes Verschieben) */
    left: clamp(26%, 30% + 0.5vw, 36%) !important;

    /* ein Stück höher (mehr Abstand vom Footer = höhere bottom-Werte) */
    bottom: clamp(160px, 11vh, 220px) !important;

    /* Erhalt der bisherigen Zentrierung/Translation */
    transform: translateX(-50%) !important;

    /* sanfter Übergang bei Größenänderung */
    transition: left .14s ease, bottom .14s ease !important;
    will-change: left, bottom !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Responsive Zeilenumbruch nur für .mw-fehlerkultur (Desktop ≥1251px) */
@media (min-width:1251px) {
  body.page-mein-weg .mw-fehlerkultur {
    /* Steuert die Breite / Zeilenlänge: nie zu schmal, nie zu breit */
    inline-size: clamp(28ch, 36vw, 60ch) !important;
    max-inline-size: clamp(28ch, 36vw, 60ch) !important;
    width: auto !important;                 /* damit left/transform unverändert wirken */

    /* Erzwingt normalen Umbruch / Trennungen bei Bedarf */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;

    /* Optik: kleine Innenabstände, zentriert wie vorher */
    padding: 0 0.8rem !important;
    text-align: center !important;

    /* Keine Positionsänderung — vorhandene left/bottom/transform bleiben aktiv */
    box-sizing: border-box !important;
    transition: none !important; /* keine unerwarteten Animationen */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Minimaler, responsiver Fix: Panel-2 „weiter zu ... erwarten dürfen“ button weiter nach rechts
   - Abstand zum Footer unverändert (bottom bleibt wie gehabt)
   - Button wird nur in panel-2 angezeigt, auf anderen Panels ausgeblendet
*/
@media (min-width:1251px){
  /* 1) Verstecke alle Instanzen dieses Buttons außerhalb von Panel 2 */
  .panel:not(.panel-2) .mw-to-panel3 {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* 2) Zeige & positioniere den Button in Panel 2 — nur RIGHT anpassen, bottom bleibt unverändert */
  .panel.panel-2 .mw-to-panel3 {
    display: inline-block !important;   /* sicherstellen, sichtbar in Panel 2 */
    position: absolute !important;
    /* weiter nach rechts (kleinerer right-Wert = näher an rechter Kante) */
    right: clamp(80px, 6vw, 140px) !important;
    /* Bottom unverändert belassen, damit Footer-Abstand bleibt */
    bottom: 175px !important;
    z-index: 1201 !important;
    transform: translateZ(0) !important;
  }
}


/* Panel 2 ende und Panel 3 start */ 

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Minimaler, responsiver Shrink der linken Spalte (Panel 3) */
@media (min-width:1251px){
  /* Linke Spalte wird kleiner: flexibel zwischen 300px und 420px,
     statt vorher 540px — so gewinnen die Karten mehr Raum. */
  body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner{
    grid-template-columns: clamp(300px, 28vw, 420px) 1fr !important;
    column-gap: clamp(8px, 1.1vw, 20px) !important;
  }

  /* Karten-Grid möglichst effizient nutzen (nur Feinsteuerung, kein Layout-Umbau) */
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-grid{
    width: 100%;
    grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
    gap: clamp(18px, 2.4vw, 36px) !important;
  }
}

@media (min-width:1251px){
  body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner{
    /* nur visuelles Verschieben nach links, keine Layout-Breite ändern */
    transform: translateX(calc(-1 * clamp(90px, 8vw, 320px))) !important;
    will-change: transform;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* PANEL 3 — zwingend sichtbare .mw-exp-cta weiter nach unten schieben (nur Desktop) */
@media (min-width:1251px) {
  body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta{
    /* nur dieses Element beeinflussen — kein Einfluss auf Header/andere Panels */
    position: absolute !important;          /* relativ zu .mw-panel-erwartungen .mw-panel-inner (ist position:relative) */
    left: -40px !important;                  /* behält linke Spalten-Ausrichtung bei */
    bottom: calc(var(--footer-height, 64px) + 130px) !important; /* immer oberhalb des Footers, Abstand anpassbar */
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-start !important;

    /* Sichtbarkeit erzwingen */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1300 !important;
    transform: none !important;
    margin: 0 !important;
    pointer-events: auto !important;

    /* Optional: sanfte Positionier-Transition (visuell, kein Layout-Shift für andere Elemente) */
    transition: bottom 160ms ease !important;
    will-change: bottom !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* PANEL 3 — nur: mw-flip-hint weiter nach links (responsiv, minimal) */
@media (min-width:1251px) {
  body.page-mein-weg .mw-panel-erwartungen .mw-flip-hint{
    /* weiter nach links als vorher — responsiv (kleiner Wert = weiter links) */
    left: clamp(270px, 36vw, 180px) !important;

    /* nichts sonst verändern — nur sicherstellen, dass right nicht im Weg ist */
    right: auto !important;
    /* restliche Eigenschaften (bottom/top/transform/pointer-events/z-index) lasse ich unverändert */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS
   Panel 3 — Feintuning: mehr Breite / weniger Höhe für Rückseiten-Text */
@media (min-width:1251px) {
  body.page-mein-weg .mw-panel-erwartungen .mw-flipcard .face.back p {
    box-sizing: border-box !important;
    display: block !important;
    margin: 0.1rem 0 !important;          /* sehr kleiner vertikaler Puffer */
    padding: 0 0.2rem !important;         /* weniger Innenabstand → mehr Breite */
    max-width: calc(100% - 0.5rem) !important; /* nutzt mehr der Kartenbreite */
    font-size: clamp(0.90rem, 0.94rem + 0.22vw, 1.00rem) !important; /* etwas kleineres Maximum */
    line-height: 1.3 !important;          /* straffer, spart vertikalen Platz */
    text-align: center !important;
    hyphens: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
}

@media (min-width:1251px) {
  .mw-panel-erwartungen .mw-flipcard .face.back p {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: calc(100% - 24px) !important; /* Puffer innen, damit nicht an den Rand stößt */
    padding-left: 8px !important;
    padding-right: 8px !important;
    hyphens: auto !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Leichte, gezielte Rücknahme der Schrift bei Überlauf */
  .mw-panel-erwartungen .mw-flipcard .face.back p.mw-overflowing-text {
    font-size: 0.95rem !important;
    line-height: 1.36 !important;
  }

  /* Sehr seltene Extra-Anpassung */
  .mw-panel-erwartungen .mw-flipcard .face.back p.mw-overflowing-text.too-tight {
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
  }

  /* etwas Innenabstand der Karte, falls nötig */
  .mw-panel-erwartungen .mw-flipcard .face.back {
    padding: 8px 8px !important;
    box-sizing: border-box !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Minimaler, responsiver Overhang für Parallax-Layer 2–5 — nur Desktop */
@media (min-width: 1251px) {
  /* Basis: alle Layers etwas breiter als Viewport, zentriert nach links verschoben */
  body.page-mein-weg #parallax .layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    /* Overhang verhindert sichtbares Abschneiden bei horizontaler Translation */
    min-width: 150vw !important;
    left: -21vw !important;
    /* leicht größer skaliert, damit bei kleinen Glasflächen kein leerer Rand entsteht */
    background-size: auto 105% !important;
    will-change: transform;
  }

  /* Feintuning pro Tiefe (du kannst Werte anpassen, wenn du mehr/weniger Überhang willst) */
  body.page-mein-weg #parallax .layer-2 { min-width: 140vw !important; }
  body.page-mein-weg #parallax .layer-3 { min-width: 160vw !important; }
  body.page-mein-weg #parallax .layer-4 { min-width: 180vw !important; }
  body.page-mein-weg #parallax .layer-5 { min-width: 200vw !important; }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Layer-1 soll die komplette Bildschirmbreite füllen (nur Desktop) */
@media (min-width:1251px) {
  body.page-mein-weg #parallax .layer-1 {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    /* Volle Breite / volle Höhe der Viewport-Fläche */
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;

    /* Bildbreite füllen, Seitenverhältnis beibehalten */
    background-size: cover !important; /* füllt Breite, Höhe skaliert proportional */
    background-position: center top !important;
    background-repeat: no-repeat !important;

    /* sicherstellen, dass Layer-1 weiterhin hinter allem liegt */
    z-index: -2 !important;
    pointer-events: none !important;

    /* keine zusätzliche Verschiebung durch andere Regeln erlauben */
    transform: translateX(0) !important;
  }
}

/* Responsive Dsktop fertig. */


#parallax .layer-2 { min-width: 110vw !important; }
#parallax .layer-3 { min-width: 120vw !important; }
#parallax .layer-4 { min-width: 130vw !important; }
#parallax .layer-5 { min-width: 140vw !important; }

    

@media (min-width: 1251px) and (max-height:650px) {
body.page-mein-weg .mw-portrait img {
width: 220px;
}

body.page-mein-weg .mw-intro {
  margin-top: 1px !important;
  line-height: 1.5;
}

body.page-mein-weg .mw-signature--on-photo{
  left:0px !important;
}
    body.page-mein-weg .mw-row {
        display: grid;
        grid-template-columns: clamp(360px, 34vw, 520px) 1fr;
        gap: 0px;
}

body.page-mein-weg .panel.panel-1 .mw-to-panel2 {
        position: absolute !important;
        right: -170px !important;
        bottom: calc(var(--footer-height, 64px) + 40px + env(safe-area-inset-bottom, 0px)) !important;
        scale: 0.85;
      }

body.page-mein-weg .mw-panel {
scale:0.9;
}    

    body.page-mein-weg .mw-panel-erwartungen .mw-flip-hint{
        left: 100px !important;
        right: auto !important;
 }

#main > div > div > section.panel.panel-3.mw-panel.mw-panel-erwartungen {
  scale:0.75;
  margin-top: -80px;
  z-index: 99999999999999999;
}

body.page-mein-weg .horizontal-wrapper, body.page-mein-weg .mw-horizontal {
      padding-bottom: 0 !important;
    }

.panel.panel-2 .mw-to-panel3 {
bottom: 110px !important; 
right: -150px !important;
}

body.page-mein-weg .mw-panel .mw-panel-ueber {
width: 120vw !important;
} 

body.page-mein-weg .mw-panel-ueber .mw-panel-inner {
padding: 30px 30px;
margin-left: 350px !important;
max-width: none !important;
}
}


@media (min-width: 1251px) and (min-height:651px) and (max-height:750px) {
body.page-mein-weg .mw-portrait img {
width: 280px;
}

body.page-mein-weg .mw-intro {
  margin-top: 1px !important;
  line-height: 1.5;
}

body.page-mein-weg .panel.panel-1 .mw-to-panel2 {
        position: absolute !important;
        scale: 0.9;
        right: -30px !important;
        bottom: calc(var(--footer-height, 64px) + 0px + env(safe-area-inset-bottom, 0px)) !important;
}


body.page-mein-weg .mw-panel {
scale:0.95;
}
    body.page-mein-weg .mw-panel-ueber .mw-panel-inner{
      padding: 0 !important; 
    }

body.page-mein-weg .mw-panel-erwartungen .mw-hero h2#mw-h3{
  margin-left: 40px !important;
}

body.page-mein-weg .mw-panel-erwartungen .mw-hero .mw-sub {
        margin-top: 70px;
        transform: none;
}

body.page-mein-weg .mw-panel-erwartungen .mw-exp-cta {
        left: -0px !important;
}

    body.page-mein-weg .mw-panel-erwartungen .mw-flip-hint{
        left: 150px !important;
 }

.panel.panel-2 .mw-to-panel3 {
bottom: 120px !important; 
right: -70px !important;
}

}


@media (min-width: 1251px) and  (max-height: 800px) {
.panel.panel-2 .mw-to-panel3 {
  scale: 0.85;
}

.panel.panel-2 .mw-fehlerkultur {
bottom: 20% !important;
scale: 0.85;
left: 22% !important;
max-inline-size: 20vw !important;
}

body.page-mein-weg .mw-panel-erwartungen .mw-panel-inner {
margin-left: 360px !important;
padding: 0 !important;
}    

    body.page-mein-weg .mw-panel-erwartungen .mw-flip-hint {
        left: 70px !important;
        right: auto !important;
    }
}

/* DESKTOP – geringe Höhe */
@media (min-width: 1251px) and (max-height: 700px) {

  /* Wrapper darf scrollen */
  html, body {
    overflow-y: auto;
  }

  /* nur für mein-weg */
  body.page-mein-weg .horizontal-wrapper {
    overflow-y: auto;
    height: 100vh;
  }

  /* Panel NICHT hart begrenzen */
  body.page-mein-weg .panel {
    height: auto;
    min-height: 100vh;
  }

  /* optional: leichte optische Verkleinerung */
  body.page-mein-weg .mw-scale-wrapper {
    transform: scale(0.92);
    transform-origin: top center;
  }

    body.page-mein-weg .mw-panel-inner {
  margin-left: calc(max(var(--header-w, 350px), var(--header-w-shrunk, 150px)) + 100px) !important;
}
}

/* MEIN-WEG: Footer exakt wie ruby-header-footer.css */
body.page-mein-weg .site-footer {
  position: relative;
  isolation: isolate;      /* trennt Footer vom Eltern-Rendering */
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


@media (min-width: 1251px) {
.glass-column {
  height: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
}
#panel-2 {
  align-items: flex-start;
}
.glass-box {
  height: auto !important;
  min-height: 0 !important;
}
#panel-2 {
  height: auto !important;
  min-height: 0 !important;
}

.glass-box {
  height: 400px !important;
  transform: translateY(20px) !important;
}


}