/* Mein-Weg · Mobile only */
/* --------------------------------------- */
/* MEIN-WEG.HTML FÜR "ALLES AUßER DESKTOP" */ 
/* --------------------------------------- */

/* Mein-Weg · Horizontal → Vertikal (nur Mobile/Tablet) */


/* meinweg.mobile.css */
/* === MOBILE: Layout von horizontal -> vertikal NUR auf mein-weg === */
@media (max-width: 1250px) {

  /* SCOPE: mein-weg (trifft, wenn EINE der 3 Hüllen existiert) */
  #mein-weg .horizontal-wrapper,
  .mein-weg .horizontal-wrapper,
  .page-mein-weg .horizontal-wrapper {
    display: block !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: none !important;
  }

  /* Panels füllen Breite und stapeln */
  #mein-weg .panel,
  .mein-weg .panel,
  .page-mein-weg .panel {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: auto !important;
    height: auto !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: clamp(16px, 4vw, 32px) clamp(12px, 4vw, 44px) !important;
    gap: clamp(12px, 2.5vw, 20px) !important;
  }

  /* Breiten-Container: einspaltig */
  #mein-weg .content-wrapper,
  .mein-weg .content-wrapper,
  .page-mein-weg .content-wrapper {
    width: 100% !important;
    max-width: min(92vw, 780px) !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 3.5vw, 28px) !important;
  }



  /* Zwei typische Spalten untereinander */
  #mein-weg .image-column,
  .mein-weg .image-column,
  .page-mein-weg .image-column,
  #mein-weg .glass-column,
  .mein-weg .glass-column,
  .page-mein-weg .glass-column {
    order: initial !important;
    width: 100% !important;
  }
}

/* MEIN-WEG · Mobile — kleines Blatt im Ritual-Popup */
@media (max-width: 1250px) {
  .ritual-popup .popup-content { position: relative !important; }

  .ritual-popup .floating-leaf {
    position: absolute !important;
    right: 25px !important;
    bottom: 25px !important;
    width: 80px !important;      /* bei Bedarf kleiner: 40px oder 32px */
    height: auto !important;
    transform: none !important;   /* überschreibt das Inline-Transform */
    pointer-events: none !important;
    opacity: 0.95 !important;
  }
}
@media (max-width: 1250px) {
  img.floating-leaf {
    width: clamp(20px, 6vw, 40px) !important;
    height: auto !important;
  }
}

@media (max-width:1250px){
  /* Mein-Weg · Panel 1: Bild links, Text rechts, Timeline darunter (volle Breite) */
  #meinweg .mw-row{
    display:grid;
    grid-template-columns: minmax(200px,0.9fr) 1.1fr;
    grid-template-areas:
      "pic text"
      "tl  tl";
    gap:16px;
    align-items:start;
  }
  #meinweg .mw-portrait{ grid-area:pic; }
  #meinweg .mw-portrait img{ display:block; width:100%; height:auto; }

  /* Kinder von .mw-side als direkte Grid-Items behandeln */
  #meinweg .mw-side{ display:contents; }

  #meinweg .mw-bridge{ grid-area:text; min-width:0; }
  #meinweg .mw-tl{
    grid-area:tl;
    display:block !important;   /* falls mobile.css sie versteckt */
    width:100%;
    margin-top:12px;
  }
}

@media (max-width:1250px){
  /* Mein-Weg · Abstand kommt von Panel 1 */
  #meinweg .panel-1{
    margin-bottom: clamp(130px, 6vw, 64px);
  }

  /* Panel 2 selbst braucht keinen extra Top-Abstand */
  #meinweg .panel-2{
    margin-top: 0;
    padding-top: 0;
  }
}

/* Mein-Weg · Panel 1 Abstand unter Header */
@media (max-width:1250px){
  #meinweg .panel-1{
    /* Header 100px + kleine Luft + Safe-Area */
    padding-top: calc(100px + 12px + max(env(safe-area-inset-top), 0px)) !important;
  }
}

/* Sehr schmal: dein Mobile-Header ist 140px hoch */
@media (max-width:700px){
  #meinweg .panel-1{
    padding-top: calc(140px + 12px + max(env(safe-area-inset-top), 20px)) !important;
  }
}

/* Mein-Weg · Mobil: Dots & Weiter-Buttons ausblenden */
@media (max-width:1250px){
  /* Dots + Kanten-Hinweis (werden teils an <body> gehängt) */
  .mw-dots,
  .mw-edge-hint,
  .mw-edge-btn { 
    display: none !important;
  }

  /* „Weiter zu …“ Links in den Panels */
  .mw-to-panel2,
  #mwNextP3 {
    display: none !important;
  }
}

/* MEIN-WEG · Mobile Typo/Colors exakt wie Index */
@media (max-width:1250px){
  #meinweg{
    --gold: #D1B662; /* gleicher Goldton wie Index */
  }

  /* Headings: weiß + Gold-Glow Lato) */
  #meinweg .mw-hero h1,
  #meinweg .mw-hero h2{
    color:#fff !important;
    font-family:"Lato", serif;
    font-weight:700;
    line-height:1.15;
    letter-spacing:0.02em;
    text-shadow:
      0 0 6px rgba(209,182,98,.85),
      0 0 14px rgba(209,182,98,.55),
      0 0 24px rgba(209,182,98,.35);
    margin:0 0 .6rem;
  }

  /* Subtext/Absätze: leicht abgedimmt, Lato */
  #meinweg .mw-hero p,
  #meinweg .mw-sub{
    color:rgba(255,255,255,.92) !important;
    font-family:"Lato", sans-serif;
    font-weight:400;
    line-height:1.5;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }


  }
  #meinweg .btn-cta {
    color:#fff !important;
    background:rgba(209,182,98,.12) !important;
    border:1px solid rgba(209,182,98,.5) !important;
    border-radius:999px;
    padding:.6rem 1rem;
  }



/* MEIN-WEG · Mobile/Tablet: Typo wie horizontal.css (Pacifico + Weiß + Gold-Glow) */
@media (max-width:1250px){
  body.page-mein-weg{
    --gold: #D1B662;
  }

  /* Headings (H1/H2) im Mein-Weg Bereich */
  body.page-mein-weg .mw-hero h1,
  body.page-mein-weg .mw-hero h2,
  body.page-mein-weg .panel .mw-hero h1,
  body.page-mein-weg .panel .mw-hero h2{
    font-family:"Pacifico", cursive !important;
    color: rgba(255,255,255,0.92) !important;
    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) !important;
  }

  /* Fließtext/Unterzeilen */
  body.page-mein-weg .mw-hero p,
  body.page-mein-weg .mw-sub,
  body.page-mein-weg .mw-intro,
  body.page-mein-weg .mw-fehlerkultur,
  body.page-mein-weg .mw-panel p{
    color: rgba(255,255,255,0.95) !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.45),
      0 0 6px rgba(163,131,35,0.45),
      0 0 12px rgba(129,104,30,0.30) !important;
  }


  }
  body.page-mein-weg .btn-cta,
  body.page-mein-weg .ghost-btn,
  body.page-mein-weg .btn-gallery{
    color: rgba(255,255,255,0.98) !important;
    border-color: rgba(209,182,98,0.85) !important;
    text-shadow:
      0 0 6px rgba(163,131,35,0.50),
      0 0 12px rgba(129,104,30,0.35) !important;
  }

  /* Timeline: Box + Texte nicht schwarz */
  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) !important;
    text-shadow:
      0 0 6px rgba(163,131,35,0.50),
      0 0 12px rgba(129,104,30,0.35) !important;
  }

  /* Panel-3 Karten (Vorder- & Rückseite) */
  body.page-mein-weg .mw-exp-card,
  body.page-mein-weg .mw-exp-card p,
  body.page-mein-weg .mw-flipcard .face,
  body.page-mein-weg .mw-flipcard .face p{
    color: rgba(255,255,255,0.96) !important;

  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;

  }
  /* Rückseiten-Titel auf Pacifico, damit Mobile konsistent bleibt */
  body.page-mein-weg .mw-flipcard .face.back h3{
    font-family:"Lato", cursive !important;

    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) !important;
  }


