/* Magic Milk Kooperationsvertrag · Rueckseite
   Asymmetrische Editorial-Komposition statt zentriertem Logo-Stapel. */

main.doc > section[data-screen-label="Rueckseite"]{
  min-height:297mm !important;
  box-sizing:border-box !important;
  padding:0 !important;
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  text-align:left !important;
  color:#f3e9ec !important;
  background:
    linear-gradient(90deg, rgba(229,20,42,.12) 0, rgba(229,20,42,0) 24%),
    #100d0f !important;
  isolation:isolate;
}

/* Die alte Lichtwolke und die riesigen M·M-Buchstaben gehoeren nicht mehr
   zur Gestaltung. Der Hintergrund bekommt stattdessen ein praezises Raster. */
main > section[data-screen-label="Rueckseite"] > div:nth-child(1),
main > section[data-screen-label="Rueckseite"] > div:nth-child(2){
  display:none !important;
}

main > section[data-screen-label="Rueckseite"]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
}

main > section[data-screen-label="Rueckseite"]::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:clamp(182px, 22%, 244px);
  right:clamp(34px, 6vw, 72px);
  width:2px;
  height:clamp(220px, 33vw, 390px);
  background:linear-gradient(to bottom, #ff4b7e, #e5142a 46%, transparent);
  box-shadow:0 0 18px rgba(229,20,42,.26);
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3){
  position:relative !important;
  inset:auto !important;
  min-height:inherit;
  box-sizing:border-box;
  padding:clamp(46px, 6.2vw, 72px) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(150px, 220px);
  grid-template-rows:auto 1fr auto;
  column-gap:clamp(32px, 6vw, 72px) !important;
  row-gap:0 !important;
  align-items:start !important;
}

/* Die AUREON-Wortmarke bleibt ein echtes Markenasset, wird aber horizontal
   und ohne schwebendes Logo-Kaestchen in die Editorial-Komposition gesetzt. */
main.doc > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-aureon-galaxy--rear{
  grid-column:1;
  grid-row:1;
  width:clamp(300px, 38vw, 380px) !important;
  height:auto !important;
  margin:0 !important;
  align-self:start;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  filter:none;
}

main.doc > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-aureon-galaxy--rear::before,
main.doc > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-aureon-galaxy--rear::after{
  display:none !important;
}