/* bis hier alles gut */ 
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
@media (max-width:1250px){

  /* GLASBOX */
  #meinweg .mw-row{
    background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
    background-color: rgba(255,255,255,.116) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 3px solid rgba(209,182,98,.85) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.26) !important;
    padding: clamp(12px,3.5vw,28px) !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
  }

  /* PORTRAIT – eckig, links mit Textumlauf, passt sich BREITE & HÖHE der Box an */
  #meinweg .mw-portrait{
    float: left !important;
    width: clamp(120px,22vw,340px) !important;
    height: clamp(140px,28vh,420px) !important;
    margin: 0 clamp(12px,4vw,20px) clamp(8px,2vw,12px) 0 !important;
    shape-outside: inset(0) !important;
    -webkit-shape-outside: inset(0) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #meinweg .mw-portrait img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* TEXT – fließt um das Bild */
  #meinweg .mw-bridge{
    display: block !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    hyphens: auto !important;
    overflow-wrap: anywhere !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* MOBILE (≤1250px) — Timeline darf IN der Glasbox (.mw-row) stehen und sieht exakt wie Desktop/Ruby-Glass aus.
   Keine Positions-Tricks, nur Optik + Grid. */

@media (max-width:1250px){

  /* Timeline-Container in der Glasbox: wie Desktop-Grid */
  #meinweg .mw-row .mw-tl{
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    list-style: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Pill-Design (Ruby-Glass): transparenter Verlauf, Goldrand, weicher Schatten, weiße Typo */
  #meinweg .mw-row .mw-tl .mw-tl-item{
    background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
    background-color: rgba(255,255,255,.116) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 3px solid rgba(209,182,98,.85) !important;  /* Ruby-Gold */
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.26) !important;
    padding: 12px 16px !important;
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    position: relative !important;      /* für Badge */
    box-sizing: border-box !important;
  }

  /* Typo innen wie Desktop */
  #meinweg .mw-row .mw-tl .mw-tl-year{
    color: rgba(255,255,255,.98) !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  #meinweg .mw-row .mw-tl .mw-tl-text{
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }

  /* Kleines goldenes Badge oben links (dunkles Icon) */
  #meinweg .mw-row .mw-tl .mw-tl-item::before{
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    left: -8px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 35%, rgba(209,182,98,1), rgba(209,182,98,.72)) !important;
    border: 1px solid rgba(209,182,98,.95) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; line-height: 1 !important; color: #121212 !important;
    pointer-events: none !important;
  }

  /* Icons je nach data-icon (nur Zeichen; deine SVGs bleiben unberührt) */
  #meinweg .mw-row .mw-tl .mw-tl-item[data-icon="schere"]::before     { content: "✂"  !important; }
  #meinweg .mw-row .mw-tl .mw-tl-item[data-icon="meister"]::before    { content: "🎓" !important; }
  #meinweg .mw-row .mw-tl .mw-tl-item[data-icon="schluessel"]::before { content: "🔑" !important; }
  #meinweg .mw-row .mw-tl .mw-tl-item[data-icon="herz"]::before       { content: "❤"  !important; }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Mobile ≤1250px — Text NEBEN dem Bild, Timeline DARUNTER (ohne sonstige Optik-Änderungen) */
@media (max-width:1250px){

  /* Glassbox-Layout: 2 Spalten (Bild | Text) + Reihe darunter für Timeline */
  #meinweg .mw-row{
    display: grid !important;
    grid-template-columns: minmax(180px, 0.9fr) 1.1fr !important;
    grid-template-areas:
      "pic text"
      "tl  tl" !important;
    gap: 16px !important;
    align-items: start !important;
  }

  /* Bild links */
  #meinweg .mw-portrait{
    grid-area: pic !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  #meinweg .mw-portrait img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Text rechts */
  #meinweg .mw-bridge{
    grid-area: text !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* Timeline unter beiden */
  #meinweg .mw-tl{
    grid-area: tl !important;
    position: static !important;
    display: block !important;
    margin-top: 8px !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Mobile ≤1250px — Timeline strikt 2×2, ohne Ausnahmen */
@media (max-width:1250px){
  #meinweg .mw-tl,
  #meinweg .mw-row .mw-tl,
  body.page-mein-weg .mw-tl,
  .page-mein-weg .mw-row .mw-tl{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    list-style: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Items dürfen keine Spalten brechen/strecken */
  #meinweg .mw-tl > .mw-tl-item,
  body.page-mein-weg .mw-tl > .mw-tl-item{
    display: block !important;
    grid-column: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;        /* falls irgendwo Flex aktiv war */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Mobile ≤1250px — Maximalgröße fürs Portrait (Hartkappe), ohne Layout zu ändern */
@media (max-width:1250px){
  #meinweg .mw-portrait{
    max-width: 260px !important;   /* Breiten-Kappe */
    max-height: auto !important;  /* Höhen-Kappe */
    box-sizing: border-box !important;
  }
  #meinweg .mw-portrait img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  /* füllt die Box, bleibt im Rahmen */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Mobile/Tablet ≤1250px — größere Startwerte für die Typo in .mw-bridge */
@media (max-width:1250px){
  /* Grundschrift im Textblock – früher größer */
  #meinweg .mw-bridge{
    font-size: clamp(16px, 2.1vw, 18.5px) !important;
    line-height: clamp(1.45, 2.2vw, 1.7) !important;
  }

  /* Absätze + Listen */
  #meinweg .mw-bridge p,
  #meinweg .mw-bridge li{
    font-size: clamp(16px, 2.1vw, 18.5px) !important;
    line-height: clamp(1.48, 2.3vw, 1.72) !important;
  }

  /* Unterzeilen/Subtext */
  #meinweg .mw-bridge .mw-sub{
    font-size: clamp(15px, 1.9vw, 17.5px) !important;
    line-height: clamp(1.42, 2.1vw, 1.62) !important;
  }

  /* Überschriften innerhalb der Bridge */
  #meinweg .mw-bridge h1{ font-size: clamp(26px, 4.2vw, 34px) !important; line-height: 1.18 !important; }
  #meinweg .mw-bridge h2{ font-size: clamp(22px, 3.6vw, 30px) !important; line-height: 1.22 !important; }
  #meinweg .mw-bridge h3{ font-size: clamp(19px, 3.0vw, 26px) !important; line-height: 1.25 !important; }

  /* Buttons/Links im Textblock */
  #meinweg .mw-bridge .btn,
  #meinweg .mw-bridge .btn-cta,
  #meinweg .mw-bridge a.btn{
    font-size: clamp(14px, 1.9vw, 17px) !important;
    line-height: 1.2 !important;
  }
}



@media (max-width:1250px){
  .mw-signature,
  .mw-signature.mw-signature--on-photo,
  .mw-signature.mw-signature--on-photo.mw-signature--tilt,
  figcaption.mw-signature{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* bis hier ok */ 

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* MEIN-WEG · Panel 2 – Mobile/Tablet (≤1250px) */
@media (max-width:1250px){

  /* Panel 2 grundlegendes Layout */
  #meinweg .panel-2{
    display:block !important;
    margin-top:-90px !important;
    padding: clamp(16px, 4vw, 28px) clamp(12px, 4vw, 44px) !important;
    box-sizing: border-box !important;
  }

  /* Content-Wrapper einspaltig */
  #meinweg .panel-2 .content-wrapper{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(14px, 3.5vw, 24px) !important;
    max-width: min(92vw, 780px) !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Typische Spaltennamen aus deinem Setup */
  #meinweg .panel-2 .image-column,
  #meinweg .panel-2 .glass-column,
  #meinweg .panel-2 .text-column{
    width: 100% !important;
    order: initial !important;
  }

  /* Bilder/Video responsiv */
  #meinweg .panel-2 img,
  #meinweg .panel-2 video{
    display:block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 1px !important;
    overflow: hidden !important;
  }

  /* Falls Panel 2 eine Glass-Box nutzt (Ruby-Look) */
  #meinweg .panel-2 .glass-box{
    background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
    background-color: rgba(255,255,255,.116) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 3px solid rgba(209,182,98,.85) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.26) !important;
    padding: clamp(12px, 3.5vw, 24px) !important;
    box-sizing: border-box !important;
  }

  /* Typo in Panel 2 (mobil etwas größer) */
  #meinweg .panel-2 .glass-box p,
  #meinweg .panel-2 .text-column p{
    font-size: clamp(16px, 2.1vw, 18.5px) !important;
    line-height: clamp(1.45, 2.2vw, 1.7) !important;
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  #meinweg .panel-2 h2,
  #meinweg .panel-2 h3{
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  #meinweg .panel-2 h2{ font-size: clamp(22px, 3.6vw, 30px) !important; line-height: 1.22 !important; }
  #meinweg .panel-2 h3{ font-size: clamp(19px, 3.0vw, 26px) !important; line-height: 1.25 !important; }

  /* Buttons/Links in Panel 2 */
  #meinweg .panel-2 .btn,
  #meinweg .panel-2 .btn-cta{
    font-size: clamp(14px, 1.9vw, 17px) !important;
    line-height: 1.2 !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Mobile ≤1250px — Panel-2 Überschrift exakt so groß wie Panel-1 */
@media (max-width:1250px){
  #meinweg .panel-2 h1,
  #meinweg .panel-2 .mw-hero h1,
  #meinweg .panel-2 h2,
  #meinweg .panel-2 .mw-hero h2{
    font-size: 34px !important;
    text-shadow: 0 0 6px rgba(209, 182, 98, .85), 
                 0 0 14px rgba(209, 182, 98, .55), 
                 0 0 24px rgba(209, 182, 98, .35) !important;
    line-height: 1.18 !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Mobile ≤1250px — Bild in Panel 2 „etwas größer“ */
@media (max-width:1250px){
  #meinweg .panel-2 img[alt="Isometrische Ansicht des Salons"],
  #meinweg .panel-2 img[src$="isometrie-placeholder.webp"]{
    width: 100% !important;      /* leicht größer */
    left: 50%;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin-left: 0 !important; /* zentriert trotz Überbreite */
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Subtexte gut lesbar auf allen Phones */
@media (max-width:1250px){
  body.page-mein-weg{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  #meinweg .mw-bridge,
  #meinweg .mw-bridge p,
  #meinweg .mw-sub{
    font-size: clamp(18px, 2.05vw, 18.5px) !important;  /* nie <16px */
    line-height: 1.6 !important;                        /* entspannt lesbar */
    letter-spacing: .01em !important;
    color: rgba(255,255,255,.95) !important;
    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;  /* leicht, nicht matschig */
  }

  /* damit Zeilen nicht zu lang werden */
  #meinweg .mw-bridge{ max-width: 68ch !important; }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Texte direkt unter Überschriften größer */
@media (max-width:1250px){
  #meinweg h1 + p,
  #meinweg h2 + p,
  #meinweg h3 + p,
  #meinweg .mw-hero h1 + .mw-sub,
  #meinweg .mw-hero h2 + .mw-sub,
  #meinweg .mw-sub{
    font-size: clamp(19px, 2.9vw, 22px) !important;
    line-height: 1.64 !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px — Panel 1: Bild hart sichtbar machen (untereinander Anordnung bleibt) */
@media (max-width:1250px){

  /* Row nicht clippen */
  #meinweg .panel-1 .mw-row{
    display: block !important;
    overflow: visible !important;
  }
  #meinweg .panel-1 .mw-row::after{ content:""; display:block; clear:both; }

  /* Portrait-Container: ALLES Sichtbarkeits-/Positionierungs-Geraffel neutralisieren */
  #meinweg .panel-1 .mw-portrait{
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* Bild: wirklich rendern, volle Breite */
  #meinweg .panel-1 .mw-portrait img,
  #meinweg .panel-1 .mw-portrait picture img{
    display: block !important;
    width: 50% !important;
    max-width: 30% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: auto !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }

  /* Text darunter (untereinander) */
  #meinweg .panel-1 .mw-bridge{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
    float: none !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 1: Bild zentriert in der Box */
@media (max-width:1250px){
  #meinweg .panel-1 .mw-portrait{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  #meinweg .panel-1 .mw-portrait img{
    display: block !important;
    margin: 0 auto !important;          /* horizontal zentriert */
    object-position: center center !important; /* Bildinhalt mittig */
    height: auto !important;
    margin-bottom: 20px !important;
    object-fit: cover !important;        /* falls die Box höher ist, mittig zuschneiden */
  }
}

/* glasbox jetzt gut */ 

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Hotspots über dem Bild, Chips im Raum, Tips als Popups beim Tippen (CSS-only) */
@media (max-width:1250px){

  /* Bildbühne als Bezugsebene */
  #meinweg .panel-2 .mw-iso{
    position: relative !important;
    display: block !important;
    overflow: visible !important; /* Popups dürfen überstehen */
  }

  /* HOTSPOTS (Buttons) – absolute Position per --x / --y aus dem HTML */
  #meinweg .panel-2 .mw-iso .mw-hotspot{
    position: absolute !important;
    left: var(--x) !important;   /* z.B. "--x:22.8%" im HTML */
    top:  var(--y) !important;   /* z.B. "--y:46.2%" im HTML */
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;

    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(209,182,98,.95) !important;
    background: radial-gradient(circle at 40% 40%, rgba(209,182,98,.85), rgba(209,182,98,.55)) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !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;
}


  /* CHIPS (Überschriften im Raum) – bleiben sichtbar */
  #meinweg .panel-2 .mw-iso .mw-chip{
    position: absolute !important;
    left: var(--x) !important;
    top:  var(--y) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 4 !important;

    padding: 6px 10px !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
    line-height: 1.2 !important;

    background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
    background-color: rgba(255,255,255,.116) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid rgba(209,182,98,.75) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    white-space: nowrap !important;
  }

  /* TIPS (Popups) – zunächst verborgen */
  #meinweg .panel-2 .mw-iso .mw-tip{
    position: absolute !important;
    left: var(--x) !important;
    top:  calc(var(--y) + 28px) !important;    /* unter dem Hotspot andocken */
    transform: translate(-50%, 0) !important;
    z-index: 6 !important;

    min-width: 220px !important;
    max-width: min(72vw, 320px) !important;
    padding: 10px 14px !important;

    background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
    background-color: rgba(255,255,255,.116) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 2px solid rgba(209,182,98,.85) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.26) !important;

    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    line-height: 1.45 !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }
  #meinweg .panel-2 .mw-iso .mw-tip h3{
    margin: 0 0 6px 0 !important;
    font-size: clamp(16px, 2.5vw, 18px) !important;
  }
  #meinweg .panel-2 .mw-iso .mw-tip p{
    margin: 0 !important;
    font-size: clamp(14px, 2.2vw, 16px) !important;
  }

  /* CSS-ONLY POPUP-LOGIK (Tap = :focus auf Button zeigt passende Tip) */
  /* Button erhält Fokus → zugehörige Tip (gleicher data-spot) sichtbar */
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="ehrlichkeit"]:focus ~ .mw-tip[data-spot="ehrlichkeit"],
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="material"]:focus    ~ .mw-tip[data-spot="material"],
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="technik"]:focus     ~ .mw-tip[data-spot="technik"],
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="zeit"]:focus        ~ .mw-tip[data-spot="zeit"]{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Optional: auch bei Keyboard/Screenreader sichtbar lassen */
  #meinweg .panel-2 .mw-iso .mw-hotspot:focus{ outline: none !important; }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Material & Pflege“ und „Technik & Präzision“ weiter auseinander (nur horizontal) */
@media (max-width:1250px){
  /* Material leicht nach links */
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="material"],
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="material"],
  #meinweg .panel-2 .mw-iso .mw-tip[data-spot="material"]{
    left: calc(var(--x) - 2.5%) !important;

  }

  /* Technik leicht nach rechts */
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="technik"],
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="technik"],
  #meinweg .panel-2 .mw-iso .mw-tip[data-spot="technik"]{
    left: calc(var(--x) + 5.8%) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – NUR die CHIPS „Material & Pflege“ und „Technik & Präzision“ weiter auseinander */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="material"]{
    left: calc(var(--x) - 19%) !important;  /* etwas weiter nach links */
  }
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="technik"]{
    left: calc(var(--x) + 5%) !important;  /* etwas weiter nach rechts */
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Chip „Technik & Präzision“ höher setzen */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="technik"]{
    top: calc(var(--y) + 1%) !important; /* etwas höher */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Zeit“ auf den Sessel: etwas nach rechts + weiter runter */
@media (max-width:1250px){
  /* Hotspot verschieben */
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="zeit"]{
    left: calc(var(--x) + 10%) !important;
    top:  calc(var(--y) + 14%) !important;
  }

  /* Chip mitziehen */
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="zeit"]{
    left: calc(var(--x) + 10%) !important;
    top:  calc(var(--y) + 14%) !important;
  }

  /* Tip/Popup mitziehen (Offset +28px unter dem Dot beibehalten) */
  #meinweg .panel-2 .mw-iso .mw-tip[data-spot="zeit"]{
    left: calc(var(--x) + 10%) !important;
    top:  calc((var(--y) + 14%) + 28px) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Zeit“-CHIP weiter nach unten (Hotspot/Tip bleiben unverändert) */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="zeit"]{
    top: calc(var(--y) + 22%) !important; /* vorher +5%, jetzt etwas weiter runter */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Material“-HOTSPOT weiter nach unten */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="material"]{
    top: calc(var(--y) + 8%) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Ehrlichkeit“-HOTSPOT weiter nach unten */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-hotspot[data-spot="ehrlichkeit"]{
    top: calc(var(--y) + 18%) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Ehrlichkeit“-HOTSPOT weiter nach unten */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-chip[data-spot="ehrlichkeit"]{
    top: calc(var(--y) + 28%) !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px — Chips & Tips überall gut lesbar (Kontrast, Größe, Zeilenhöhe) */
@media (max-width:1250px){
  /* Grundkontrast/Glass */
  #meinweg .panel-2 .mw-iso .mw-chip,
  #meinweg .panel-2 .mw-iso .mw-tip{
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
    background-color: rgba(255,255,255,.14) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 2px solid rgba(209,182,98,.85) !important;
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }

  /* CHIP: etwas größer + besserer Padding */
  #meinweg .panel-2 .mw-iso .mw-chip{
    font-size: clamp(15px, 2.4vw, 17px) !important;
    line-height: 1.3 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    white-space: nowrap !important; /* bleibt einzeilig auf üblichen Phones */
    z-index: 6 !important;
  }

  /* TIP: Headline + Copy klar lesbar, begrenzte Zeilenlänge */
  #meinweg .panel-2 .mw-iso .mw-tip{
    min-width: 240px !important;
    max-width: min(76vw, 360px) !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    z-index: 7 !important;
  }
  #meinweg .panel-2 .mw-iso .mw-tip h3{
    font-size: clamp(17px, 2.8vw, 20px) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
  }
  #meinweg .panel-2 .mw-iso .mw-tip p{
    font-size: clamp(15.5px, 2.4vw, 18px) !important;  /* nie < ~16px */
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 62ch !important; /* verhindert zu lange Zeilen */
  }
}