main.doc > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-aureon-galaxy--rear > img{
  content:url("marke-aureon-quer-silber.png");
  width:100% !important;
  height:auto !important;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > div:first-of-type{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  align-self:center;
  width:100%;
  margin:0 !important;
  padding-left:18px;
  border-left:2px solid #e5142a;
  text-align:left;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > div:first-of-type > div:first-child{
  margin:0 0 7px !important;
  font-family:'Manrope',sans-serif !important;
  font-size:11px !important;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:#ff5a76;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > div:first-of-type > div:last-child{
  font-size:10px !important;
  line-height:1.45;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:rgba(243,233,236,.54);
  opacity:1 !important;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p{
  grid-column:1 / -1;
  grid-row:2;
  align-self:center;
  position:relative;
  max-width:12.7ch !important;
  margin:clamp(54px, 8vw, 94px) 0 48px !important;
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:clamp(54px, 7.7vw, 82px) !important;
  font-weight:700;
  line-height:.98 !important;
  letter-spacing:-.052em;
  color:#f7f1f3;
  opacity:1 !important;
  text-wrap:balance;
  perspective:900px;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p::before{
  content:"10  /  ZUSAMMENARBEIT";
  display:block;
  width:max-content;
  margin-bottom:24px;
  font-family:'Manrope',sans-serif;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  color:#ff4b7e;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p::after{
  content:"";
  display:block;
  width:min(245px, 56%);
  height:5px;
  margin-top:32px;
  border-radius:999px;
  background:linear-gradient(90deg, #e5142a 0 62%, rgba(229,20,42,.18) 62% 100%);
  transform-origin:left center;
}

/* PowderReveal: echte responsive Zeilen materialisieren nacheinander.
   Satzzeichen liegen im selben Wort-Span und erscheinen mit ihrer Zeile. */
main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion .mm-backcover-visual{
  display:contents;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion .mm-backcover-word{
  display:inline-block;
  opacity:calc(var(--mm-dust-ink, 1) * var(--mm-line-ink, 1));
}

.mm-backcover-vapour{
  position:absolute;
  top:-48px;
  left:-48px;
  max-width:none;
  pointer-events:none;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion::before{
  opacity:0;
  transform:translate3d(0,10px,0);
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion::after{
  opacity:.2;
  transform:scaleX(0);
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion.is-visible::before{
  animation:mm-backcover-eyebrow-in 560ms cubic-bezier(.23,1,.32,1) 40ms both;
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion.is-visible::after{
  animation:mm-backcover-line 980ms cubic-bezier(.23,1,.32,1) 620ms both;
}

/* Das echte Produktzeichen als ruhige Signatur am Impressum der Rueckseite,
   nicht als orangefarbener Sticker in der freien oberen Ecke. */
main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > img[src$="magic-milk-original-logo.webp"],
main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-backcover-brand{
  position:relative !important;
  grid-column:1;
  grid-row:3;
  align-self:start;
  justify-self:start;
  z-index:1;
  isolation:isolate;
  width:72px !important;
  height:auto !important;
  aspect-ratio:1;
  margin:20px 0 0 !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 3px 3px rgba(0,0,0,.5));
  opacity:1;
}
.mm-backcover-brand > img{
  display:block;
  width:100% !important;
  height:auto !important;
  filter:grayscale(1) brightness(1.6) contrast(1.15);
}
/* Original asset is the mask: no redrawing, no changes to the logo file. */
@supports (mask-image:url("magic-milk-original-logo.webp")) or (-webkit-mask-image:url("magic-milk-original-logo.webp")){
  .mm-backcover-brand::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    mix-blend-mode:overlay;
    background:linear-gradient(164deg,#fff 0%,#dce3ec 19%,#82909f 34%,#fff 43%,#f5f8fc 47%,#5d6977 49%,#c1cbd8 58%,#fff 68%,#8b98aa 83%,#f2f6fc 100%);
    -webkit-mask:url("magic-milk-original-logo.webp") center / contain no-repeat;
    mask:url("magic-milk-original-logo.webp") center / contain no-repeat;
  }
}

main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > div:last-child{
  grid-column:1 / -1;
  grid-row:3;
  width:100%;
  box-sizing:border-box;
  margin:0 !important;
  padding:20px 0 0 96px !important;
  min-height:92px;
  border-top:1px solid rgba(243,233,236,.22) !important;
  font-family:'Manrope',sans-serif;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.5;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  color:rgba(243,233,236,.52);
  opacity:1 !important;
}

@keyframes mm-backcover-line{
  from{ transform:scaleX(0); opacity:.2; }
  to{ transform:scaleX(1); opacity:1; }
}

@keyframes mm-backcover-eyebrow-in{
  from{ opacity:0; transform:translate3d(0,10px,0); letter-spacing:.25em; }
  to{ opacity:1; transform:none; letter-spacing:.18em; }
}

@media (max-width:640px){
  main.doc > section[data-screen-label="Rueckseite"]{
    min-height:clamp(700px, 88svh, 840px) !important;
  }

  main > section[data-screen-label="Rueckseite"]::before{
    background-size:48px 48px;
  }

  main > section[data-screen-label="Rueckseite"]::after{
    top:230px;
    right:24px;
    height:300px;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3){
    padding:34px 28px 30px !important;
    grid-template-columns:minmax(0,1fr) 72px;
    grid-template-rows:auto auto 1fr auto;
    column-gap:18px !important;
  }

  main.doc > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-aureon-galaxy--rear{
    grid-column:1 / -1;
    width:215px !important;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > div:first-of-type{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:start;
    width:auto;
    margin-top:34px !important;
    padding-left:12px;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p{
    grid-column:1 / -1;
    grid-row:3;
    justify-self:start;
    align-self:center;
    max-width:11.4ch !important;
    margin:48px 0 48px !important;
    min-width:0;
    width:100%;
    font-size:clamp(36px, 10.2vw, 44px) !important;
    letter-spacing:-.055em;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p::before{
    margin-bottom:20px;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p::after{
    height:4px;
    margin-top:25px;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > img[src$="magic-milk-original-logo.webp"],
  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > .mm-backcover-brand{
    grid-row:4;
    width:64px !important;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > div:last-child{
    grid-row:4;
    padding-left:88px !important;
    min-height:84px;
    font-size:8.5px !important;
    letter-spacing:.08em !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mm-backcover-vapour{display:none !important;}
  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion .mm-backcover-word{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    animation:none !important;
    will-change:auto;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion::before{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion::after{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

@media print{
  .mm-backcover-vapour{display:none !important;}
  main > section[data-screen-label="Rueckseite"]{
    break-before:page;
    page-break-before:always;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion .mm-backcover-word,
  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion::before,
  main > section[data-screen-label="Rueckseite"] > div:nth-child(3) > p.mm-backcover-motion::after{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    animation:none !important;
  }
}