/* SEHR kleine Geräte (≤360px Breite): Chip darf umbrechen, Tip kompakter */
@media (max-width:360px){
  #meinweg .panel-2 .mw-iso .mw-chip{
    white-space: normal !important;   /* darf umbrechen */
    text-align: center !important;
    font-size: 16px !important;
    padding: 8px 10px !important;
  }
  #meinweg .panel-2 .mw-iso .mw-tip{
    min-width: 220px !important;
    max-width: 88vw !important;
    padding: 12px 14px !important;
  }
  #meinweg .panel-2 .mw-iso .mw-tip p{
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Technik“-Tip weiter nach links */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-tip[data-spot="technik"]{
    left: calc(var(--x) - 24px) !important;  /* weiter nach links */
  }
}
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-tip[data-spot="zeit"]{
    left: calc(var(--x) - 24px) !important;  /* weiter nach links */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – „Ehrlichkeit“-TIP weiter nach rechts */
@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-tip[data-spot="ehrlichkeit"]{
    left: calc(var(--x) + 11%) !important;  /* weiter nach rechts */
}
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – p.mw-fehlerkultur überall gut lesbar (nur dieser Text) */
@media (max-width:1250px){
  #meinweg p.mw-fehlerkultur{
    font-size: clamp(18px, 2.6vw, 21px) !important; /* nie <16px */
    line-height: 1.66 !important;
    max-width: 68ch !important;          /* angenehme Zeilenlänge */
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    letter-spacing: 0.01em !important;
    hyphens: auto !important;
    overflow-wrap: anywhere !important;
    margin: 0 0 14px 0 !important;
  }
}

/* sehr kleine Geräte (≤360px) – leicht kompakter, trotzdem ≥16px */
@media (max-width:360px){
  #meinweg p.mw-fehlerkultur{
    font-size: 18px !important;
    line-height: 1.62 !important;
    max-width: 62ch !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Überschrift exakt wie Panel 1 & 2 */
@media (max-width:1250px){
  #meinweg .panel-3 h1,
  #meinweg .panel-3 .mw-hero h1,
  #meinweg .panel-3 h2,
  #meinweg .panel-3 .mw-hero h2{
    font-size: 34px !important;
    text-shadow: 0 0 6px rgba(209, 182, 98, .85), 
                 0 0 14px rgba(209, 182, 98, .55), 
                 0 0 24px rgba(209, 182, 98, .35) !important;
    line-height: 1.18 !important;
  }
}

/* bis hier ok */ 

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Flip-Karten im Ruby-Glasbox-Look (nur Design, Flip bleibt unverändert) */
@media (max-width:1250px){

  /* Karte: weiche Außen-Schattierung, runde Ecken */
  #meinweg .panel-3 .mw-flipcard{
    border-radius: 14px !important;
    overflow: visible !important; /* nichts abschneiden */
  }

  /* Beide Seiten im selben Ruby-Glass-Look */
  #meinweg .panel-3 .mw-flipcard .face{
    background-color: rgba(255, 255, 255, 0.123) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(6px) saturate(140%) !important;
    border: 3px solid rgba(209,182,98,.85) !important;   /* Ruby-Gold */
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; /* zarter Innenrand */
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }

  /* Front: Icon + Titel wirken klar auf Glas */
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)) !important;
  }
  #meinweg .panel-3 .mw-flipcard .front-title{
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }

  /* Back: Überschrift + Text lesbar auf Glas */
  #meinweg .panel-3 .mw-flipcard .face.back h3{
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.back p{
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
  }

  /* „Mehr“-Button dezent im Ruby-Stil */
  #meinweg .panel-3 .mw-flipcard .ghost-more{
    color: rgba(255,255,255,.98) !important;
    background: rgba(209,182,98,.12) !important;
    border: 1px solid rgba(209,182,98,.55) !important;
    border-radius: 999px !important;
    text-shadow: 0 0 6px rgba(163,131,35,.45), 0 0 12px rgba(129,104,30,.35) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: alle 6 Karten exakt gleich hoch, Flip bleibt intakt */
@media (max-width:1250px){
  /* Einheitliche Kartenhöhe (passt sich Viewport an, bleibt aber konsistent) */
  #meinweg .panel-3 .mw-flipcard{
    height: clamp(300px, 58vw, 380px) !important;  /* EIN Wert für alle */
    min-height: unset !important;                  /* frühere min-height neutralisieren */
  }

  /* Innenleben & Seiten müssen die volle Höhe einnehmen */
  #meinweg .panel-3 .mw-flipcard-inner{
    height: 100% !important;
  }
  #meinweg .panel-3 .mw-flipcard .face{
    inset: 0 !important;
    height: 100% !important;
  }

  /* Inhalt sauber im verfügbaren Raum halten (kein Überlaufen) */
  #meinweg .panel-3 .mw-flipcard .face.front,
  #meinweg .panel-3 .mw-flipcard .face.back{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    flex: 0 0 auto !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.front .front-title,
  #meinweg .panel-3 .mw-flipcard .face.back h3,
  #meinweg .panel-3 .mw-flipcard .face.back p{
    flex: 0 0 auto !important;
    
  }
  #meinweg .panel-3 .mw-flipcard .ghost-more{
    margin-top: auto !important;  /* Button immer unten auf der Front */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – NOCH mehr Abstand zwischen den Karten in Panel 3 */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-exp-grid{
    gap: clamp(28px, 6vw, 44px) !important;
  }
  /* Fallback, falls gap irgendwo überschrieben wird */
  #meinweg .panel-3 .mw-flipcard{
    margin-bottom: clamp(28px, 6vw, 44px) !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Front & Back exakt deckungsgleich ausrichten (Flip bleibt) */
@media (max-width:1250px){
  /* Bühne & Perspektive stabilisieren */
  #meinweg .panel-3 .mw-flipcard{
    position: relative !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
  }

  /* Innenleben füllt die Karte 1:1 */
  #meinweg .panel-3 .mw-flipcard-inner{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform-style: preserve-3d !important;
    transform-origin: center center !important;
    transition: transform .55s ease !important;
    will-change: transform !important;
  }

  /* Beide Seiten exakt gleiche Box-Geometrie */
  #meinweg .panel-3 .mw-flipcard .face{
    position: absolute !important;
    inset: 0 !important;                 /* volle Karte */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    padding: clamp(12px, 3.5vw, 18px) !important;
    box-sizing: border-box !important;   /* Border & Padding einkalkulieren */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-origin: center center !important;

    /* Ruby-Glass-Look auf BEIDEN Seiten identisch halten */
    background-color: rgba(255, 255, 255, 0.212) !important;
    -webkit-backdrop-filter: blur(2px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 2px solid rgba(209,182,98,.85) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }

  /* Front & Back exakt überlagern (kein Pixel-Shift) */
  #meinweg .panel-3 .mw-flipcard .face.front{
    transform: rotateY(0deg) translateZ(0) !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.back{
    transform: rotateY(180deg) translateZ(0) !important;
  }

  /* Flip-Trigger (Tap/Focus) – unverändert */
  #meinweg .panel-3 .mw-flipcard:focus .mw-flipcard-inner,
  #meinweg .panel-3 .mw-flipcard:focus-within .mw-flipcard-inner{
    transform: rotateY(180deg) !important;
  }

  /* Bilder/Icons verhindern, dass die Front größer wird */
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    display: block !important;
    width: clamp(44px, 10vw, 64px) !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 0 8px 0 !important;
  }

  /* Sicherheitsnetz: keine äußeren Margins, die nur eine Seite betreffen */
  #meinweg .panel-3 .mw-flipcard .face.front *,
  #meinweg .panel-3 .mw-flipcard .face.back *{
    box-sizing: border-box !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Icons größer & zentriert, Headline darunter; Karten hochkant wie Spielkarten */
@media (max-width:1250px){
  /* Karten im Hochkant-Format (≈5:7 wie Spielkarten) */
  #meinweg .panel-3 .mw-flipcard{
    height: auto !important;
    aspect-ratio: 5 / 7 !important;              /* Portrait-Ratio */
    max-width: 100% !important;
  }
  #meinweg .panel-3 .mw-flipcard-inner{ height: 100% !important; }
  #meinweg .panel-3 .mw-flipcard .face{ inset: 0 !important; }

  /* Frontseite: Icon groß & mittig, Headline darunter mittig */
  #meinweg .panel-3 .mw-flipcard .face.front{
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: clamp(8px, 2.6vw, 14px) !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    width: clamp(72px, 18vw, 104px) !important;  /* größer */
    height: auto !important;
    margin: 0 !important;                        /* exakt mittig */
    display: block !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)) !important;
  }
  #meinweg .panel-3 .mw-flipcard .front-title{
    text-align: center !important;
    margin: 0 !important;
    font-size: clamp(20px, 3.6vw, 24px) !important;
    line-height: 1.28 !important;
  }

  /* Rückseite: Inhalt angenehm lesbar & mittig ausgerichtet */
  #meinweg .panel-3 .mw-flipcard .face.back{
    align-items: center !important;
    text-align: center !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.back h3{
    margin: 0 0 8px 0 !important;
    font-size: clamp(18px, 3.2vw, 22px) !important;
    line-height: 1.25 !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.back p{
    max-width: 60ch !important;
    font-size: clamp(15.5px, 2.6vw, 18px) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* „Mehr“-Button dezent unten, ohne Layout zu verschieben */
  #meinweg .panel-3 .mw-flipcard .ghost-more{
    margin-top: auto !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Box-Shadow deutlich softer */
@media (max-width:1250px){
  /* äußere Karte */
  #meinweg .panel-3 .mw-flipcard{
    box-shadow: 0 6px 14px rgba(0,0,0,.18) !important; /* vorher kräftiger */
  }
  /* beide Seiten (Front/Back) */
  #meinweg .panel-3 .mw-flipcard .face{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important; /* nur zarter Innenrand */
  }
  /* Optional: Icons noch ohne extra Drop-Shadow (falls zu viel) */
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Karten kleiner + mehr Platz rechts/links, Flip unverändert */
@media (max-width:1250px){

  /* etwas Innenabstand am Grid, damit rechts/links Hintergrund sichtbar bleibt */
  #meinweg .panel-3 .mw-exp-grid{
    padding-inline: clamp(14px, 5vw, 32px) !important;
  }

  /* Karten schmaler machen und mittig ausrichten (Portrait-Ratio bleibt) */
  #meinweg .panel-3 .mw-flipcard{
    width: min(82%, 420px) !important;   /* schmaler: mehr Rand links/rechts */
    margin-inline: auto !important;      /* zentrieren */
    aspect-ratio: 5 / 7 !important;      /* hochkant wie Spielkarten */
    height: auto !important;             /* Höhe aus Ratio ableiten */
  }

  /* Front/Back füllen weiterhin die Karte komplett */
  #meinweg .panel-3 .mw-flipcard-inner{ height: 100% !important; }
  #meinweg .panel-3 .mw-flipcard .face{ inset: 0 !important; }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px — Box-Shadows KOMPLETT entfernen, Flip korrekt (nicht spiegelverkehrt) */
@media (max-width:1250px){
  /* keine äußeren Schatten */
  #meinweg .panel-3 .mw-flipcard{
    box-shadow: none !important;
  }
  /* kein Drop-Shadow am rotierenden Inneren */
  #meinweg .panel-3 .mw-flipcard-inner{
    filter: none !important;
    transition: transform .55s ease !important;
    transform-style: preserve-3d !important;
  }
  /* keine inneren Shadows auf den Flächen */
  #meinweg .panel-3 .mw-flipcard .face{
    box-shadow: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  /* klare Rotationen ohne zusätzliche Z-Verschiebung (verhindert Spiegel-/Ghost-Effekt) */
  #meinweg .panel-3 .mw-flipcard .face.front{ transform: rotateY(0deg) !important; }
  #meinweg .panel-3 .mw-flipcard .face.back { transform: rotateY(180deg) !important; }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px — Flip nur per Klasse .is-flipped (Tap/Toggle). Alte :focus-Flip-Regeln neutralisieren. */
@media (max-width:1250px){
  /* Fokus-Flip ausschalten */
  #meinweg .panel-3 .mw-flipcard:focus .mw-flipcard-inner,
  #meinweg .panel-3 .mw-flipcard:focus-within .mw-flipcard-inner{
    transform: none !important;
  }

  /* Standardzustand + Toggle-Zustand */
  #meinweg .panel-3 .mw-flipcard .mw-flipcard-inner{
    transform: rotateY(0deg) !important;
    transition: transform .55s ease !important;
    transform-style: preserve-3d !important;
  }
  #meinweg .panel-3 .mw-flipcard.is-flipped .mw-flipcard-inner{
    transform: rotateY(180deg) !important;
  }

  /* Sicherheitsnetz: beide Seiten korrekt übereinander */
  #meinweg .panel-3 .mw-flipcard .face.front{ transform: rotateY(0) !important; }
  #meinweg .panel-3 .mw-flipcard .face.back { transform: rotateY(180deg) !important; }
  #meinweg .panel-3 .mw-flipcard .face{
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Front-Icon größer, Front-Headline in Tannengrün & Lato */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    width: clamp(92px, 22vw, 128px) !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.front .front-title{
    color: #0F3B2E !important;
    font-family: "Lato", serif !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: clamp(20px, 3.8vw, 26px) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Karten behalten ihre Größe; früh 2 Spalten, später 3. */
@media (max-width:1250px){
  /* Basis: Grid vorbereiten (zentriert, kein Strecken) */
  #meinweg .panel-3 .mw-exp-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;       /* Start: 1 Spalte */
    justify-content: center !important;           /* Grid-Inhalt zentrieren */
    justify-items: center !important;             /* Karten zentriert in Spalte */
    gap: clamp(20px, 5vw, 36px) !important;
    padding-inline: clamp(14px, 5vw, 32px) !important;
    margin: 0 auto !important;
    max-width: min(96vw, 1120px) !important;
  }

  /* Karten-Größe: konstant (nicht mitwachsen), Hochkant-Ratio */
  #meinweg .panel-3 .mw-flipcard{
    width: clamp(260px, 38vw, 320px) !important;  /* behält Größe, nicht riesig */
    aspect-ratio: 5 / 7 !important;
    height: auto !important;
    max-width: 320px !important;                  /* harte Obergrenze */
  }

  /* Frührer 2 Spalten ab ~560px */
  @media (min-width:560px){
    #meinweg .panel-3 .mw-exp-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  /* Später 3 Spalten ab ~920px (immer noch ≤1250px, Desktop unberührt) */
  @media (min-width:920px){
    #meinweg .panel-3 .mw-exp-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  /* Sicherstellen, dass alte Breitenregeln nicht greifen */
  #meinweg .panel-3 .mw-flipcard-inner{ height: 100% !important; }
  #meinweg .panel-3 .mw-flipcard .face{ inset: 0 !important; }
}


/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Karten auf Desktop-Maß deckeln (max 204.44 × 321.95) und früher 2/3 Spalten */
@media (max-width:1250px){
  /* Grid: zentriert, früh 2/3 Spalten */
  #meinweg .panel-3 .mw-exp-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;                 /* Start: 1 Spalte */
    justify-content:center !important;
    justify-items:center !important;
    gap: clamp(20px, 5vw, 36px) !important;
    padding-inline: clamp(14px, 5vw, 32px) !important;
    margin: 0 auto !important;
    max-width: min(96vw, 1120px) !important;
  }
  @media (min-width:560px){
    #meinweg .panel-3 .mw-exp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  }
  @media (min-width:920px){
    #meinweg .panel-3 .mw-exp-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  }

  /* Karten-Größe: skaliert bis max Desktopmaß 204.44 × 321.95 */
  #meinweg .panel-3 .mw-flipcard{
    width: min(204.44px, 42vw) !important;   /* wächst nur bis 204.44px */
    aspect-ratio: 204.44 / 321.95 !important;/* exaktes Verhältnis beibehalten */
    height: auto !important;                 /* ergibt max 321.95px */
    max-width: 204.44px !important;
    max-height: 321.95px !important;
    margin: 0 auto !important;
  }

  /* Innenleben füllt die Karte komplett (Flip bleibt) */
  #meinweg .panel-3 .mw-flipcard-inner{ height:100% !important; }
  #meinweg .panel-3 .mw-flipcard .face{ inset:0 !important; }

  /* Front: Icon etwas kleiner an feste Kartenhöhe angepasst */
  #meinweg .panel-3 .mw-flipcard .face.front .icon{
    width: clamp(64px, 32%, 88px) !important;  /* harmoniert mit 204px Breite */
    height:auto !important;
    margin:0 !important;
  }
  #meinweg .panel-3 .mw-flipcard .front-title{
    font-size: clamp(18px, 4.6vw, 20px) !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: Karten-START- und MAX-Größe exakt 204.44 × 321.95 */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard{
    width: 240px !important;
    height: 375px !important;
    min-width: 240x !important;
    min-height: 375px !important;
    max-width: 240px !important;
    max-height: 375px !important;
    margin-inline: auto !important;
  }
  /* Innenleben/Flächen füllen die feste Kartengröße */
  #meinweg .panel-3 .mw-flipcard-inner{ height: 100% !important; }
  #meinweg .panel-3 .mw-flipcard .face{ inset: 0 !important; }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Rückseiten-Text (back) überall gut lesbar */
@media (max-width:1250px){
  /* Scrollbar auf Back, falls Text länger ist (ohne Layoutsprung) */
  #meinweg .panel-3 .mw-flipcard .face.back{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Überschrift auf der Rückseite */
  #meinweg .panel-3 .mw-flipcard .face.back h3{
    font-size: clamp(18px, 2.9vw, 20px) !important;
    line-height: 1.28 !important;
    margin: 0 0 8px 0 !important;
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }

  /* Fließtext / Listen auf der Rückseite */
  #meinweg .panel-3 .mw-flipcard .face.back p,
  #meinweg .panel-3 .mw-flipcard .face.back li{
    font-size: clamp(16px, 2.5vw, 18px) !important;  /* nie <16px */
    line-height: 1.6 !important;
    letter-spacing: .01em !important;
    color: rgba(255,255,255,.96) !important;
    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;
    hyphens: auto !important;
    overflow-wrap: anywhere !important;
    margin: 0 0 10px 0 !important;
    max-width: 62ch !important; /* angenehme Zeilenlänge */
  }

  /* Innenabstand etwas erhöhen für bessere Lesbarkeit */
  #meinweg .panel-3 .mw-flipcard .face.back{
    padding: clamp(14px, 3.8vw, 18px) !important;
  }
}

/* Sehr kleine Geräte (≤360px) – minimal kompakter, trotzdem ≥16px */
@media (max-width:360px){
  #meinweg .panel-3 .mw-flipcard .face.back h3{
    font-size: 18px !important;
  }
  #meinweg .panel-3 .mw-flipcard .face.back p,
  #meinweg .panel-3 .mw-flipcard .face.back li{
    font-size: 18px !important;
    line-height: 1.58 !important;
    max-width: 58ch !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Back-Überschrift in Tannengrün */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard .face.back h3{
    color: #0F3B2E !important;
    padding-bottom: 4px !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Back-Überschrift: Tannengrün + Lato */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard .face.back h3{
    color: #0F3B2E !important;
    font-family: "Lato", serif !important;
    font-weight: 700 !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: weniger Blur auf den Karten */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard .face{
    -webkit-backdrop-filter: blur(5px) saturate(110%) !important; /* vorher ~12px */
    backdrop-filter: blur(5px) saturate(110%) !important;
  }
}
/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Flip-Hint zentriert UNTER dem Subtext (.mw-sub) in Panel 3 */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-sub{
    position: relative !important;            /* Bezugsfläche für Abstand */
    text-align: center !important;
  }
  #meinweg .panel-3 .mw-flip-hint{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: clamp(8px, 2.5vw, 14px) auto 0 auto !important;  /* Abstand unter Subtext */
    pointer-events: none !important;           /* nur Hinweis, nicht klickbar */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Flip-Hint horizontal zentriert + mehr Abstand nach unten */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flip-hint{
    position: static !important;
    color:#fff;
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;

    /* Abstand: oben knapp unter .mw-sub, unten großzügiger */
    margin-top: clamp(6px, 2vw, 12px) !important;
    margin-bottom: clamp(24px, 6vw, 40px) !important;
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* ≤1250px – Panel 3: .mw-exp-cta weiter runter + mehr Abstand nach unten */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-exp-cta{
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(28px, 6vw, 48px) !important;     /* weiter runter */
    margin-bottom: clamp(32px, 7vw, 56px) !important;  /* mehr Abstand nach unten */
  }
}



/* bis hier gut */ 


/* ≤1250px – Parallax mobil mit vertikalen webps (Pfad relativ zur CSS) */
@media (max-width:1250px){
  /* Bühne hinter dem Inhalt, sichtbar */
  #parallax{
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
  /* Layer füllen die Bühne */
  #parallax .layer{
    position: absolute !important;
    inset: 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* >>> Pfade relativ zur CSS-Datei (../bilder/mobile/...) <<< */
  #parallax .layer-1{ background-image: url("../bilder/mobile/1.webp") !important; }
  #parallax .layer-2{ background-image: url("../bilder/mobile/2.webp") !important; }
  #parallax .layer-3{ background-image: url("../bilder/mobile/3.webp") !important; }
  #parallax .layer-4{ background-image: url("../bilder/mobile/4.webp") !important; }
  #parallax .layer-5{ background-image: url("../bilder/mobile/5.webp") !important; }
}

/* vertikale Hintergrundbilder sind richtig eingebunden aber die Layer 
sind noch nicht angepasst */ 


/* ≤1250px — VARIANTE A: Layer-1 hart pinnen (kein Scroll/Transform) */
@media (max-width:1250px){
  #parallax{
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
  body.page-mein-weg{ position: relative !important; z-index: 1 !important; }

  #parallax .layer-1{
    position: fixed !important;
    inset: 0 !important;
    /* Parallax-JS neutralisieren NUR für L1 */
    transform: none !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    scale: 1 !important;

    /* vertikales Bild */
    background-image: url("../bilder/mobile/1.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    /* Viewport-sicher (gegen Safari/URL-Bar) */
    height: 100svh !important;
    min-height: 100svh !important;
  }
  @supports (height: 100dvh){
    #parallax .layer-1{
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}

/* Layer 1 sitzt gut */ 

/* ≤1250px – Parallax: Layer 2–5 endlos nach unten, ohne Vergrößerung */
@media (max-width:1250px){
  /* Basis je Layer: nichts an deinen Transform/Speed-Regeln ändern */
  #parallax .layer-2,
  #parallax .layer-3,
  #parallax .layer-4,
  #parallax .layer-5{
    position: fixed !important;         /* wie deine Stage */
    inset: 0 !important;
    overflow: visible !important;
    background-repeat: no-repeat !important;   /* Parent zeigt nur die erste Kachel */
    background-size: 100% auto !important;     /* volle Breite, keine Höhen-Skalierung */
    background-position: center top !important;
    will-change: transform;
  }

  /* Endlos-Kachel über Pseudo-Element (erbt Parallax-Transform vom Parent) */
  #parallax .layer-2::before,
  #parallax .layer-3::before,
  #parallax .layer-4::before,
  #parallax .layer-5::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: -300vh !important;              /* weit oberhalb starten */
    height: 900vh !important;            /* groß genug für langen Scroll */
    pointer-events: none !important;
    z-index: 0 !important;

    /* gleiche Grafik wie der Parent, aber VERTIKAL kacheln */
    background-image: inherit !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;     /* keine Vergrößerung */
    background-position: center top !important;
  }

  /* Feine Offsets gegen sichtbare Nähte (bei Bedarf anpassen/entfernen) */
  #parallax .layer-3::before{ background-position: center 1px !important; }
  #parallax .layer-4::before{ background-position: center 1px !important; }
}

/* ≤1250px – Hotspots lebendig, ohne aufdringlich zu sein */
@media (max-width:1250px){
  #meinweg .mw-hotspot{
    animation: spotPulse 2.4s ease-in-out infinite;
    transform: translateZ(0);
  }
  #meinweg .mw-hotspot:active{ transform: scale(.94); transition: transform .12s ease; }
  @keyframes spotPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(209,182,98,.35); }
    50%{ box-shadow:0 0 0 10px rgba(209,182,98,0); }
  }
}

/* ≤1250px – Karten leicht “leben”, wenn man sie antippt */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard{ transition: transform .18s ease; transform: perspective(800px) rotateX(0) rotateY(0); }
  #meinweg .panel-3 .mw-flipcard:active{ transform: perspective(800px) rotateX(2deg) rotateY(1.5deg); }
}

@media (max-width:1250px){
  #meinweg .mw-tl .mw-tl-item{
    position:relative; overflow:visible;
  }
  #meinweg .mw-tl .mw-tl-item::after{
    content:""; position:absolute; inset:-6px; border-radius:999px;
    box-shadow:0 0 0 0 rgba(209,182,98,.0); transition: box-shadow .35s ease;
    pointer-events:none;
  }
  #meinweg .mw-tl .mw-tl-item:active::after{
    box-shadow:0 0 0 10px rgba(209,182,98,.25);
    transition: box-shadow .18s ease;
  }
  /* dezenter Idle-Pulse */
  #meinweg .mw-tl .mw-tl-item{ animation: tlPulse 3.4s ease-in-out infinite; }
  @keyframes tlPulse{ 0%,100%{ filter:none } 50%{ filter:brightness(1.03) } }
  @media (prefers-reduced-motion:reduce){
    #meinweg .mw-tl .mw-tl-item{ animation:none; }
  }
}




/* ≤1250px – Flip-Cards weich einblenden (nur opacity, Glas bleibt) */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard.fade-in{
    opacity: 0;
    transition: opacity 1.42s cubic-bezier(.22,.61,.36,1);
    will-change: opacity;
  }
  #meinweg .panel-3 .mw-flipcard.fade-in.is-in{
    opacity: 1;
  }

  /* dezenter Mini-Stagger für die 6 Karten */
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.fade-in:nth-child(1){ transition-delay:.02s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.fade-in:nth-child(2){ transition-delay:.04s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.fade-in:nth-child(3){ transition-delay:.06s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.fade-in:nth-child(4){ transition-delay:.08s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.fade-in:nth-child(5){ transition-delay:.10s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.fade-in:nth-child(6){ transition-delay:.12s; }
}

/* ≤1250px — Flip-Cards: nur INHALT fade-in, die Glasflächen (face) bleiben unberührt */
@media (max-width:1250px){
  /* Startzustand: Inhalte in Front/Back sind transparent */
  #meinweg .panel-3 .mw-flipcard .face > *{
    opacity: 0;
    transition: opacity 1.42s cubic-bezier(.22,.61,.36,1);
    will-change: opacity;
  }

  /* Sichtbar: Inhalte einblenden (Blur bleibt, weil .face selbst nicht animiert wird) */
  #meinweg .panel-3 .mw-flipcard.is-in .face > *{
    opacity: 1;
  }

  /* Mini-Stagger (dezent) */
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(2) .face > *{ transition-delay:.9s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(3) .face > *{ transition-delay:.9s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(4) .face > *{ transition-delay:.9s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(5) .face > *{ transition-delay:.9s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(6) .face > *{ transition-delay:.9s; }
}

/* ≤1250px — Flip-Cards weich erscheinen lassen via Overlay-Schleier (Blur bleibt unberührt) */
@media (max-width:1250px){
  #meinweg .panel-3 .mw-flipcard{
    position: relative; /* Träger für den Schleier */
  }

  /* Schleier liegt OBEN auf der Karte, fade-out simuliert Gesamt-Fade-in */
  #meinweg .panel-3 .mw-flipcard::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    /* ganz leichter dunkler Film – wirkt wie Fade, aber zerstört kein backdrop-filter */
    background: rgba(0,0,0,0.12);
    opacity: 1;
    transition: opacity 1.55s cubic-bezier(.22,.61,.36,1);
    border-radius: inherit; /* folgt deinen runden Ecken */
  }

  /* Wenn sichtbar: Schleier verschwindet → Karte wirkt weich eingeblendet */
  #meinweg .panel-3 .mw-flipcard.is-in::after{
    opacity: 0;
  }

  /* Inhalte können zusätzlich (dezent) selbst einblenden – optional */
  #meinweg .panel-3 .mw-flipcard .face > *{
    opacity: 0;
    transition: opacity .42s cubic-bezier(.22,.61,.36,1);
  }
  #meinweg .panel-3 .mw-flipcard.is-in .face > *{
    opacity: 1;
  }

  /* Mini-Stagger, sehr dezent */
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(2)::after{ transition-delay:.03s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(3)::after{ transition-delay:.06s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(4)::after{ transition-delay:.09s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(5)::after{ transition-delay:.12s; }
  #meinweg .panel-3 .mw-exp-grid > .mw-flipcard.is-in:nth-child(6)::after{ transition-delay:.15s; }
}

/* Mein-Weg · Panel 2 · Chips responsiv nach außen parken (ohne HTML-Änderung) */
@media (max-width:1250px){
  /* Bühne korrekt referenzieren */
  #meinweg .mw-iso{ position: relative; }

  /* Basis: Chips bleiben absolut bei ihren Prozent-Koordinaten */
  #meinweg .mw-chip{
    position: absolute;
    left: var(--x);              /* z.B. 48.3% aus deinem inline-style */
    top: var(--y);               /* z.B. 19.0% */
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: auto;
    /* Lesbarkeit auf kleinen Screens etwas erhöhen */
    font-size: clamp(12px, 2.7vw, 15px);
    line-height: 1.25;
    white-space: nowrap;
  }

  /* ---------- Kleiner Screen: Chips nach außen schieben ---------- */
  /* Abstand, um sie aus dem Bild zu “parken” (oben/ unten).
     Skaliert mit der Breite; passt automatisch bei winzigen Phones. */
  @media (max-width: 480px){
    #meinweg .mw-iso{
      /* Platz über & unter dem Bild freischaufeln, damit außen geparkte Chips nicht schneiden */
      --chip-out: clamp(40px, 16vw, 112px);
      padding-top: var(--chip-out);
      padding-bottom: calc(var(--chip-out) + 8px);
    }

    /* Obere Chips (liegen am oberen Bildbereich) → nach OBEN raus */
    #meinweg .mw-chip[data-spot="material"],
    #meinweg .mw-chip[data-spot="technik"]{
      transform: translate(-50%, calc(-50% - var(--chip-out)));
    }

    /* Untere Chips (liegen am unteren Bildbereich) → nach UNTEN raus */
    #meinweg .mw-chip[data-spot="zeit"],
    #meinweg .mw-chip[data-spot="ehrlichkeit"]{
      transform: translate(-50%, calc(-50% + var(--chip-out)));
    }
  }

  /* ---------- Mittlere Phones: weniger weit draußen ---------- */
  @media (min-width: 481px) and (max-width: 700px){
    #meinweg .mw-iso{ --chip-out: clamp(24px, 8vw, 80px); }
    #meinweg .mw-chip[data-spot="material"],
    #meinweg .mw-chip[data-spot="technik"]{
      transform: translate(-50%, calc(-50% - var(--chip-out)));
    }
    #meinweg .mw-chip[data-spot="zeit"],
    #meinweg .mw-chip[data-spot="ehrlichkeit"]{
      transform: translate(-50%, calc(-50% + var(--chip-out)));
    }
  }

  /* ---------- Größer werdend: Chips wieder näher ans Bild ziehen ---------- */
  @media (min-width: 701px) and (max-width: 950px){
    #meinweg .mw-iso{ --chip-out: clamp(10px, 3.5vw, 36px); }
    #meinweg .mw-chip[data-spot="material"],
    #meinweg .mw-chip[data-spot="technik"]{
      transform: translate(-50%, calc(-50% - var(--chip-out)));
    }
    #meinweg .mw-chip[data-spot="zeit"],
    #meinweg .mw-chip[data-spot="ehrlichkeit"]{
      transform: translate(-50%, calc(-50% + var(--chip-out)));
    }
  }

  /* ---------- Ab ~Tablet: wieder direkt an den Hotspots ---------- */
  @media (min-width: 951px){
    /* zurück zum normalen Overlay exakt bei den Prozent-Koordinaten */
    #meinweg .mw-iso{ --chip-out: 0px; padding-top: 0; padding-bottom: 0; }
    #meinweg .mw-chip{
      transform: translate(-50%, -50%);
    }
  }
}

/* ≤480px — TECHNIK: rechts + etwas nach unten (Chip & Hotspot) */
@media (max-width:480px){
  #meinweg .mw-iso .mw-chip[data-spot="technik"]{
    /* X weiter rechts, Y etwas tiefer – chip-out bleibt erhalten */
    transform: translate(
      calc(-50% + 46px),
      calc(-50% - var(--chip-out) + 74px)
    ) !important;
  }

  #meinweg .mw-iso .mw-hotspot[data-spot="technik"]{
    /* Hotspot nur minimal nach unten rücken */
    transform: translate(-50%, calc(-50% + 30px)) !important;
  }
}


#parallax .layer::before {
    background: none !important;
    content: none !important;
}


p {
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;
}


@media (max-width:1250px){
  #meinweg .panel-2 .mw-iso .mw-tip.is-open{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}